2010年も早いもので12月。今年最後のHTML5とか勉強会は、ソフトバンク様のカフェテリアを提供いただき開催しました。本稿では、今回の勉強会のレポートをお届けします。

会場となったカフェテリアは、本当にスゴイの一言でした。カフェテリアというより、ラウンジという表現のほうがぴったりで、綺麗で広く、高層フロアのため汐留からの夜景も最高でした！　今年の最後を飾るに、これ以上はないといった雰囲気でした。また、ソフトバンク様には、場所だけでなくUstream用の機材や、おつまみ・ドリンクまで提供いただきました。厚く御礼を申し上げます。

ビールなどの飲食を楽しみつつ、リラックスした雰囲気の中、iPhone/iPad関連のセッションが2本とFile APIのセッションが1本、さらにWebSocket関連のLTを含め、合計4本の講演をいただきました。

「ニコニコ動画でのHTML5」

トップバッターは、ドワンゴの草野さん。HTML5関連仕様を利用し、ニコニコ動画iPadプレーヤーを実装した際の、経緯や詳細を講演いただきました。

ニコニコ動画といえば、コメントを流す機能（コメントレンダラというそうです⁠）⁠。この機能を、Canvas/CSS3/SVGでテストした結果、パフォーマンスなどの評価より、CSS3（DOM）で流す方式を採択されたそうです。

HTML5は目的ではなく手段。iPad対応を進めたら、結果的にHTML5対応になったとのこと。「⁠アプリインストールの手間を省きたい」「⁠ブログのエントリーから直接リンクをはりたい」そのようなコンセプトで検討を進めた結果、Webアプリでの実装にいきついたそうです。最も苦労したのは、パフォーマンス面で、Video要素で映像を流すと、それだけで80％のCPUを消費してしまうため、それ意外の機能（コメントレンダラなど）には20％のCPUしかさけない。そのような条件下の中、パフォーマンスチューニングだけで1ヶ月近くを費やしたそうです。HTML5関連機能としては、他に設定保存としてLocalStorageを、クロスドメインでXMLデータを受信するためにXML Http Request level2を利用していることが述べられました。

質疑の中では、Flashとの対比についても言及されました。HTML5関連仕様での実装はパフォーマンスに難があり、特にSVG（ベクトルグラフィック）では動作が重いため、Flash版プレーヤで実装されている機能を、泣く泣く外されたとのこと。また、DOMツリーの再構築コストも無視できず、Flashには現状かなわないとの見解を示されました。

講演資料は、こちらで公開されています。

「P2PライブShareCast - iPhone/iPadへの配信を実現」

2本目のセッションは、ビットメディアの高野さんより、iPhone/iPadを用いたP2Pライブ配信について講演いただきました。

P2Pでライブ配信を実現するクラウド型配信ソリューションのShareCast。ユーザー間でツリーを作り映像をリレーすることで、ライブ配信を行うプロダクトです。通常のライブストリーミングに比べ、圧倒的にサーバーコストを低減できるのがメリットであり、転送量ベースで課金されるようなクラウドモデルでは、そのコストを大幅に削減できることを強調されていました。

P2Pを実現するため、PCではJavaアプレットを用いストリーム映像のリレーを行い、iPhone/iPadでは受信のみを行う方式をとられたそうです。この際、HTTPライブストリーミングを活用されたとのことでした。HTTPライブストリーミングは、ライブ映像から細切れの映像ファイルを生成し、それらをプレイリストファイルを用い逐次再生する方式。従来の映像ダウンロード型のインフラストラクチャ（WebサーバーおよびHTML5のVideo要素）でニアリアルタイムのライブ配信を可能とするものです。

HTTPライブストリーミングのメリットとして、既存インフラで利用できるだけではなく、キャッチアップキャスティング（さかのぼり再生）が可能なことにも言及。見逃したところをさかのぼって確認できるのは便利な機能です。遅延時間にセンシティブなリアルタイムコミュニケーションに用いるのには適していませんが、放送型の配信であれば本方式は検討の価値があると感じました。

「File API:Writer, Directories and System」

3本目のセッションは、クックパッドの太田さんからFile APIについて講演いただきました。太田さんは、本勉強会のスタッフであるとともに、Google API Expert(Chrome Extensions)も務められています。

File APIに関しては、最近動きが活発です。File Readerと呼ばれる、ローカルファイルを読み取る機能は広く知られており、例えばGMailでのドラッグ＆ドロップによる添付ファイル機能に利用されています。最近それにプラスして、File API: Writer（書き込み機能）, File API: Direcrories and System（File Systemを操作するAPI）の仕様化および実装が進んでいます。これらのAPIを用いると、ローカルへテキストデータやバイナリーデータをファイル保存することが可能なるため、ウェブアプリとデスクトップアプリの垣根が、より一層解消されることが期待されます。こちらについて詳細を説明いただきました。

まず説明いただいたのは、バイナリーデータをJavascriptで扱うために登場した Typed Array。型付き配列（符合無し整数の配列を表すUint8Arrayなど）で、XML Http Request level2では、responseTypeに'arraybuffer'（最新のドラフトでは'blob'）を指定することで、TypedArrayでの読み込みが可能となるとのことです。また、サーバーから読み込んだデータのみならず、フォームから入力されたデータからも任意のBlob（Binary Large OBject）オブジェクトが生成可能であることが言及されました。

生成したBlobデータは、requestFileSystem()で生成したファイルシステムに保存可能。仮想的なルートディレクトリに対し、ディレクトリの生成や、ファイルの作成が以下のような記述で可能となるとのことです。

write.write(bb.getBlob('text/plain'));

本APIは、Chrome9以降で利用可能です。利用にあたっては、起動オプションとして、以下が必要となります。ご注意ください。

--unlimited-quota-for-files --allow-file-access-from-files

講演資料は、こちらで公開されています。

「WebSocketRemote for iOS」

最後に、本勉強会でスタッフを務めていらっしゃる、kanasanからiOSでのWebSocketに関するLTをいただきました。

Ajax並の使い勝手でCometが使えるのが、WebSocketのいいところ。その特徴を利用し開発された、VNCライクなアプリケーションを紹介いただきました。もともとはPCブラウザ版として作られていたものを、iOS4.2.1でWebSocketがサポートされたのに伴い、こちらにも対応したとのこと。iOS4.2.1リリースより僅か1日後には対応完了したそうです（こういったところに、プラットフォームごとにコードの再利用が容易であり、高い生産性が得られるWebの特徴が現れています⁠）⁠。

実装方式としては、JavaのRobotクラスを利用してキャプチャーした画面をbase64でテキストエンコードし、WebSocketでiPhone/iPadに送信。また、iPhone/iPadでのタップ動作を、同様にWebSocketでリモートサーバーにマウス動作として送信することで、リモートデスクトップとしての動作を実現されています。実際にiPhoneでリモートデスクトップ（Windows）を操作するデモを見せていただきましたが、非常にスムーズに動作することから、WebSocketの可能性を垣間見ることができました。

画面転送に際し、転送遅延の防止やマウスジェスチャーとのデータ多重化を行う上で、画像データの分割（チャンク）が重要です（これを行わないと、画面データの転送時に、マウスデータの転送がブロックされてしまうため、ユーザビリティが落ちてしまいます⁠）⁠。今回用いた系では8192バイトが最適なチャンクサイズであったとのことでした。

発表資料は、こちらで公開されています。

最後に

今年も残すところ僅かとなりました。あっという間の一年でしたが、HTML5関連では目覚しい進展がありました。一年前には「いったい、いつ使えるのか？」といわれていましたが、Progressive Enhancement（ブラウザのサポート状況に応じ最適なUXを提供する考え方）のもと、GMailやTwitterなどではFile APIやCSS3の利用が行われるなど、着実にその利用が進んでいます。スマートフォンでの進展はさらに目覚しいものがあります。jQuery MobileやSencha TouchなどCSS3を活用したリッチなフレームワークも登場し、その利用障壁もどんどん下がっています。また、私個人の話になりますが、WebSocket関連で年末に書籍も執筆させていただきました。HTML5の利用はより活発となり、さらに現実的なものとしてサービスに活用されていくでしょう。そのような流れの一助となれるよう、来年も勉強会を開催していく予定です。みなさん、良いお年を！

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter(@komasshu)までお気軽につぶやいていただければと思います。本勉強会は、毎月第3水曜日もしくは第3木曜日に開催していますので、興味を持たれた方は是非参加ください。開催のアナウンスはhtml5-developers-jpで行われますので、こちらをチェック願います。来月も開催予定です。お楽しみに。

なお、筆者が管理しています、こちらのサイト（Events in HTML5-jp）で開催状況や、過去のアーカイブなども公開しておりますので、是非ご活用いただければと思います。