2011年12月26日，ソフトバンクさんの食堂をお借りし，24回目となる「HTML5とか勉強会」を開催しました。今回のテーマは「オムニバス⁠」⁠。2011年最後の勉強会ということでHTML5の総まとめと，2011年ブラウザに実装されたAPIについてやこのAPIを実際に使った話が講演されました。

本稿では，今回のイベントについてレポートします。

FileとWebの関係をもっと知るBlob, FileそしてFile System API

最初のセッションは，Googleの安田絹子さんにFile/File System APIについて講演いただきました。

File APIというのはウェブ上でローカルファイルを扱うAPIです。そして，その延長線上にあるのがFile System APIです。ここでは，File API: Directories and SystemsをFile System APIと呼んでいます。これらのAPIについて詳しく説明がありました。

冒頭，File APIの基本について説明が行われ，File APIとは以下の3つのオブジェクトで構成されるAPIと示しました。

Blob

バイナリデータを扱うオブジェクト

File

Blobのサブクラスのようなもの，ローカルファイルを扱うオブジェクト

FileReader

Fileを読むためのオブジェクト

これらを使うことでウェブ上でファイルを扱うことが可能になります。

この中で一番重要なのはBlobです（講演では「これだけでも覚えて帰ってください」と言及していました⁠）⁠。Blobが重要な理由は，バイナリデータを扱うための基本オブジェクトであることと，もう一つ大きな理由があります。それはBlob URLです。Blobデータへの参照をURLにすることができるのです。URLにすることでURLを扱うAPI，例えばimgタグやscriptタグのsrc属性やcanvasのdrawImage等に渡すことができて，簡単にBlobデータを使用することができるようになります。そのため，Blobの重要度，利便性を引き上げているとしました。

次に，File System APIについて説明がありました。

このAPIは，File APIのようにローカルファイルを扱うAPIですが，ファイルだけではなく木構造のディレクトリ構造を扱うことができるAPIで，読むだけでなく書くことも可能です。また，ユーザが指定した場所を読むわけではなく，ブラウザがウェブサイト固有のサンドボックス化されたファイルシステムを用意し，そこを自由に使うことができるという仕組みになっています。

File System APIは以下の3つのオブジェクトが主に利用されるオブジェクトです。

FileSystem

サンドボックス化されたファイルシステム空間

FileEntry

ファイルを表す

DirectorEntry

ディレクトリを表す

FileSystemを開いて，rootディレクトリを取得してから，ファイルの読み書きを行うというのが一連の流れになるとのこと。

File System APIについての話の後は，安田さんが作ったサンプルアプリを用いてデモが行われました。サンプルアプリはこちらに公開されています。

また，講演資料内には，APIを利用するためのコードもありますので，詳しくは講演資料をご覧ください。資料はこちらです。