【レビュー】ドラッグ＆ドロップでChromeからデスクトップへファイルをダウンロードする方法 | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【レビュー】

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

後藤大地　 [2010/08/30]

印刷

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以降で動作するこの機能はシンプルな方法でデスクトップとブラウザの操作をシームレスに統合するものとして興味深い。今後、ほかの主要ブラウザも同じ機能を実装する可能性が高い。