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

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編などの執筆を手掛けている。

r5image100.jpg

 まず、ブラウザからデバイス固有の各種機能を利用できるデバイス系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)氏による発表。

r5image130.jpg

getUserMediaの基本

 仕様はWeb Real-Time Communications Working Groupで策定されている。getUserMediaを実装したOperaのビルドは、Labs - Dev.Operaからダウンロードできる。getUserMediaは、navigator.getUserMediaを呼び出すことで使用可能。

 メディアのタイプはaudioとvideoが指定でき、ビデオのタイプはenvironment、userから選ぶことができる。userは、いわゆるインカメラだ。

 呼び出しが成功すると、成功時のコールバックの引数にstreamが渡されるので、video.src=streamなどとすれば良いとのことだ。

ライブコーディング

r5image110.jpg

 ここで、ダニエル氏によるライブコーディングがスタート。

 まずはgetUserMediaを使い、Webカメラで撮影した動画をWebブラウザ上に表示するコードが示された。

r5image120.jpg

 ここからコードを変更していき、Webカメラで撮影した画像をCanvasに描画したり、setIntervalで40msごとにcanvasへ描画したり、さらにはcanvasのクリック時にcanvas.toDataURLでJPEG化して別のcanvasにサムネイルとしてinsertBeforeするコードなどが紹介された。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

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

メールマガジン登録

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