IE10で動くHTML5アプリ実装例
「File APIを利用したアプリ」

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介（1）

　本連載は、「Developers Summit 2012」（デブサミ2012）において、2月16日に行われた日本マイクロソフト株式会社 春日井 良隆氏によるセッション「次期Internet Explorer、IE10とHTML5 API」（セッション資料はこちら）をもとに、Internet Explorer 10の新機能やHTML5 APIとの関連について、3回に分けて特集します。第1回目の今回は、File APIを利用したアプリ作成の方法について解説していきます。

はじめに

　HTML5とそれに関連するAPIの普及により、「Webのアプリケーションプラットフォーム化」への流れが大きく進んでいます。

　Internet Explorer 10（以下、IE10）では、そうしたHTML5と関連APIの数多くがサポートされています。今回の記事では、IE10が新たにサポートするFile APIを中心に解説していきます。

　File APIとは、今までJavaScriptが直接扱うことが出来なかったローカルファイルに対して、読み取り操作を実現可能にするものです。また、今後の展開としてローカルファイルの書き込みや保存、さらにはWebアプリに専用のファイルシステムをサポートするAPIも、W3Cで標準化作業が進行中です。

※注意

　書き込みについてはFile API: Writerで、ファイルシステムについてはFile API: Directories and Systemという仕様が対応しています。

　余談ですが、IE10ではFile APIだけではなく「BlobBuilder」という、File API: Writerに関する一部の機能もサポートされています。こちらのトピックについては、「BlobBuilder を使ってファイルを作成する」という記事に詳しく解説があります。

　今回は、File APIを解説するための題材として、「MOGUTARO eats files!」というデモンストレーションを取り上げます。このデモはIE Test Drive向けに我々が開発したもので、2012年2月16日に開催されたDevelopers Summit 2012においても、「次期Internet Explorer、IE10とHTML5 API」というセッションで紹介されました。

デモの説明

　このデモンストレーションは、ファイルを任意の要素(くじらの口)にドラッグ＆ドロップすることでファイルを読み込むことができ、そのファイル形式によって異なる様々な動作をします。

　対象となるファイル形式と動作は以下の４つです。

• テキストファイル：1行ごとにテキストファイルを読み上げる
• 画像ファイル：画像の色を解析をして虹を表示後、canvas上に表示する
• 動画ファイル：動画再生する
• 音楽ファイル：音楽再生する

　このデモンストレーションのソースコードは、こちらからダウンロードすることができます。

※注意

　以下、掲載するコードはjQueryを利用しています。アニメーションについてはTween.jsをというJavaScriptライブラリを利用していますが本記事ではこちらについての説明は割愛します。