Tech Sketch Bucket of Technical Chips by TIS Inc.

FileAPIを利用して簡単なWebアプリをつくる

Pocket

HTML5の周辺技術のFileAPIを使ってblobURLを利用してどのようなことが出来るか、簡単なWebアプリケーションを作成して少しばかり触ってみました。

FileAPI

FileAPIはWebアプリケーションでローカルにあるファイルにアクセスするためのAPIです。 お堅い仕様は W3Cでまとめられていて 広い意味ではHTML5界隈の仕様のひとつです。 解説記事は割とあるのですが、実際どのようなことが出来るのか自作したサンプルを参照しつつ挙動を見てみます。

動作環境

手元で確認した環境は以下の通りです。

  • Chrome 26.0.1410.40 beta-m
  • Firefox 19.0.2

モダンブラウザなら動くと思われます。
逆にIE9では動かないことを確認しました。

FileAPIに関する対応状況は こちらのサイトで把握できそうです。

今回の記事で見ていくもの

W3Cに記載されている仕様のAbstractを見ると以下のような要素が取り上げられています。

  • FileList
  • Blob
  • File
  • FileReader
  • URI scheme

これらの5項目について何が出来るのかサンプルを参照しつつ見ていきます。

サンプルの実装内容

実際に動くサンプルはこちら

サンプルは以下のような機能を実装しました。

  • FileAPIを通して読み込んだファイル一覧を表示
    • ファイルの読み込み方法
      • 一般的なファイル選択のダイアログで選択する方法
      • デスクトップなどからドラッグ&ドロップする方法
  • ファイル一覧から選択したファイルのプレビュー
    • 画像のプレビュー
    • 画像以外のプレビュー
      • どんなファイルもUTF-8のテキストとしてブラウザで表示

ブラウザにファイル読み込みさせるのに抵抗があるかもしれませんが、tech-sketch.jpに読み込んだデータを送信しているなどの送信機能は実装していないので、適当なファイルを読み込ませてみてください。

サンプルコード

javascriptのサンプルコードは以下。

ここからW3Cの仕様のAbstractに記載されている5つの項目について実装と対応させつつ見ていきます。

FileList

FileListは読み込む対象のファイルの一覧になるようです。
コード内の(1)あたりでFileListを取得しています。
サンプル内ではブラウザ内へのファイルのドロップやInput type="file"のonChangeイベントから読み込むファイルを取得しています。 W3C で記載されているFileListのInterfaceにあるように、ファイルの数とファイル自体の取得が可能です。

capture_29032013_114837.png

画面左のファイル一覧

Blob

BlobはRawデータとファイルサイズとMIMEタイプが取得できます。 サンプル内では(2)の辺りでMIMEタイプをみて画像かどうかを判定しています。

File

filelist.item(i)で取得したitemがFileに相当します。FileはBlobを継承しています。
ファイル名と最終更新日時が取得できます。
サンプル内では(3)の辺りでファイル名の取得に利用しています。(9行目)

FileReader

FileReaderはBlobのデータを読みこむものです。
サンプルないでは(4)の辺りでUTF-8のテキストとして読み込んだものをプレビューしてます。
FileReaderで読み込んだデータに対して自前で高度なパーサを用意したりすることで様々な応用が可能になるはずです。

capture_29032013_114906.png

テキストファイルのプレビュー

URI scheme

FileAPIを通して読み込んだBlobやFileに開いたブラウザ上でのみ有効な一意なURLを与えることができます。
今回のサンプルでは読み込んだ画像にBlob URIを発行しています。
Blob URIは通常のimg要素のsrc属性やa要素のhref属性など通常URLを設定するところに設定可能です。
capture_29032013_114911.png

読み込んだ画像のプレビュー

サンプル内の(5)の辺りの、URL.createObjectURLで作られるURIがBlob URIがです。
画像のプレビュー&画像のリンク先で利用してます。
リンクするとこんな感じのURLになります。(ブラウザ依存)

blob:8275bf18-2c79-425b-b10a-6e9bcb1c2638
blob:http%3A//localhost/2ab8cc92-7623-471e-aa73-3be65ffe8c62

capture_29032013_114914.png

bloburlを直接開いた場合

大まかに言えば仕様上はblob:で始まるユニークな文字列っぽいです。
当然このリンクは開いたブラウザ内でのみ有効でBlob URIを明示的に無効化するか、作ったwindowが閉じられることで無効化するようです。

厳密なところはW3Cの仕様を読んで下さい。

FileAPIここまで

と、いうわけでFileAPIについてサンプルつくりつつ触ってみました。

今回作ったサンプルは読み込んだデータをそのまま出すだけなので面白みは今ひとつかも知れませんが、高度なライブラリを利用するとFileAPIで読み込んだファイルをブラウザ上でzip圧縮展開したりするようなものもあります。
FileAPIによってWebアプリとネイティブアプリの垣根がさらに下がってきており、HTML5界隈の発展する方向はちゃんとウォッチしないといけませんね。

参考

W3C FileAPI

エンジニア採用中!私たちと一緒に働いてみませんか?