Dropboxで提供されているDrop-insのSaverを使って、
ファイルをDropboxへアップロードする処理を実装します。
下準備は前回の記事を参照してください。
まずは、Dropboxのアプリを作ります。
開発用トップ画面のメニューから『App Console』を選択します。
自分の作ったアプリの一覧画面が表示されます。
始めての人は『You haven’t created any apps.』というメッセージが表示されています。
アプリを作成するには画面右上の『Create app』を押します。
『Drop-ins app』か『Dropbox API app』かを選ぶ画面になります。
今回は、『Drop-ins app』を選びます。
アプリの名前を入力します。
これはどうやら世界でたったひとつの名前にしないといけないようで、
『Test』みたいな簡単な名前だとエラーになります。
これは重ならないだろう！という名前を入力し右下の『Create app』ボタンを押します。
後からの変更は可能なのであまり悩まずに。
無事アプリの登録が完了すると下記画面が表示されます。
ウェブでアクセスする場合は『Drop-ins domains』に使いたいサイトのURLを入力します。
この『taak.biz』の場合は下記のようになります。
以上で設定が完了です。
続いて、ウェブサイト側の修正です。
わかりやすいように空のHTMLから作ってみます。
<!DOCTYPE html> <html lang="ja"> <head> <title>Dropbox Test</title> </head> <body> <h1>Dropbox Test</h1> </body> </html>
ブラウザで表示するとこんな感じ。
開発画面の左側のメニューからDrop-ins⇒Saverを選択します。
赤枠部分、先程作成したアプリであることを確認します。
Embled codeに記述されているスクリプトをHTMLに張り付けます。
<!DOCTYPE html> <html lang="ja"> <head> <title>Dropbox Test</title> </head> <body> <h1>Dropbox Test</h1> <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="*****"></script> </body> </html>
まだ見た目は何も変わりません。
続いてボタンを設置します。
<a href="ファイル名" class="dropbox-saver"></a>
ファイル名には既にネット上に存在しているファイル名を記述します。
たとえばDropboxのロゴファイルをアップしようと思ったら、
<a href="https://cf.dropboxstatic.com/static/images/icons/blue_dropbox_glyph-vflJ8-C5d.png" class="dropbox-saver"></a>
こんな感じ。
これをHTMLに追加します。
<!DOCTYPE html> <html lang="ja"> <head> <title>Dropbox Test</title> </head> <body> <h1>Dropbox Test</h1> <a href="https://cf.dropboxstatic.com/static/images/icons/blue_dropbox_glyph-vflJ8-C5d.png" class="dropbox-saver"></a> <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="*****"></script> </body> </html>
ボタンが出た！！
早速押してみるとポップアップが表示。
aタグに設定したファイル名が表示されています。
『保存』をポチっと。
できたっぽい。
Dropboxを確認。
無事アップロードされました！
Drop-insのsaverは、
あくまでもネット上に既に存在している必要があるっぽい。
ローカルのファイルをアップロードしたい場合は、
別の処理を作るかAPIを使う必要があるらしいので、
その方法はまたいずれ！
