HTML5でできるカメラアプリを実際に体験しよう秋葉秀樹

http://goo.gl/foPmv本日のデモ

自己紹介

秋葉秀樹フリーランスのデザイナーIllustrator, Photoshop, Flash, ActionScriptHTML, CSS, JavaScript, Web Direction3DCG（Lightwave, Shade）, Movie

自論「すべてのモノ作りは人に還る」

5/25に発売します！

すべての人に知っておいてほしいスタイルシートデザインの基本原則秋葉秀樹 (著), 安住 光 (著), 坂本亮介 (著), 千貫りこ (著), 鍋坂理恵 (著), 林 豊 (著), 比留間和也 (著)

?

今、見え隠れしているブラウザの新機能

カメラを使うバイブレーションを動かす位置情報を取得する電池残量を取得するおしらせ機能を使う

本日、デモで使うブラウザ

ChromeAndroid 4.0

Ice Cream SandwichBrowser

Firefox AuroraOpera Mobile

Technical Preview

LAB

http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

Opera Mobile 12for Android

Opera MobileTechnical Preview

LAB

今回はテクニカルプレビュー版でデモをします

WebアプリケーションにおけるHTMLの過去と未来

1987

1990

XHTML1.0XMLの厳密な記述Webアプリケーションに拡張が困難

Web Applications 1.0WHATWGが仕様策定を進める、ユーザが「使える」Webアプリケーション

XHTML2.0W3Cが策定を進めようとするが普及せず廃止

????

組み込み言語 組み込み言語

組み込み言語

組み込み言語

組み込み言語

組み込み言語

組み込み言語

互換性がない

HTML5 HTML5

HTML5

HTML5

HTML5

HTML5

HTML5HTML5

HTML5

Web標準 最終形態!?

スマートフォンのネイティブアプリとWebアプリの違い

ネイティブアプリ開発倍の工数と予算

Objective - C Java

JavaScriptで開発

iPhoneでFacebookを使う選択肢といえば…

現状、Safariはデバイスの機能をフルに使えない

写真アルバム電話帳

カレンダー

カメラ／マイク電池残量バイブレーションお知らせ機能×

アクセス不能

しかしWebの目的であるこれらを実現しようと仕様が策定されつづけている

http://html5demos.com/geo

位置情報（ジオロケーション）

もう既に始まっている試験実装

HTML5の仕様にもとづいてカメラや音声認識機能を試験的に実装しはじめている

Android 4.0Ice Cream Sandwich

BrowserChrome Opera Mobile Firefox Aurora

カメラ（静止画） カメラ／音声認識お知らせ機能 カメラ 電池残量／バイブ

もう使えます

（注意）条件付きですが…

カメラ撮影

HTMLでカメラにアクセスする主な2つの仕様

<input type="file"accept="image/*;capture=camera">

静止画を扱うだけのシンプルなもの

JavaScriptと<video>を連動させる

ブラウザでビデオチャットなどに使うことが目的

<video autoplay>

<script>

var video = document.getElementsByTagName("video")[0];

navigator.getUserMedia("video", function (s){

video.src = s;

});

</script>

カメラの映像をvideo要素に映すコード

特に引数sの仕様が変わる可能性は高い

Demo

ブラウザから写真を録り、その写真をサーバに投稿（みなさんもごいっしょに）

Android 4.0で標準搭載！

私たちのつくるスマホ向けサイトから写真撮影&投稿が可能になる？

音声認識

音声を文字に変換するSpeech Input API

<input type="text" x-webkit-speech />

私も使ってみました！

Demo

「ここ」「どこ」があると「地図を起動します」と発声してGoogle Mapを表示するデモ

「Chrome」「愛してるよ」があると「他のブラウザにも同じことを言ってるんでしょ？」と発声するデモ

電池残量

バッテリー残量や充電中状態などを検知可能

var battery = navigator.mozBattery

現在はベンダープリフィックスが必要

機種依存が激しい！バッテリー残量の信頼性はまだ薄い！

Demo

バッテリー残量をブラウザで表示

バイブレーション

ブラウザから振動させる

navigator.mozVibrate([1000, 500, 200, 500]);

現在はベンダープリフィックスが必要

どんなリズムのバイブレーションかを指定可能

navigator.mozVibrate([

300, 300, 300, 300, 900, 300,

300, 300, 300, 300, 900, 300,

300, 300, 300, 300, 300, 300,

300, 300, 300, 300, 300, 300, 900, 300

]);

「どうせまだ先だから」と考えるのではなく来るべき将来に目を向けよう

ソーシャル向けサービスとして活用するシーンはここ数年で来るかも？

Thanks!