レポート

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

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

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を利用するためのコードもありますので,詳しくは講演資料をご覧ください。資料はこちらです。

著者プロフィール

井原雄太郎(いはらゆうたろう)

東京工科大学大学院,田胡研究室所属の修士2年。

「HTML5とか勉強会」のスタッフ,主に雑用とたまにレポート記事を担当。Web系男子を目指す1987年生まれ。

主に使う言語はJavaとJavaScript。

twitter:@yutaro_i

コメント

コメントの記入