Gmailのようなファイル添付UIのサンプルとドラッグアンドドロップの未来

Posted by & filed under いろいろ.

このエントリーをはてなブックマークに追加
Bookmark this on Digg

今年も残すところあと数十分となりました。今年のことは今年のうちに、という格言にしたがって、今年の5月くらいに書く予定だったブログ記事を書くことにします。およそ7ヶ月ですか。光陰矢のごとしとはよく言ったものです。

Gmailのようなファイル添付UIのサンプルとは、ファイルをブラウザにドラッグしてくるとドロップするための領域を表示するという挙動をするサンプルです。

弊社の製品ではGoogle Closure Libraryを利用しているので、ここでもClosure Libraryの力に頼ることにします。相変わらず流行る気配のないClosure Libraryですが、便利ですよ実際のところ。手軽ではありませんが。

さて、サンプルは https://gist.github.com/1544144 に置いておきます。

ポイントは、以下の4つです。

  1. ファイルがドラッグされたらドロップための領域（以下、DropZone）を表示する
    • listen すべきイベントは window に対する goog.events.EventType.DRAGENTER
  2. ファイルが DropZone にドロップされた、あるいはマウスポインタがウィンドウを外れたら DropZone を非表示にする
    • listen すべきイベントは window に対する goog.events.EventType.DRAGLEAVE
  3. ファイルがDropZoneにドロップされたら event オブジェクトからファイルが取得できるのでそれをハンドリングする
    • event.getBrowserEvent().dataTransfer.filesでファイルが取得できる
    • listen すべきイベントは goog.events.FileDropHandler.EventType.DROP
  4. 通常のファイル選択ダイアログからファイルが選択されたときに発火する goog.events.EventType.CHANGE も同様に listen する
    • このときも event.getBrowserEvent().dataTransfer.files でファイルが取得できる

ちょっとしたはまりポイントとして、2 は Firefox ではうまく動作しません。マウスポインタがウィンドウから外れたタイミングで goog.events.EventType.DRAGLEAVE が発火しないのです。そこで仕方なくタイマーをセットして、750 ms 時間が空いたら DropZone を非表示にするという処理を記述しています。これは Gmail がそのような挙動になっていたから真似をしました。ところが、久しぶりにGmailにアクセスしてみるとなんとFirefoxでもウィンドウを外れた直後にドロップ領域が消えるという挙動になっていました。いつの間に変わったんでしょう。というよりも、どう実装したのでしょう。これを調べるのは来年の抱負とします。あと、このサンプルではサーバーサイドにリクエストを投げるところまでは記述していないので、そこは適当に書いてください。

さて、ここまでは前フリです。この記事の本題は、果たしてドラッグアンドドロップという操作はこれからも生き残るのか、というものです。

スマートフォンやタブレットの普及にともないUIのデファクトスタンダードも変わりつつあります。その中のひとつに没入型UIがあります。要はアプリケーションのフルスクリーン化です。スマートフォンやタブレットは画面が狭いため1つのアプリケーションがすべての画面を専有する設計になっています。そしてその思想がパソコンのUIに流入してきています。

Mac OS は 10.7 (Lion) から標準的にフルスクリーンに対応しました。Windows も次期リリースの Windows 8 から Metro UI を採用し、フルスクリーンの UI を採用します。一方デスクトップ Linux で大きなシェアを持つ Ubuntu も Unity により没入型の UI を実現しました。

このように最近の OS はことごとくフルスクリーン化を推し進めています。そしてフルスクリーン化したアプリとドラッグアンドドロップは極めて相性が悪いです。よって、このままフルスクリーンが標準として広がっていくとドラッグアンドドロップという操作は忘れ去られてしまうかもしれません。

個人的には、ハードウェアの UI が変わらないのにソフトウェアの UI だけを変えても意味がないと思っています。もちろん汎用的に使える優れたソフトウェア UI はあると思いますが、スマートフォンやタブレットでうまくいったからといって、その UI をパソコンでマネしたところで使いやすいものにはならないでしょう（Mac の Launchpad を使いやすいと思っている人はいるのでしょうか）。

それでもフルスクリーン化を推し進めるというのなら、現在主流のファイルというインターフェイスを隠蔽した新しいUI体系を作る必要があると思います。それこそスマートフォンで実現されているように、ファイルを意識させることはなく、そこにはアプリとデータがあるだけで、あとはデータを受け渡すための仕組み（Android のインテントとか）があるというようなものです。触ったことがないのでわらかないのですが、Chrome OS はもうすでにそうなっているんでしょうか（Google Chrome がベースのままだとアプリが持っているデータの受け渡しができそうにありませんが）。とりあえず2012年リリースされるはずの Windows 8 がどのような形になるのかを楽しみにしておきます。

それでは、みなさま良いお年を。


関連文書:

  • 関連文書は見つからんがな

Comments are closed.