8月17日、HTML5開発者コミュニティhtml5-developers-jp主催の「第9回　HTML5とか勉強会」が開催されました。本稿では、本勉強会の録画とともにレポートします。

今回は普段とは趣向を変え、前半には本勉強会スタッフが開発したHTML5によるデモアプリの紹介を、後半はLT大会ということで5名のスピーカーの方々にお話いただきました。

なお、本勉強会では初の、8月初旬に移転したばかりのGoogleの東京オフィス（六本木ヒルズ）をお借りさせていただきました[1]⁠。

1週間日めくりお絵かき日記

最初に、スタッフの一條さんより、canvas API, localStorage, CSS3を活用した絵日記デモが紹介されました。

デモでは、canvasを用いフリーハンドで描いた絵日記をlocalStorageに保存し、日めくりで確認できることが示されました。canvasの装飾をCSSで表現したり、背景に画像を指定することで、下絵のトレーシングをしながら前衛的な絵日記が書ける（！）など、効果的にCSS3を活用したデモでした。

その後、開発にあたって感じたこと、苦労したことなどを詳しく語っていただきました。canvasで描いた画像をbase64でエンコードし、説明文などと共にlocalStorageに保存するにあたり、JSONオブジェクトを活用すると便利であるといった解説などがありました。筆者も普段このテクニックを使っていますが、非常に手軽かつ便利なものですので覚えておいて損はないかと思います。

最後に描き上げた絵日記をAudio APIとCSS3 transitionを組み合わせてスライドショー表示するデモが紹介され、大変楽しいプレゼンテーションとなりました。

プレゼン資料、絵日記のデモ、スライドショーがそれぞれ公開されていますので、興味のある方はご確認ください。なお、プレゼン含めChromeおよびSafari（Webkit系ブラウザ）のみ対応ですのでご注意ください。

WebSocketクッキング

続いて、筆者よりWebSocket を用いたコーディングの簡単な説明と、各種APIを組み合わせて開発した複数のデモを紹介させていただきしました。

イベントドリブン（マウスクリックなど）で通信を行うことができるようになったAjax。HTTPを柔軟に活用できるようになったという変化だけで（他の機能は従来のままで⁠）⁠、Webは一気にアプリケーションプラットフォームへと変革しました。そして、今やHTML5により、表現力の格段の向上とデータ管理機能の実装が進み、さらに通信機能についても従来の制限を緩和する各種の改善が図られています。Ajaxによって可視化されたアプリケーションプラットフォームとしてのWebが、本格的なプラットフォームへと進化していると捉えられます。このような観点から、簡単なチュートリアルとともに、各種APIとWebSocketを用いた自作のソーシャル系デモを紹介しました。

デモでは、キータイプをWebSocketで共有し、それに応じて画像が作られていくcanvasとの組み合わせや、鍵盤を共有し、参加者で合奏を行うAudio APIとの組み合わせを行いました（こちらについては、一條さんが作られたWebアプリをベースに開発させていただきました⁠）⁠。さらに、File APIとDrag & Drop API、そしてCSS3を組み合わせ、Dropした画像ファイルやURL情報からサムネイルをWebSocketで共有するデモを行いました。

比較的簡単なコーディングで、通常のWebアプリにWebSocketの機能を追加することができます。実際の開発にあたってはサーバーのセットアップが必要になるなど、多少ハードルは高いですが、興味のある方は是非試してみてください。

SVG convert to Raphael

次にLT大会に移りました。トップバッターは、外村（ほかむら）さん。SVGをRaphaelに変換するデモが行われました。

RaphaelはSVGに類似の形式で記述できるJavascriptライブラリで、Raphaelでコーディングすることにより、SVG対応のブラウザではSVGで描画を、非対応ブラウザ（即ちIE8以前）ではVMLで描画してくれる便利なライブラリです。

そのRaphaelのコードをSVGから生成するデモサイトが紹介されました。AdobeのIllustratorで描いた画像は簡単にSVGにエクスポートできるため、これをRaphaelに変換すれば、簡単にWebページにベクター画像を組み込むことが可能であり、そのデモもあわせて行われました。サイトはまだ非公開とのことですが、いずれ公開されるとのことですので楽しみに待ちたいと思います。

Behind the Geolocation

2番目のLTは、takorattaさん。ブラウザからユーザーの現在の緯度経度情報を取得するAPIのGeolocationについて講演を頂きました。

Geolocationは、もともとはGearsで検討が進められたものがHTML5の関連仕様に盛り込まれたもので、各種デバイスの機能を活用し、ユーザーの緯度経度情報を取得するものです。例えば、iPhoneやAndroidなどGPSを積んでいるデバイスであればその情報から、またラップトップPCであればWiFiアクセスポイントのMACアドレスから取得します。これらの取得方式は電波状況によっては取得困難ですので、最終的にはIPアドレスから取得するのですが、これを用いた場合、その精度は極端に悪くなります（とても現在地とは言えないケースが殆ど⁠）⁠。

そのような状況で、いかに精度の高い場所情報を取得するかについて、最近のトレンドも併せて紹介頂きました。ユーザーが普段入力する場所情報も活用して現在地を類推する検討も行われているとのことで、大変興味深く感じられました（発表資料はこちら⁠）⁠。

Twitter Streaming over WebSocket

3番目のLTは、遠藤さん。TwitterのStreaming APIで取得したつぶやきをWebSocketを用い、ブラウザ上に表示するデモが紹介されました。

TwitterのStreaming APIはHTTP Streaming（HTTPのコネクションを開いたまま、データをPUSH型で流し続ける）のテクニックを使い、public timelineなどを取得するAPIです。通常のGET型のAPIとは異なり、定期的にポーリングをかけなくてもtweetを取得できますし、twitterの障害時に通常のAPIが落ちていても、このAPIでは取得できることが良く見られますので非常に便利なAPIです。

ただし、このAPIは（XML HTTP Request level2に対応していないため）Javascriptからはコールすることはできません。そこで、WebSocketサーバーがproxyとなる形で、このAPIをリレーしてブラウザにtwitterのタイムラインをリアルタイム表示する方法がデモを通して説明されました。TLが流れて行く様子が視覚的にわかりやすく、また取得状況をグラフ表示してくれるなど、大変興味深い内容でした（発表資料はこちら⁠）⁠。

WebSRT

4番目のLTは、ダニエルさん。Videoに字幕を追加するAPIのWebSRTが紹介されました。

WebSRTはSubRipのフォーマットを利用し、Videoに字幕などの情報を追加するAPIで、現状サポートしているブラウザはありません。しかしながら、このAPIをエミュレートするJavascriptが公開されているとのことで、こちらを用いダニエルさん自身が話をされているビデオ（英語）に日本語の字幕を入れるデモが行われました(詳しくはこちら⁠）⁠。

WebSRTにより、アクセシビリティがあがるのはもちろん、テキスト情報により検索エンジンから認識可能となるためSEOとしてのメリットやテキスト連動で、他の情報とのマッシュアップを行いやすくなるなどの様々なメリットを非常に分かりやすく説明いただきました。

Java VM on HTML5

最後に小林さんより、HTML5で実装したブラウザ上で動くJava VMについて講演をいただきました。最初にタイトルを見た際「まさか」と思ったのですが、Java VMを見事にjavascriptでエミュレーションしたもので、まさに驚愕のLTでした。

開発されたのは、auやSofrBankの携帯でアプリを作成する際に用いるJAVAの規格であるMIDPをJavascriptでエミュレートしたものです。この上では、MIDPで開発したjavaのクラスファイルをJavascriptに変換したもの（バイトコードをそのまま変換しているイメージ）が動作するとのことで、実際に携帯のゲームアプリをブラウザ上で動かすデモが行われました。

描画にはcanvasを用い、またVMのマルチスレッドをエミュレートするためにsetTimeoutを駆使しているとのことでした。HTML5でスレッドというとWebWorkerが思いつくところですが、WebWorkerはデータ共有のIFが遅いため、この用途では利用が困難であるとのことでした。

なお、このエミュレータはiPhone4およびAndroid2.2であれば動作するとのことで、最後にAndroidでMIDPのアプリを動かすデモが行われました（発表資料はこちら⁠）⁠。

最後に

本勉強会は、毎月第3水曜日に開催しています。開催のアナウンスはhtml5-developers-jpで告知されますので、興味のある方はチェックしていただければ幸いです。来月も開催予定です。お楽しみに。

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