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

HTML5開発者コミュニティhtml5-developers-jpが主催し、毎月第3水曜日に開催されている「HTML5とか勉強会⁠⁠。6月16日に、第7回となる勉強会を開催しました。

会場は、目黒にあるOpera Sortwareの日本オフィスを提供いただきました。Operaさんのオフィスは頻繁に提供いただいており、今回で3回目。会場の雰囲気は非常にアットホームで、リラックスした雰囲気の中、今回も中身の濃い講演が 目白押しでした。

画像

「Google I/OでのHTML5関連アップデート」

5月19日~21日の会期でサンフランシスコで開催されたGoogle I/O。 こちらに出席されたtakorattaさんよりGoogle I/Oで発表されたHTML5関連のアップデートについて講演いただきました。

「2004年頃を境として、デスクトップアプリの分野では目立ったアプリケーションは登場しておらず、それに変わってSaaS, クラウドという言葉に代表されるWebアプリケーションが目覚ましいスピードで進展しています。更なるWebアプリケーションの進化に必要なプラットフォームとしてhtml5は登場し、 Googleは今後も積極的に貢献してゆく」といったイントロから、注目すべきトピックとして、フリーのビデオコーデックであるWebMや、Webアプリのマーケットプレースとして提供を予定しているChrome Web Store、また、ブラウザでの音声認識/合成について仔細を報告いただきました。

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

「メディアから見た HTML5」

Public keyの新野さんから、ご自身が連載企画でWeb関連企業や各種団体にインタビューををされた経験を もとに、それぞれの企業や団体の取り組み姿勢や、ご自身の感想を講演いただきました。

Google, Mozilla, Opera, LunaScape, Adobe, Microsoft, W3Cにインタビューを行い、各社・各団体がそれぞれのスタンスの中で オープンなWebに対して取り組んでいることを、とても分かりやすく紹介されました。それぞれの企業・団体がそれぞれの戦略/ビジネスモデルの中で HTML5に取り組んでおり、そのような背景を押さえた上で、動向を見て行くことが、今後の進展を図る上で重要である事を改めて感じました。

よく取りざたされるFlash vs. canvasの話にしても、AdobeはDreamweaverやIllustratorなどの開発ツールが事業の柱であり、実際これらの製品では、すでにHTML5への対応を進めています。このように考えると、AdobeはHTML5にコミットする主要企業であり、キャッチーな話題だけで見ることはできないといった話が特に印象的でした。

講演資料は、こちらで公開されています(本講演については、Ustreamのアーカイブはありません⁠⁠。

画像

「HTML5時代でもFlashとかを使い続ける漢達」

若狭さんより、HTML5がもてはやされているとはいえ、IE6などの既存環境に対応するためには、やはりFlashが当面は主導権を担って行くであろうという観点から、 講演をいただきました。

HTML+CSS+JavaScriptはすべてが個別のファイルで構成されており、サービス提供にあたりディレクトリ単位での公開や管理が必要となります。 これは、個々のファイルに対し煩雑な管理を行う必要があることを示しており、Webアプリがよりリッチになるにつれ、より顕著となります。一方、 Flashは最終的に一つのswfファイルにパッケージングされる形態をとっているため、バージョン管理が容易であり、また公開にあたっての人為的な ミスが発生する可能性が低いことなどを説明いただきました。

また、複数のjavascriptライブラリを組み合わせたときに、特に注意が必要であるグローバル変数名等の重複による誤動作への配慮が、Flashでは必要がないことを言及されていました。

最後に、FlashをiPhoneに対応させるための切り札(!)の、FlashをHTML5に変換するSmokescreenについてデモを交えて紹介いただきました。

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

「Audio Data API」

羽田野さんより、W3Cで検討が始まったばかりのAudio Data APIについて講演をいただきました。従来のHTML5のaudioでは、再生・停止などの 音楽の操作はできるものの、音楽データを取得して解析することや音楽データを生成することはできない仕様となっていました。したがって、よく見られるような 音楽再生にあわせて画像が変化するようエフェクトを用いたWebサービスを作ることは至難の業でした。

しかし、最近Mozillaが音声データの取得・解析や生成を可能にするAudio Data APIを提案し、実験的に実装を進めていることから、 それらの説明とデモを紹介いただきました。音楽再生時に、そのデータよりFFT(高速フーリエ変換)を行い、スペクトラム変化のエフェクトを表示するデモや、マウスのクリックに対応して音声データを生成し、さまざまな音色を奏でるデモを紹介されました。ユーザーのアクションに 同期して音が流れるのは、やはり気持ちのいいものです。

Audio Data APIは、まだ検討が始まったばかりであり、最近もAPIが変わり、従来のコードが動かなくなったなど、まだまだ未知数の部分も多い状況とのことでしたが、とても興味深いAPIであり、アプリケーション開発の幅を広げてくれるものだと感じました。

ソーシャルサービスを加速するWebSocket

最後に、筆者よりHTML5で双方向通信を実現するフレームである、WebSocketについて、デモを交えた概要・特徴説明と、NWエンジニアの観点から「WebSocketはどのようなモデルで捉えられるか?」について講演させていただきました。

httpでも、http streamingのテクニックを使うことで下り通信に特化したアプリケーションであれば、リアルタイムアプリケーションを開発すること が可能です。これを実現するAPIがServer-Sent Eventであり、このAPIを用い、twitterのstreaming apiにより取得したデータをリアルタイムに 表示するデモを紹介しました。

しかしながら、頻繁にブラウザからサーバーへの上り通信が発生するようなアプリケーションでは、やはりhttpでは限界があり、WebSocketがその状況を解決してくれることを、Google Mapsの操作に対するマウスジェスチャーを共有するデモを交え説明しました。

WebSocketがhttpの拡張として設計されていること、トラフィックを抑制できることなどの特徴を述べ、最後にNWエンジニアの観点から、 WebSocketはあたかも「ソーシャルNWをつなぐマルチキャストルーターのような役割をになうといったモデルで説明できるのでは?」という筆者の考察を述べさせていただきました。

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

最後に

筆者が管理しています、本勉強会のWebサイトのEvents in HTML5-jpで開催状況や、過去のアーカイブなどを公開しています。また、 html5-developers-jpでは活発な情報交換が行われており、各種イベント開催のアナウンスもしていますので、是非ご確認いただければ幸いです。

おすすめ記事

記事・ニュース一覧