「第23回　HTML5とか勉強会」活動報告

今回で23回目となるHTML5とか勉強会は、11月16日にNTTコミュニケーションズさんのオフィスをお借りし、「⁠Device系API」をテーマに開催されました。今回の勉強会は、前半をカンファレンス形式のセッション3つ、後半をアンカンファレンスという形式で行われました。

本稿では、今回のイベントについてレポートします。

Device系APIの全体図

まず最初はNTTコミュニケーションズのこまつけんさくさんに、Device系APIの全体像について講演いただきました。

Device系APIというのはブラウザからデバイス固有の機能を使えるようにするAPIのことです。現在一部ブラウザには、以下のようなAPIが実装されているそうです。デモはこちらです。iOS5デバイスで見ることをおすすめします。

GeoLocation
Device Orientation
HTML Media Capture
Stream
Compass

APIはそれぞれのWorking Groupによって検討されていて、Device系APIは以下の3つのWGによって議論されています。

Geolocation WG
- 緯度経度取得、傾き取得
- 最近は住所まで取得できるGeolocation level2を検討中（Firefox 7では実装済）
Device API s WG
- Device APIについて検討するメインのWG
  - 他アプリケーションとの連携を行うAPIが主
  - Media Captureなど
Web Real-Time Communication WG
- P2P、ストリーミングなど
  - Stream API

今後検討されていく仕組みとしては、以下のようなデバイスやサービスを見つけるものがあるそうです。

Web Intents
- Webサービス同士が連携する仕組み
Discovery API
- uPnPやZeroconf

これらが実装されたら、ウェブアプリだけですべてができるような世界になりそうで楽しみです。講演資料はこちらになります。

チーズ！（ウェブでカメラの取得）

続いて、Opera Softwareのダニエルさんに、Stream APIについて講演いただきました。

10月19日にOpera labで、getUserMediaが使えるOperaが公開されたそうです。getUserMediaとは、ブラウザからカメラやマイクにアクセスするAPIの実装です。今回は、そのOperaを使って、実際にカメラを利用してみるという内容でした。

getUserMediaは現在、以下のコードのように使われます。

navigator.getUserMedia(
    [type] *,
    [successCallback] *,
    [errorCallback]
);
function successCallback(stream){};
function errorCallback(error){};
*require

ここで指定するタイプとは使用するメディアのことです。また、ビデオを使う場合のカメラの指定もカメラのタイプで行います。使えるものは以下のとおりです。

メディアのタイプ
- audio
- video
ビデオのタイプ
- environment
- user

ビデオのタイプとは、メディアのタイプにvideoをセットしたときに使用するオプションです。environmentがユーザに向いていないカメラ、userはユーザに向いているカメラ、つまりスマートフォンでのリアカメラとフロントカメラかを指定するオプションです。指定しない場合、デフォルトのカメラが呼び出されます。指定の仕方は、ビデオをフロントカメラで使うなら「⁠”video user⁠”⁠」⁠、マイクとビデオ両方使い、リアカメラを使う場合は「⁠”audio, video environment⁠”⁠」のように指定します。

この仕様は、まだ策定中の仕様なので変更される場合もあります。まだ安定していないため、これから実装されるブラウザではメソッドプレフィックスがついて、operaGetUserMediaや、webkitGetUserMediaなどになるとのことです。

getUserMediaで取得したstreamは、videoタグのsrcに入れることで表示できます。表示後は、通常のvideoタグと同じようにcanvasへの表示や、canvas上での加工や、静止画にして保存などができます。講演中、streamをvideoに表示した後、canvasに表示し、それをクリックすることで映像を取得し、取得した画像をダウンロードできるというサンプルページを作成できることをライブコーディングで示しました。サンプルページはこちらになります（getUserMediaが使えるブラウザでご覧ください⁠）⁠。

一連のやり取りは動画や講演資料をご覧ください。

GeoHex & GeoLocationAPI

カンファレンス最後のセッションは、GeoHex代表の笹田忠靖さんに、Geolocation APIとGeoHexについて講演いただきました。

GeoHexとは、笹田さん自身が開発されている、地図全体を隙間なく六角形で覆い、位置情報を六角形で管理するライブラリです。今回は、GeoLocationAPIに関する知識やノウハウ、またGeoHexの紹介やそれを使ったページの紹介という内容でした。

まず最初に、GeoLocationAPIについての簡単な説明と使い方、GoogleMapとの連携方法などが紹介されました。以下は講演中に掲示されたGeoLocationAPIの利用例に少し追記したものです。

navigator.geolocation.getCurrentPosition( successCallback, errorCallback );
function successCallback(position) {
        console.log(“緯度: ”+position.coords.latitude);
        console.log(“経度: “+position.coords.longitude);
}
function errorCallback(error) {
        console.log(“code: “+error.code);
}

次に、GeoLocationAPIを使う上での注意点を挙げました。

測位手段が選択不可能
測位には時間がかかる
キャッシュが強い
電池消耗
許可フラグの問題

また、GeoLocationを用いたサービスを作る上での注意点も指摘しました。

実機検証
測位の時間やズレは天候などの条件で変わる
屋外で使うことを考えた配色
屋内などの不正確な場合の対応
測位中の不通への対応

筆者も現在GeoLocationAPIを使ったサービスを構築しているのですが、キャッシュの強さには苦労していて、目から鱗な内容でした。

最後に、GeoHexについての説明と実際に使っているデモを紹介しました。GeoHexは、六角形で位置情報を管理することで、情報量の多さや、プライバシーの問題などを改善することを目的としたライブラリだそうです。矩形ではなく六角形になっている理由は、矩形と比べて、周囲のグループとの距離が均一になるからとのこと。

実際にGeoHexを用いて作られたデモはこちらになります。詳しくは、こちらの講演資料をご覧ください。

アンカンファレンス

冒頭で言及したとおり、今回はセッション後にアンカンファレンスを行いました。

アンカンファレンスとは、各自テーマを決めて議論し、最後に何を話したか発表する、講演者だけではなく参加者たちで進める⁠”アン⁠”カンファレンスな企画です。本勉強会では初の試みでしたが、海外ではよく行われているもので、先日アメリカで開催されたTPAC 2011でも行われていました。

今回はカンファレンス終了後、最初に全員で議題を決め、それぞれが好きな議題のグループに別れ、ビールと軽食を片手に和気あいあいと議論を深めました。そして最後に、それぞれの議題の代表者によるプレゼンテーションを行いました。

実際に議論されていた内容は以下になります。写真は議論中に書かれていたホワイトボードです。

最後に

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter（@yutaro_i）までお気軽につぶやいていただければと思います。

本勉強会は、毎月第3水曜日または第3木曜日に開催していますので、興味を持たれた方は是非参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5j.orgのMLで行われますので、こちらをご確認ください。なお、コミュニティサイトhtml5j.orgも公開していますので、是非こちらもご確認ください。