ブラウザにローカルファイルを Drag & Drop でフォトライフにアップロードする Greasemonkey Script
HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知った*1ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。
WinXP + Firefox 3.6.3 で確認してますが OSX や Chrome5 などの環境で動くかは試してないので解りません。動作デモは以下の swf 動画を見てください。
なんかすごい便利な…！今まで右クリック拡張でパスを取得していちいちフォームに入れてたのが、ドラッグするだけでいけて直感的に。
また Flash は一切使わずにアップロードしてます。フォトライフ側のAPIを無理矢理使った感じなので、png/jpeg しかアップロードできず、また Exif のカメラ機種名などは無視される制限があります。
参考にしたドキュメントですが、以下の MDC のを読めば十分な感じです。
一応 progress イベントもとれるんですが、Flash のアップロードに比べていまいちイベントが発生しづらい感じはします。また POST + アップロードは xhr を生で触るとすごいやりにくいんですが、この辺はライブラリがたぶん解決してくれるようになるでしょう。File API 使った複数ファイルのアップローダライブラリとか出てきそうですね。
またすごい直感的に扱えるAPIなので、dropbox などのファイルクラウドサービスの Web インターフェイスにもどんどん適用されていきそうで楽しみです。なお Gmail ではすでに対応しており、添付ファイルをかんたんに追加できてびっくりしました。
*1:http://gihyo.jp/dev/column/01/browser/chrome5 で知りました。なおこの記事すごいまとまっていてとても参考になりました。
