html5関連APIのドラッグ&ドロップAPIとファイルAPI

2010.09.28


こんにちは。mashimonatorです。
記念すべき第1回目は、
ドラッグ&ドロップ(DnD)API と ファイルAPI を利用して、
ローカルPC上にある画像ファイルをブラウザにドラッグ&ドロップして
サイト上に表示する簡単なdemoを作成してみました。

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

DnD API

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

File API

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

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

jshcl

一覧へ