CSS Nite in OSAKA, Vol.30でプレゼンしたスライド。 getUserMedia()やBatteryStatus API, Chrome実装のSpeech Input APIやバイブレーションなど、先行実装をまとめてライブデモ。

1. HTML5でできるカメラアプリを実際に体験しよう
秋葉秀樹
本日のデモ
http://goo.gl/foPmv

2. 自己紹介
秋葉秀樹
フリーランスのデザイナー
Illustrator, Photoshop, Flash, ActionScript
HTML, CSS, JavaScript, Web Direction
3DCG（Lightwave, Shade）, Movie
自論「すべてのモノ作りは人に還る」

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

4. 今、見え隠れしているブラウザの新機能
カメラを使う
バイブレーションを動かす
位置情報を取得する
電池残量を取得する
おしらせ機能を使う

5. 本日、デモで使うブラウザ
LAB
Android 4.0 Opera Mobile
Ice Cream Sandwich Chrome Technical Preview Firefox Aurora
Browser

7. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
LAB
Opera Mobile
Technical Preview
Opera Mobile 12
for Android
今回はテクニカルプレビュー版でデモをします

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

9. 1987

10. 1990

11. XHTML1.0
XMLの厳密な記述
Webアプリケーションに拡張が困難
Web Applications 1.0
WHATWGが仕様策定を進める、ユーザが「使える」Webアプリケーション
XHTML2.0
W3Cが策定を進めようとするが普及せず廃止
????

13. 組み込み言語
組み込み言語
組み込み言語
組み込み言語
組み込み言語
組み込み言語
組み込み言語
互換性がない

14. HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
Web標準 最終形態!?

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

16. ネイティブアプリ開発
倍の工数と予算
bjective - C Java

17. JavaScriptで開発

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

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

21. アクセス不能
×
カメラ／マイク
写真アルバム
電池残量
電話帳
バイブレーション
カレンダー
お知らせ機能
しかしWebの目的である
これらを実現しようと仕様が策定されつづけている

23. （ジオロケーション）
位置情報
http://html5demos.com/geo

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

25. もう使えます
カメラ／音声認識
カメラ（静止画） カメラ 電池残量／バイブ
お知らせ機能
Android 4.0
Ice Cream Sandwich Chrome Opera Mobile Firefox Aurora
Browser
（注意）条件付きですが…

26. カメラ撮影

27. HTMLでカメラにアクセスする主な2つの仕様
<input type="file"
accept="image/*;capture=camera">
静止画を扱うだけのシンプルなもの
JavaScriptと<video>を連動させる
ブラウザでビデオチャットなどに使うことが目的

28. カメラの映像をvideo要素に映すコード
<video autoplay>
<script>
var video = document.getElementsByTagName("video")[0];
navigator.getUserMedia("video", function (s){
video.src = s;
});
</script>
特に引数sの仕様が変わる可能性は高い

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

30. Android 4.0で標準搭載！
私たちのつくるスマホ向けサイトから
写真撮影&投稿が可能になる？

31. 音声認識

32. 音声を文字に変換するSpeech Input API
<input type="text" x-webkit-speech />

33. 私も使ってみました！

34. Demo
「ここ」「どこ」があると
「地図を起動します」と発声してGoogle Mapを表示するデモ
「Chrome」「愛してるよ」があると
「他のブラウザにも同じことを言ってるんでしょ？」と発声するデモ

35. 電池残量

36. バッテリー残量や充電中状態などを検知可能
var battery = navigator.mozBattery
現在はベンダープリフィックスが必要
機種依存が激しい！バッテリー残量の信頼性はまだ薄い！

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

38. バイブレーション

39. ブラウザから振動させる
navigator.mozVibrate([1000, 500, 200, 500]);
現在はベンダープリフィックスが必要
どんなリズムのバイブレーションかを指定可能

40. 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
]);

41. 「どうせまだ先だから」と考えるのではなく
来るべき将来に目を向けよう
ソーシャル向けサービスとして
活用するシーンはここ数年で来るかも？

42. Thanks!