レポート

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

この記事を読むのに必要な時間:およそ 3 分

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

著者プロフィール

小松健作(こまつけんさく)

NTTコミュニケーションズ 先端IPアーキテクチャセンタ リサーチエンジニア。元々はネットワークエンジニアだったが,Ajaxの登場以来,今後のサービスはWeb(Javascript)を中心に回ると確信。その魅力にとりつかれる。WebSocketに衝撃を受け,リアルタイムWebの到来を信じ,html5の世界に足を踏み出した。 「html5とか勉強会」のスタッフをつとめる。好きな言語は,JavascriptとRuby。

Blog:http://blog.livedoor.jp/kotesaki/
Twitter:@komasshu

コメント

コメントの記入