8月17日，HTML5開発者コミュニティhtml5-developers-jp主催の「第9回 HTML5とか勉強会」が開催されました。本稿では，本勉強会の録画とともにレポートします。
今回は普段とは趣向を変え，前半には本勉強会スタッフが開発したHTML5によるデモアプリの紹介を，後半はLT大会ということで5名のスピーカーの方々にお話いただきました。
なお，本勉強会では初の，8月初旬に移転したばかりのGoogleの東京オフィス（六本木ヒルズ）をお借りさせていただきました（※1）。
- ※1
- HTML5関連のイベント（Tech-talkなど）では，旧オフィスを何度か利用させていただいております。
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ページにベクター画像を組み込むことが可能であり，そのデモもあわせて行われました。サイトはまだ非公開とのことですが，いずれ公開されるとのことですので楽しみに待ちたいと思います。
