Dropbox Chooser を使って、任意のファイルの Donwload URL を取得し、サーバーに保存する。

最近 Dropbox API（特に Dropbox Drop-ins Chooser）を使ったので、それに関して書いてみようと思う。
Dropbox Chooser のデモは下記のページで見ることができる。

https://www.dropbox.com/developers/dropins/chooser/js

「Choose from Dropbox」をクリックすると、ポップアップウィンドウが表示され、そこでは自分が Dropbox に同期しているファイルを見ることができる。

このウィンドウで選択したファイルは、Dropbox によって「強制的に公開状態」となり、そのダウンロードリンク（もしくはプレビューリンク）を JSON で呼び出し元に返す。

Dropbox Chooser を使ってやりたいこと

ユーザーが自分が利用している Web サイトに、ファイルをアップロードしたいとする。古典的な、でもよい。しかし、もっとオシャレな方法として、Dropbox に同期済みのファイル中から、選んだものをサーバーにアップロードできると素敵な感じがする。

やり方としては次の通り。

・Dropbox からのアップロードを受け付けるウェブアプリを作成しているとして、
そのウェブアプリのファイルアップロード画面を作成する。

↓

・ファイルアップロード画面に「Dropbox からアップロードする」みたいなリンクを作って、
そのリンクをクリックされた時に、Dropbox Chooser を起動。

↓

・Dropbox Chooser で選択されたファイルを、ファイルアップロード画面で受け取る
（具体的には、JavaScript 上で Chooser を呼び出すところで、選択されたファイルを受け取るコールバック関数を書くことができる）

↓

・コールバック関数で受け取ったダウンロードURLを、サーバーに送信する。

↓

・サーバーでは、ダウンロードURL からコンテンツを取得し、それを任意のストレージに保存する。

では、順番に方法をみてみよう。

Dropbox Developers で、Chooser を利用するための手続きを行う。

Dropbox Chooser を利用するには、登録が必要です。

https://www.dropbox.com/developers

画面左のサイドバーから「App Console」をクリック
画面右上の「Create App」をクリック
今回は「Drop-ins app」を選択。App name はなんでもよい
「App Console」→「Your apps」の一覧に、今作成したアプリが表示されているのでクリック
「App Key」は Dropbox の JS ライブラリを読みこむ時に必要になるので控えておく
それ以外は、特に設定必要なし

ファイルアップロード画面の作成

JavaScript から Dropbox Chooser を呼び出す必要がある。
例えば、あるリンクをクリックした時に Dropbox Chooser を起動させたい場合、次のようなコードを書くと良い。

// 【注意】コードの検証をしていないので、このサンプルがそのまま動くわけではありません。
// 擬似コード的なものとして受け取ってください。
//
// 詳しい方法は → https://www.dropbox.com/developers/dropins/chooser/js

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
  <a href="" onClick="javascript: launchChooser();">Launch Chooser</a>
</body>
<script>
function launchChooser() {
    var options = {
        // Called when a user selects an item in the Chooser.
        success: function(files) {
            // Chooser で選択されたデータが files に入ってきます
            console.log(files);
        },
        linkType: "direct",
        extensions: ['.pdf', '.doc', '.docx', '.txt', '.rtf'],
    };
    Dropbox.choose(options);
}
</script>
</html>

「Launch Chooser」というハイパーリンクがクリックされると、Dropbox Chooser が起動する。
ここで任意のファイルを選択すると、Chooser がウィンドウクローズし、上記の JavaScript で言うところの、launchChooser() の success() のコールバックに入ってくる。引数の files には、選択したファイルのメタ情報が入っている。

Chooser から受け取ったデータを、サーバーに送信する

サーバーに送信する方法は、仕様要件による。思いついたのは次の２パターン。

Chooser から受け取ったデータを、Ajax でサーバーに送信する。受け取ったサーバーで、即時にファイルの DL をしてもいいかもしれないし、セッションにメタデータを持っていおいて、後で処理するというのでもありかもしれない。
Chooser から受け取ったデータを、ファイルアップロード画面の HTML に埋め込む。input の hidden にセットして、submit されたときに、サーバー側でファイルダウンロード処理を実行する。

ちなみに私は、後者でやりました。

サーバーでDropbox のファイルを DL して、任意の場所に保存する。

Chooser は、選択したファイルの Download URL を返してくれる。文字通り、この URL を GET すると、ファイルがダウンロードされる。この Download URL は、ドキュメントによると、Chooser で選択されたから 4時間だけ有効になるらしい。

https://www.dropbox.com/developers/dropins/chooser/js

Link types
...
direct
links point directly to the contents of the file and are useful for downloading the file itself. Unlike preview links, however, they will expire after four hours, so make sure to download the contents of the file immediately after the file is chosen. Direct links also support CORS, which allows you to read the file information directly in the browser using client-side JavaScript.

Download URL がサーバーに送信されてくると思うので、そしたら、サーバー側でそれを DL して、任意のファイルとして保存すれば良い。php っぽく書くと、つぎのようになる。

// 【注意】コードの検証をしていないので、このサンプルがそのまま動くわけではありません。
// 擬似コード的なものとして受け取ってください。
//
// 詳しい方法は → https://www.dropbox.com/developers/dropins/chooser/js

$download_url = $_POST['download_url']; // ここに DL URL が入っていると仮定する

// コンテンツを取得
$bin = file_get_contents($download_url);

if ($bin) {
    // 任意の場所に保存
    $fp = fopen('hoge/piyo', 'ab');
    if ($fp) {
        if (flock($fp, LOCK_EX)) {
            fwrite($fp, $bin);
            flock($fp, LOCK_UN);
        }
        fclose($fp);
    }
}

本当は、エラー処理や、アップロードファイルが大きすぎるときのことも考慮しなければいけない。

考え方的には、概ねこのような感じでやることができる。
ご参考になれば幸いです。