[HTML5と関連API] ドラッグ＆ドロップAPIとファイルAPIを使用したサンプル

ドラッグ＆ドロップ（DnD）API とファイルAPI を利用して、ローカルPC上にある画像ファイルをブラウザの特定領域にドロップすると、その内容をサイト上に表示する簡単なdemoを作成してみた。

DEMO

2010年10月時点で、Firefox3.6、Chrome6.0にて動作確認

DnD API

ドラッグ＆ドロップという操作自体は、JavaScript を駆使することで既に Webアプリケーション上で実現されているが、あくまで擬似的に実現しているに過ぎず、よりデスクトップアプリケーションに近い UI を提供するには限界があると思われる。そのため、HTML5 では、ドラッグ＆ドロップに特化したイベントや API を新たに仕様として規定している。

File API

また、ドラッグ＆ドロップAPI と深く関連する API としてファイルAPI がある。ファイルAPI を使用することで、ファイルのメタ情報の取得はもちろん、ファイルの中身へアクセスすることや、ファイルロードの進捗状況を表示することが可能となる。（FileReaderインタフェース）

これらのAPIを使用することで、ローカルPC（デスクトップ）上にあるファイルと Webアプリケーションとの連携をよりユーザブルに提供することが可能となる（Webアプリケーションを、あたかもデスクトップアプリケーションであるかのように使用できるようになる）。個人的には、アプリケーションとしてのWebの可能性を大きく広げることができる仕様として期待している。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/152