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

2011年12月26日、ソフトバンクさんの食堂をお借りし、24回目となる「HTML5とか勉強会」を開催しました。今回のテーマは「オムニバス⁠⁠。2011年最後の勉強会ということでHTML5の総まとめと、2011年ブラウザに実装されたAPIについてやこのAPIを実際に使った話が講演されました。

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

画像

FileとWebの関係をもっと知るBlob, FileそしてFile System API

最初のセッションは、Google安田絹子さんにFile/File System APIについて講演いただきました。

画像

File APIというのはウェブ上でローカルファイルを扱うAPIです。そして、その延長線上にあるのがFile System APIです。ここでは、File API: Directories and SystemsをFile System APIと呼んでいます。これらのAPIについて詳しく説明がありました。

冒頭、File APIの基本について説明が行われ、File APIとは以下の3つのオブジェクトで構成されるAPIと示しました。

Blob
バイナリデータを扱うオブジェクト
File
Blobのサブクラスのようなもの、ローカルファイルを扱うオブジェクト
FileReader
Fileを読むためのオブジェクト

これらを使うことでウェブ上でファイルを扱うことが可能になります。

この中で一番重要なのはBlobです(講演では「これだけでも覚えて帰ってください」と言及していました⁠⁠。Blobが重要な理由は、バイナリデータを扱うための基本オブジェクトであることと、もう一つ大きな理由があります。それはBlob URLです。Blobデータへの参照をURLにすることができるのです。URLにすることでURLを扱うAPI、例えばimgタグやscriptタグのsrc属性やcanvasのdrawImage等に渡すことができて、簡単にBlobデータを使用することができるようになります。そのため、Blobの重要度、利便性を引き上げているとしました。

次に、File System APIについて説明がありました。

このAPIは、File APIのようにローカルファイルを扱うAPIですが、ファイルだけではなく木構造のディレクトリ構造を扱うことができるAPIで、読むだけでなく書くことも可能です。また、ユーザが指定した場所を読むわけではなく、ブラウザがウェブサイト固有のサンドボックス化されたファイルシステムを用意し、そこを自由に使うことができるという仕組みになっています。

File System APIは以下の3つのオブジェクトが主に利用されるオブジェクトです。

FileSystem
サンドボックス化されたファイルシステム空間
FileEntry
ファイルを表す
DirectorEntry
ディレクトリを表す

FileSystemを開いて、rootディレクトリを取得してから、ファイルの読み書きを行うというのが一連の流れになるとのこと。

File System APIについての話の後は、安田さんが作ったサンプルアプリを用いてデモが行われました。サンプルアプリはこちらに公開されています。

また、講演資料内には、APIを利用するためのコードもありますので、詳しくは講演資料をご覧ください。資料はこちらです。

はじめてのWeb Audio API

2番目の講演はGoogleの北村英志さんによる、Web Audio APIについてです。

画像

Web Audio APIとは、ブラウザ上で音を鳴らしたり、生成したりすることができるAPIです。現在はChromeのみに実装されています。Web Audio APIについて詳しく説明がありました。

まずはじめに、実際にWeb Audio APIを利用しているアプリが紹介されました。

Audio Visualizer in 3D
アップロードされたmp3を解析してビジュアライズしている
WebGL City
ヘリコプターの音が飛んでいる場所によって変わっていく

次にWeb Audio APIが、AudioタグやAudio Data APIとどのように違うものかが比較されました。

Audioタグは音を扱うためのマークアップです。Audio Data APIは、現在Firefoxに実装されている音を扱うAPIです。3者ともすべて音を扱うものなのですが、これらの違いを簡単に表で示すと以下のようになります。

 AudioタグAudio Data APIWeb Audio API
音声ファイルの再生
音の生成×
用途BGMのような長く再生するもの効果音のような正確なタイミングが重要なもの効果音のような正確なタイミングが重要なもの
音の編集方法×波形を計算しAPIに渡す元の音には手を加えず、出力するまでの間にモジュールを足す

Web Audio APIは上記の票でも言及している通り、モジュールを付け足して音を作るという点が優れています。以下のようなモジュールを組み合わせることで音が鳴るようになっているそうです。

AudioContext
基礎となるモジュール、時間管理やオーディオの出力部を持つ
AudioBuffer
音源
AudioNode
ほぼ全てのモジュールのインタフェース
AudioParam
自動化が可能なパラメータ制御を持つインタフェース

その後、デモを用いてより詳しい説明がありました。また、音とは何かについてや、波形編集手法の違い、Web Audio APIのモジュールについて等専門的な内容についての説明も行われました。

興味がある方は是非講演資料をご覧ください。

Google Fesの舞台裏とか

次に、Google Fesの舞台裏についてチームラボの栗原さんに講演いただきました。

画像

Google Fesとは、11月1日に開催されたGoogle Developers Day 2011のigniteにて発表されたもので、ウェブ上で構築されたステージアプリケーションです。そこにアクセスしたPCやiPhoneが楽器になり、振ったりするとステージ側で音が鳴ったりアニメーションしたりするというアプリです。

こちらのサイトにアクセスすると楽器を見ることができます(動作ブラウザはChromeとiPhoneのSafariです⁠⁠。MacBook ProならMacBook Proを振ることで音が鳴るとのこと。ステージ側のURLは公開されていなかったので残念ながら見られませんでした。

このセッションでは、このアプリを実装する時に苦悩されたことやそれらを解決した手法などが紹介されました。

このアプリの実装期間はたったの約2週間であったことに触れつつ、その実装を行う上での全体方針は以下のとおりであったことが説明されました。

高速性
振ったらすぐに反応するというような気持ちよさ
検出の工夫
振ったらどのように反応すれば楽しいか
当日の安定稼働
インフラによるスケールの容易さ
1,000人ぐらいの会場で実演するので、その規模への対応

これらの方針の落とし穴やその解決方法、工夫した点を説明していただきましたが、ここでは著者にとって特に印象的だった高速性と検出の工夫について触れたいと思います。

高速化と検出の工夫に対応するため、以下の処理が行われていたそうです。

  • 楽器の音は最初の接続時にロードしておく
  • 気持ちよく音を鳴らすために、振りだしのタイミングで音を鳴らす
  • オブジェクトの動きを管理するタイマーは1つだけ
  • 同じ画像はPaper.jsの画像のSymbol化で使い回す
  • 楽器の音をキャッシュしておくことで次回のロードが早くなる
  • Web Audio APIとAudioタグを用途に合わせて使い分ける

特にデモ上で様々に動く数多くのオブジェクトが、一つのタイマーで管理されているというものが驚きでした。

他の部分は講演資料や以下の講演動画をご覧ください。実際に運用する上での苦悩を見ることができるはずです。

HTML5&API 総まくり

2011年最後のセッションは、本勉強会主催の白石さんにHTML5総まとめです。

画像

スライド72枚という膨大な情報を20分で講演するために、テクノに乗せて講演していただきました。

紹介されたマークアップやAPIの内訳は以下のとおりです。

  • HTML/DOM/ブラウザ環境
    • form要素
    • microdata
    • RDF/RDFa/RDFa Lite
    • shema.org
    • DOM4
    • Shadow DOM
    • script要素の新属性
    • style要素のスコープ化
    • Drag and Drop API
    • History API
    • atob/btoa base64
    • DOMCryptAPI - Web Cryptography API
    • Selectors API
    • Web Intents
    • registerProtocolHandler/registerContentHandler
    • Web Notifications
    • Fullscreen API
  • オフラインWebアプリケーションに関連するAPI
    • Application Cache
    • navigator.online online/offlineイベント
    • Web Storage
    • Indexed Database API
    • File API
    • File API: Directories and System
    • File API: Writer
    • Streams API
    • Quota Management API
    • Typed Array
    • Web Workers
  • デバイスAPI
    • Contacts API
    • Battery Status API
    • HTML Media Capture
    • Messaging API
    • Network Information API
    • Sensor API
    • Vibration API
    • Geolocation API
    • HTML Speech
    • Device Orientation Events
    • Touch Events
  • ネットワークコミュニケーション系API
    • WebSocket
    • Server-sent Events
    • Cross Document Messaging
    • Cross Origin Resource Sharing
    • XMLHttpRequst Level2
  • マルチメディア系API
    • video/audio要素
    • Audio Processing API
    • API for MediaResource1.0
    • Web VTT
    • Web RTC
  • グラフィック系API
    • Canvas
    • SVG
  • パフォーマンス最適化系API
    • reuqestAnimationFrame
    • setImmediate
    • Page Visibility
    • Navigation Timing
    • User Timing
    • Resource TIming
    • Performance Timeline

本当にほぼすべてのマークアップやAPIが紹介され、その数がとても多いため、具体的な内容は是非講演資料や講演動画をご覧ください。

最後に

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

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

おすすめ記事

記事・ニュース一覧