Dropboxのウェブアクセスに挑戦!②Drop-ins – Saver

Dropboxで提供されているDrop-insのSaverを使って、

ファイルをDropboxへアップロードする処理を実装します。

下準備は前回の記事を参照してください。

まずは、Dropboxのアプリを作ります。

開発用トップ画面のメニューから『App Console』を選択します。

dropbox_develop2

 

自分の作ったアプリの一覧画面が表示されます。

始めての人は『You haven’t created any apps.』というメッセージが表示されています。

dropbox_develop3

アプリを作成するには画面右上の『Create app』を押します。

dropbox_develop4

 

『Drop-ins app』か『Dropbox API app』かを選ぶ画面になります。

今回は、『Drop-ins app』を選びます。

dropbox_develop6

アプリの名前を入力します。

これはどうやら世界でたったひとつの名前にしないといけないようで、

『Test』みたいな簡単な名前だとエラーになります。

これは重ならないだろう!という名前を入力し右下の『Create app』ボタンを押します。

後からの変更は可能なのであまり悩まずに。

無事アプリの登録が完了すると下記画面が表示されます。

dropbox_develop8

 

ウェブでアクセスする場合は『Drop-ins domains』に使いたいサイトのURLを入力します。

この『taak.biz』の場合は下記のようになります。

dropbox_develop9

以上で設定が完了です。

続いて、ウェブサイト側の修正です。

わかりやすいように空のHTMLから作ってみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Dropbox Test</title>
</head>
<body>
<h1>Dropbox Test</h1>
</body>
</html>

ブラウザで表示するとこんな感じ。

dropbox_develop12

開発画面の左側のメニューからDrop-ins⇒Saverを選択します。

dropbox_develop10

赤枠部分、先程作成したアプリであることを確認します。

dropbox_develop11-e14266406

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>

dropbox_develop13

ボタンが出た!!

早速押してみるとポップアップが表示。

dropbox_develop14

 

aタグに設定したファイル名が表示されています。

『保存』をポチっと。

dropbox_develop15

 

できたっぽい。

Dropboxを確認。

dropbox_develop16

 

無事アップロードされました!

Drop-insのsaverは、

あくまでもネット上に既に存在している必要があるっぽい。

ローカルのファイルをアップロードしたい場合は、

別の処理を作るかAPIを使う必要があるらしいので、

その方法はまたいずれ!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です