連載
» 2011年12月21日 00時00分 公開

D89クリップ(33):【第23回 HTML5とか勉強会レポート】 HTML5のデバイス&位置情報系APIを使いこなせ! (1/2)

モバイルデバイス上のWebアプリの未来を担う、HTML5のデバイス系と位置情報系APIを使いこなせ!getUserMediaや、Geolocation APIとは?

[@akio0911,拡張現実ライフ]

デバイス系APIの全体像

 2011年11月16日、NTTコミュニケーションズで、「第23回 HTML5とか勉強会」が開催された。「HTML5とか勉強会」は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「デバイス系API」。当日の様子をお伝えしよう。

 NTTコミュニケーションズの小松氏@komasshuからプレゼンがスタート。

 小松氏はGoogle API Expertであり、徹底解説HTML5 APIガイドブック オフライン系API編や、徹底解説 HTML5 APIガイドブック コミュニケーション系API編などの執筆を手掛けている。

 まず、ブラウザからデバイス固有の各種機能を利用できるデバイス系APIとして、Geolocation APIDeviceOrientation EventHTML 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 GroupDevice APIs Working GroupWeb 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するコードなどが紹介された。

       1|2 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。