レポート

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

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

「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で開催状況や,過去のアーカイブなども公開しておりますので,是非ご活用いただければと思います。

著者プロフィール

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

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

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