【第23回 HTML5とか勉強会レポート】 HTML5のデバイス＆位置情報系APIを使いこなせ！：D89クリップ（33）（1/2 ページ）
モバイルデバイス上のWebアプリの未来を担う、HTML5のデバイス系と位置情報系APIを使いこなせ！getUserMediaや、Geolocation APIとは？
デバイス系APIの全体像
2011年11月16日、NTTコミュニケーションズで、「第23回 HTML5とか勉強会」が開催された。「HTML5とか勉強会」は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「デバイス系API」。当日の様子をお伝えしよう。
NTTコミュニケーションズの小松氏@komasshuからプレゼンがスタート。
小松氏はGoogle API Expertであり、徹底解説HTML5 APIガイドブック オフライン系API編や、徹底解説 HTML5 APIガイドブック コミュニケーション系API編などの執筆を手掛けている。
まず、ブラウザからデバイス固有の各種機能を利用できるデバイス系APIとして、Geolocation API、DeviceOrientation Event、HTML Media Captureなどを挙げた。
デバイス系APIの使用例として、Google Maps APIを使ったデモを紹介。Geolocation APIを使用して測位した現在地の地図が表示され、DeviceOrientation Event、HTML Media Captureを使用して、端末（iPad）の向きや傾きに応じて地図の表示も変化するデモだ。
HTML Media CaptureやStream APIを使えば、端末のカメラやマイクにもアクセスできるとのことだ。しかし一部では、「HTML 5は機能が重複しすぎている」という指摘もあるそうだ。
Crockford氏はHTML5は機能が重複しすぎていることも指摘しています。「Local StorageとLocal Databaseの両方が本当に必要なのか？ CanvasとSVGのような異なる2つの描画システムは必要なのか？ 私はミニマリストだ。最小限の合意の方が、よりインターオペラビリティを高められると思う。HTML5は台所の流しにあれこれ詰め込みすぎているようなものだ」
引用：「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏 − Publickey
HTML5の仕様策定を進めているワーキンググループ
HTML5の仕様策定を進めているワーキンググループには、Geolocation Working Group、Device APIs Working Group、Web Real-Time Communications Working Groupなどが存在する。
- Geolocation Working Group
Geolocation Working Groupでは、緯度経度取得や傾き検出などに関するAPIの仕様策定が行われている。Level 2では住所も取得することができる。Level 2はFirefox 7ですでに実装されているとのことだ。
- Device APIs Working Group
Device APIs Working Groupはデバイス系APIのメインともいえるWGで、カメラやバッテリなど、さまざまなAPIの仕様策定を行っている。
歴史的に、ほかのアプリケーションとの連携の色彩が強いとのこと。Media Capture APIも、このWGで仕様策定が進められている。
- Web Real-Time Communications Working Group
Web Real-Time Communications Working Groupでは、P2Pやストリーミングなどに関して検討が進められている。
・ WebApps Working Group
WebApps Working Groupでは、Web Intentsを検討しているとのこと。
- デバイス間の連携
これまでに挙げたAPIを活用することで、PCとスマートフォンのブラウザ間でP2P通信を行うなどして、デバイス間で連携するWebアプリケーションを作成することができる。
そこで重要となるのが、デバイスやサービスを見つけるための仕組み。Device APIs Working Groupでは、デバイスやサービスを見つけるためのDiscovery APIとして、uPnPやZeroconfなどが検討されているとのことである。
「チーズ！（Webでカメラの取得）」
Opera Softwareのダニエル・デイビス（Daniel Davis）氏による発表。
getUserMediaの基本
仕様はWeb Real-Time Communications Working Groupで策定されている。getUserMediaを実装したOperaのビルドは、Labs - Dev.Operaからダウンロードできる。getUserMediaは、navigator.getUserMediaを呼び出すことで使用可能。
メディアのタイプはaudioとvideoが指定でき、ビデオのタイプはenvironment、userから選ぶことができる。userは、いわゆるインカメラだ。
呼び出しが成功すると、成功時のコールバックの引数にstreamが渡されるので、video.src=streamなどとすれば良いとのことだ。
ライブコーディング
ここで、ダニエル氏によるライブコーディングがスタート。
まずはgetUserMediaを使い、Webカメラで撮影した動画をWebブラウザ上に表示するコードが示された。
ここからコードを変更していき、Webカメラで撮影した画像をCanvasに描画したり、setIntervalで40msごとにcanvasへ描画したり、さらにはcanvasのクリック時にcanvas.toDataURLでJPEG化して別のcanvasにサムネイルとしてinsertBeforeするコードなどが紹介された。
Copyright © ITmedia, Inc. All Rights Reserved.