ブラウザにローカルファイルを Drag & Drop でフォトライフにアップロードする Greasemonkey Script

HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知った*1ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。

• http://gist.github.com/raw/406281/drag_drop_fotouploader.user.js

WinXP + Firefox 3.6.3 で確認してますが OSX や Chrome5 などの環境で動くかは試してないので解りません。動作デモは以下の swf 動画を見てください。

• http://rails2u.com/misc/fotolife_drag/

なんかすごい便利な…！今まで右クリック拡張でパスを取得していちいちフォームに入れてたのが、ドラッグするだけでいけて直感的に。
また Flash は一切使わずにアップロードしてます。フォトライフ側のAPIを無理矢理使った感じなので、png/jpeg しかアップロードできず、また Exif のカメラ機種名などは無視される制限があります。
参考にしたドキュメントですが、以下の MDC のを読めば十分な感じです。

• https://developer.mozilla.org/en/Using_files_from_web_applications

一応 progress イベントもとれるんですが、Flash のアップロードに比べていまいちイベントが発生しづらい感じはします。また POST + アップロードは xhr を生で触るとすごいやりにくいんですが、この辺はライブラリがたぶん解決してくれるようになるでしょう。File API 使った複数ファイルのアップローダライブラリとか出てきそうですね。
またすごい直感的に扱えるAPIなので、dropbox などのファイルクラウドサービスの Web インターフェイスにもどんどん適用されていきそうで楽しみです。なお Gmail ではすでに対応しており、添付ファイルをかんたんに追加できてびっくりしました。

• http://ajaxian.com/archives/drag-and-drop-file-uploads-in-gmail-using-just-the-specs

*1:http://gihyo.jp/dev/column/01/browser/chrome5 で知りました。なおこの記事すごいまとまっていてとても参考になりました。