HTML5 Rocks

HTML5 Rocks

HTML5 機能

ファイル アクセス

HTML5 では、バイナリ データやユーザーのローカル ファイル システムと連携動作する強力な API が提供されています。File API を使用すると、同期/非同期でのファイルの読み取り、任意の Blob の作成、一時的な場所へのファイルの書き込み、ファイル ディレクトリの再帰的な読み取り、デスクトップからブラウザへのファイルのドラッグ&ドロップ、バイナリ データのアップロードなど、XMLHttpRequest2 を使用するさまざまな機能をウェブ アプリケーションに追加することができます。

たとえば、File API を使用すると、サーバー送信時に画像のサムネイル プレビューを作成したり、ユーザーのオフライン時にアプリでファイル参照を保存したりすることができます。Web Audio API(リンク先は英語)を使用すると、アプリで .mp3 ファイルを読み取り、再生中にその曲を視覚化して表示することができます。さらに、クライアントサイド ロジックを使用して、アップロード ファイルの mimetype と拡張子を照合したり、アップロードのサイズを制限したりすることもできます。

新機能

デモ

HTML5 Demos: Drag files from the desktop to the browser

活用例

GMail
MugTug Darkroom

リソース

  • W3C Spec: File この W3C 仕様では、FileFileListFileReaderBlob といった File API を定義しています。
  • W3C Spec: FileSystem APIs この W3C 仕様では FileSystem API を定義しています。FileSystem API は、サンドボックス化されたファイル システムに対してファイルやディレクトリの読み取り/書き込みを行うためのインターフェースを提供します。
  • W3C Spec: FileWriter この W3C 仕様では FileWriter API を定義しています。FileWriter API は、ウェブ アプリケーションからファイルに書き込みを行うためのインターフェースを提供します。
  • W3C Spec: ProgressEvents この W3C 仕様では、ファイル読み取りの進行状況について非同期更新を行う ProgressEvent を定義しています。
  • WHATWG Spec: Drag and Drop この whatwg の仕様では、ネイティブ HTML5 ドラッグ&ドロップ API を定義しています。
  • Mozilla Hacks: Interactive file uploads ドラッグ&ドロップ、File API、XMLHttpRequest を使用したファイルのアップロードについてのチュートリアルです。
  • MDC: Drag Operations ドラッグ&ドロップ API で使用できる各種ドラッグ操作オプションについての資料です
  • HTML5 Doctor: Native Drag and Drop HTML5 のネイティブ ドラッグ&ドロップの使用方法についての記事です。デスクトップからファイルをドラッグ&ドロップする方法を紹介します。