【第24回 HTML5とか勉強会レポート】 108もあるぞ！ HTML5の要素数：D89クリップ（36）

現在、HTML5の要素数は108ある。その中から、注目のAPI、FileSystem API、Web Audio API、Geolocation APIができることをチェックしよう！

» 2012年01月18日 00時00分公開

FileSystem API、Web Audio API、Geolocation API

　2011年12月26日、ソフトバンクモバイルで「第24回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会です。今回は特定のテーマに沿った形式ではなくオムニバス形式で、主にエンジニア向けのセッションでした。

　セッションではいくつかのサンプルが紹介されました。サンプルの動作確認はGoogle Chrome 16で行っています。Google Chrome以外では動作しないものもありますのでご注意ください。

FileとWebの関係：Blob、FileそしてFileSystem API

　最初はGoogleの安田さん（@kinu）の「FileとWebの関係をもっと知る：Blob、FileそしてFileSystem API」というセッションでした。安田さんは主にChromeの File/FileSystem API、Quota APIの開発などを行っています。セッション資料、サンプルコード、セッション動画は公開されています。

　File APIの基本的な概念としてBlobとFileがあります。BlobはWebでバイナリデータを扱う場合、最も重要なオブジェクトになります。FileはBlobを継承するサブクラスのようなもので、Blobの一種です。ファイルも、ブラウザ内のデータもBlobとして扱えます。

　Blobの強力な点として、URLを付けられることが挙げられます。URLを扱うすべてのAPIや、要素のインプットとして利用できます。例えばBlobの画像データをCanvasに貼ったり、img要素のsrc属性に指定できます。またBlobBuilderを利用すると、複数のBlobや文字列から新しいBlobを作れます。

　FileSystem APIは、File APIと同様にローカルファイルを扱うAPIですが、以下の違いがあります。

木構造のディレクトリ構造を扱える
Webアプリケーションからも書き込み可能（FileWriter）
ただし、Webサイトごとに固有ファイル空間を持つSandboxファイルシステム
ファイルやディレクトリごとにFileSystem URLがあり、それを使ってアクセスできる

　FileSystem APIが扱えるファイル空間は、Webサイトごとの固有ファイル空間になります。そのためローカルのネイティブファイル空間のファイルを勝手に読み込んだり、書き込んだりすることはできません。この関係は、セッション資料の17ページで分かりやすく図示されています。

FileとWebの関係をもっと知る：Blob、FileそしてFileSystemAPI

　FileSystem APIは基本的に非同期なAPIとなり、すべてのメソッドはsuccessCallbakとerrorCallbackのコールバック関数を取ります。基本的なオブジェクトは3つあります。FileSystemはWebサイトごとの固有ファイル空間を表します。FileEntryはファイルを表します。DirectoryEntryはディレクトリを表します。

　FileEntryのfileメソッドでBlobを取得でき、toURLメソッドでURLを取得できます。またFileWriterを利用することでBlobを書き込めます。

　デモでは、ユーザーのローカルディスクにある写真を加工し、加工したデータを保存できるアプリケーションが紹介されました。アプリケーションのソースコードは以下で公開されています。

kinu/fileapi-sample - GitHub

　Webサイトごとの固有ファイル空間のファイルを確認したり、削除する場合には、Chrome ExtensionのPeepholeが便利です。

はじめてのWeb Audio API

　Googleの北村さん（@agektmr）の「はじめてのWeb Audio API」というセッションでした。セッション資料、セッション動画は公開されています。

　Web Audio APIとAudioタグ、Audio Data APIの違いが説明されました。Audioタグは既存の音声ファイルの再生や、長めの音声の再生に適しています。Audio Data APIはAudioタグの拡張として、音声を編集したり、音声を生成できます。

　それに対しWeb Audio APIは音声の再生だけでなく、音声を生成したり、短い音声を正確なタイミングで再生することに適しています。またモジュールをつなぎ合わせることでさまざまな編集ができ、よく利用されるエフェクトをネイティブ機能として持っています。このような特徴からWeb Audio APIはゲームの効果音やオーディオ編集などの用途に向いています。

　Web Audio APIは複数のモジュールから構成されます。主なインターフェイスはAudioContext、AudioBuffer、AudioNode、AudioParamの4つになります。その中のAudioContextはすべての基礎となるコンテキストで時間の管理機能などを持ち、AudioNodeはほぼすべてのモジュールの基となるインターフェイスです。

　AudioNodeにはさまざまな種類があり、音量を調節するGain、音声を遅らせて再生するDelay、汎用のフィルター機能を提供するBiquad Filter、音の解析を行うRealtime Analyserなどがあります。

　AudioContextを生成し、オーディオファイルを読み込み、さまざまなノードを接続することで音声にエフェクトを掛けます。

Audio Experiment

　デモでは、オーディオファイルをドラッグアンドドロップで読み込み、その音声に対してさまざまなエフェクトを掛けるアプリケーションが紹介されました。チェックボックスをONにするとエフェクトが有効になり、スライダーでパラメータを調整できます。

GoogleFesの舞台裏とか

　次はチームラボの栗原さんの「GoogleFesの舞台裏とか」というセッションでした。栗原さんはチームラボのUIチームで、JavaScript専門のエンジニアです。セッション資料、セッション動画は公開されています。

　GoogleFes!はGoogle Developer Day 2011 Japanで詳細されたWebアプリケーションです。GoogleFes!にはPCが楽器になる楽器アプリと、ネットワーク経由で楽器アプリの情報を集めて表示するステージアプリの2つがあります。楽器アプリはモーションセンサに対応したデバイスの場合、デバイスを振ることによって音が出ます。対応していないデバイスでは画像をクリックすることで音を鳴らせます。

　インフラとしてAmazon Web Servicesが、サーバサイドではnode.jsとnginxが利用されています。HTML5に関連する技術としてはWebSocket、Web Audio API、Audio Tagが利用され、アニメーション処理にはPaper.jsが利用されています。

　開発では問題が発生し、それをどのように解決していったのか説明がありました。特にパフォーマンスについてはかなり工夫がされていました。

Web Audio APIを使って音声の事前ロードを行い楽器の反応速度を向上させたそうです。またアニメーション処理ではタイマーを使い回すことで、オブジェクトごとのタイマーが増え過ぎないようにしていました。

　GoogleFes!はサーバからフロントエンドまで、すべてJavaScriptで実装されています。Google ChromeのJavaScriptの処理速度は高速で、Web Audio APIの精度が高かったということです。