HTML5とか勉強会 第23回 に行ってきた #html5j

HTML5Study HTML5 Event

HTML5とか勉強会 第22回 に行ってきた。すでに1ヶ月以上前のこと。

会場はNTTコミュニケーションズさん。今回のテーマは「デバイス関連API」、それと後半にアンカンファレンス。Device関連のAPIはいろいろあって、どんどん変わっていくので今ひとつ把握しづらい。アンカンファレンスははじめての試みで、楽しみにしていた。

発表はこんな感じ。

  • Device系APIの全体図 小松さん [twitter:@komasshu]
  • チーズ！（ウェブでカメラの取得）ダニエルさん [twitter:@ourmaninjapan]
  • GEOHEX & GeoLocationAPI sa2daさん [twitter:@sa2da]

Device系APIの全体図

Device系APIの全体図

  • カメラやマイクも
    • HTML Media Capture
    • Stream API
  • 個々のWGが作業
  • Geolocation WG
    • Level2では緯度経度だけじゃなく住所も Firefox7では実装済み
  • Device APIs WG
    • メインのWGはここ。いろいろなAPI
    • Media Captureもここ
    • 他のアプリケーションとの連携など
    • バッテリーの状態とかを取得したり
  • Web RTC
    • WhatWGからの流れ
    • P2Pとかストリーミング
  • 似たようなものがある状況だけど連携も進めようとしている
  • デバイス間の連携。デバイスやサービスを見つける仕組み
    • Web Apps WG :Web Intents
    • Device APIs WG: Discovery API
    • uPnP, Zeroconf

チーズ！（ウェブでカメラの取得）ダニエルさん

資料はこちら。

セッションで紹介されたサンプルはこちらに。

動作確認には、以下の Opera Labs build が必要。ちょっと面倒かもしれないけど、ダウンロードしてインストールしてサンプルを表示してみると楽しいと思う。

  • getUserMediaの基本
    • Device APIs はHTML5に関連する仕様
    • カメラの仕様があるけど、重要なので別立てになってきた
  • Web RTC リアルタイムコミュニケーション
    • P2Pもある
    • メディア　カメラの取得
    • whatwgとw3cが一緒に作ってる
navigator.getUserMedia(
  [type] *, // audio or video ビデオのタイプと、 enviroment,user どっち向きのカメラか
  [successCallback],
  [errorCallback],
);
  • ベンダープリフィクスがつくと思う
  • まだまだ仕様が変わる可能性がある
  • 使い方
navigator.getUserMedia(
  'audio, video user',
  successCallback,
  errorCallback
);

function successCallback(stream){
  video.src=stream;
}
function errorCallback(error){
  alert('!!');
}
  • 開発者版なので許可が聞かれない
    • ちゃんと聞かれるようになる
  • 面白いことをしたければ2dのcanvasにしてフィルターを書けたり
  • videoタグで取り込んだものをcanvasで表示する
    function doDraw(video, context) {
        // Continually draw video onto the canvas
        window.setInterval(function() {
            context.drawImage(video, 0, 0);
        }, 40);
    }
  • canvasをクリックすると、その時の画面をキャプチャする
  • キャプチャした画像のダウンロードは、画像をクリックした時のイベントでこんなhackを使っていた
   data.replace('image/jpeg','image/octet-stream')

GEOHEX & GeoLocationAPI sa2daさん

HTML5勉強会#23_GeoHex
View more presentations from sa2da
geohex 地図を六角型に区切ったりする
第五回おばかアプリ優勝！

  • GeoLocationAPIの基礎
    • corelocationframeworkを最終的には使う
    • navigator.geolocation.getCurrentPosition
    • パーミッションがないとか、位置情報とれないとエラーコールバック
  • GeoLocationAPIから地図
  • GeoLocationAPIの注意点
    • 測位手段を選べない
    • GPS IP WiFI 基地局
    • どれが呼ばれるかわからない
    • 測位には時間がかかる
    • この表、わかりやすかった。



  • キャッシュがきつい
    • 前回の即位が返ってくる
    • タイムスタンプをみたり前回と差異を計測しないと
    • getCurrentPositionよりwatchPositionがおすすめ
    • watchを一定時間実行する5-8秒
    • 電池の消費に気をつけて
  • サービス設計時の注意点
    • 実機確認大事
    • シミュレータじゃなくて実機
    • 同じ場所でも天気や時間によって、位置のズレや測位時間は大きく異なる
    • 屋外で使用する場合、画面反射を考慮した配色を
    • 反対に屋内の不正確な状況も考慮する
    • チェックインサービスは実は難しい
    • 電波が途切れたときのエラーは1回にする
    • SEO向きじゃない。静的動線をわすれずに
    • 検証の負荷はWebアプリもネイティブアプリもそれほどかわらない
  • GeoHexの紹介
    • GreenMap Sample
    • ピンが乱立するのはいや
    • プライバシーの問題も
    • geohexは六角形で表現する
    • ピンポイントじゃないある地域にいることを表現
    • 六角形だと中心点の距離が等間隔になる。

アンカンファレンス

アンカンファレンスってなに？というは以下のエントリがわかりやすい。

今回はアンカンファレンス風な感じ。ネタをいくつか出してもらって、聞きたい話したいネタごとにグループで別れて、いろいろ話合う。出てきたテーマはこんな感じ。

  • HTML5の勉強方法
  • 女性の参加者を増やすには？
  • 「HTML5サイトで」と言われたら
  • 「HTML5/CSS3できます」の定義
  • サイトのディレクトリ構成
  • SVGとCanvasの使い分け
  • マイナーなAPI(Full Screen API)
  • テストのやり方・書き方

テーマ出しが難しい。僕もWebFontsで、と思ったんだけど、インターネットに繋がらなかったので辞めてしまった。実際に見せることができないと、ちょっと難しいかなと思って。
僕は「マイナーなAPI」のグループだった。細かいことはメモしてないので、こちらのレポートを。

まとめ

デバイスが扱えるといろいろ楽しいな、と思った。僕はやっぱりカメラが気になる。ダニエルさんのサンプルは、ソースを読んでもそんなに難しくない。あれだけの短さでカメラからの動画や画像を使えるのはすごい。
アンカンファレンスに参加したのははじめてだったけど、いろいろなひとと特定のテーマを話しあえるのよかった。仲良くなれるし。ただアンカンファレンスやるなら、お酒が入っていないほうがいいかも。議論が白熱しすぎたり、発散しちゃうと残念なので。終わったあとに、楽しく飲めるといいかな。

これまでに参加したときのエントリ