ドラッグ＆ドロップでChromeからデスクトップへファイルをダウンロードする方法

The CSS Ninja is a personal blog and playground where I can put my skills and ideas out into the public.

5以降のバージョンのChromeを使っているのであれば、Gmailにおけるファイルのアップロードやダウンロードは、デスクトップ間でのドラッグ&ドロップで操作できる。こうした機能を実現するには、これまではエクステンションやプラグインのインストールが必要だった。ChromeではJavaScriptとHTMLのみでこうした機能を実現できる。

もっとも最近Gmailに追加された機能はドラッグ&ドロップによるファイルのダウンロードだ。Gmailで閲覧しているメールの添付ファイルは、Chrome 5以降であればドラッグ&ドロップでダウンロードできる。どのようなコードでこの処理を実現しているのかがDrag out files like Gmail - The CSS Ninjaで詳しく紹介されている。わかりやすいサンプルとデモが公開されており参考になる。Drag out files like Gmailで公開されているサンプルを参考に、さらに内容をシンプルにしたHTMLとその実行結果を次に掲載する。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>File Drag-out Demo</title>
</head>
<body>
  <a id="paper" href="http://www.cl.cam.ac.uk/research/security/capsicum/papers/2010usenix-security-capsicum-website.pdf">FreeBSD Capsicum 論文 (PDF)</a>
  <script type="text/javascript">
    document.getElementById("paper").addEventListener(
      "dragstart",
      function(e) {
        e.dataTransfer.setData("DownloadURL",
          "application/pdf:2010usenix-security-capsicum-website.pdf:http://www.cl.cam.ac.uk/research/security/capsicum/papers/2010usenix-security-capsicum-website.pdf");
      },
      false);
  </script>
</body>
</html>


ドロップアウト用に用意したサンプル	リンクをつかんでデスクトップへドラッグ&ドロップ中


Chrome 7開発版が自動的にダウンロードを開始	デスクトップにダウンロードしたPDFが表示される

ドラッグ&ドロップでファイルのダウンロードを実現する機能はJavaScriptで実装されている。対象となるa要素のオブジェクトを取得したら、"dragstart"というイベントに対してリスナを追加する。リスナではdataTransfer.setData()をコールし、"DownloadURL"に対して"データの種類:ファイル名:URL"を設定している。処理はこれだけだ。あとはブラウザが処理を実施してくれる。

ブラウザとデスクトップ間のシームレスな統合はこれまで何度も試みられてきた。Chrome 5以降で動作するこの機能はシンプルな方法でデスクトップとブラウザの操作をシームレスに統合するものとして興味深い。今後、ほかの主要ブラウザも同じ機能を実装する可能性が高い。