【所要時間1時間】JavaScript+Dropbox APIで、ブラウザで動くクラウドメモ帳を作ってみる
この前はiPhoneアプリからDropbox連携をやってみましたが、
続いてJavaScript版のDropbox APIを使って、ブラウザアプリを作ってみたいと思います。
ファイル自体はDropboxに置いておいて、クラウドメモ帳みたいなのが作れます。
自分でサーバを持たなくてよかったり、ユーザアカウント管理とかがDropboxに任せされるのがいいですね。
今回は簡単なクラウドメモ帳を作ってみたいと思います。
[1]Dropboxアカウント登録
デベロッパサイトでアプリを登録します。 アプリの登録までの手順はこちらを参考に(http://takahi5.hatenablog.com/entry/2014/03/20/070333)
さらに今回はブラウザからのアクセスなので、OAuth後のリダイレクトURLの設定が必要になります。
URLはhttpsである必要があります。私の場合ロリポップがssl認証サーバを用意していくれていたので、それを使いました。
localhostに限ってはhttpでもOKです。
本番用のhttps://lolipop...と開発用のhttp://localhost...を登録しました。
[2]認証〜ファイルアップロードまで
続いてアカウント認証とファイルのアップロードをやってみます。
認証はOAuthでやりますが、ややこしいことはAPIがやってくれます。
サンプルコード
以下がサンプルコードです。
YOUR_APP_KEYのところには、先ほどでデベロッパーサイトで入手したものを入れます。
ボタンを押すとhello.txtというファイルを作ってDropboxに保存します。
<!doctype html> <html> <head> <script src="https://www.dropbox.com/static/api/dropbox-datastores-1.0-latest.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <center> <button id="writeButton">Click to create <code>hello.txt</code> in Dropbox.</button> </center> <script> // ※デベロッパーサイトで入手したAPP KEY var client = new Dropbox.Client({ key: 'YOUR_APP_KEY' }); // AOuth認証を実行 client.authenticate({ interactive: false }, function (error) { if (error) { alert('Error: ' + error); } else { console.log("authorized successfully"); } }); // Dropboxにファイル書き込み function doWriteFile() { client.writeFile('hello.txt', 'Hello, World!', function (error) { if (error) { alert('Error: ' + error); } else { alert('File written successfully!'); } }); } // ボタンが押された時の処理 document.getElementById('writeButton').onclick = function () { client.authenticate(function (error, client) { if (error) { alert('Error: ' + error); } else { doWriteFile(); } }); } </script> </body> </html>
サンプルを実行してみる
初回はDropboxの認証画面が表示されます。
認証は全部APIがやってくれるので楽ですね。
ボタンを押すとファイル書き込みが成功したとのこと。
実際にDropboxのフォルダを見に行ってみます。
デベロッパーサイトで登録したアプリ名のフォルダが自動的に作られています。
そしてそのフォルダの中に、、、hello.txtが保存されてますね!
[3]クラウドメモ帳を作ってみる
ファイルの新規作成&保存
前回のコードをいじってファイルの新規作成と保存をします。
- html部分
前回のファイルのHTMLに、フォームを追加します。
<form name="form"> FileName:<input id="titleText" type="text" size="30" maxlength="20"> <br> <textarea id="contentText" rows="4" cols="40"></textarea><br> </form> <button id="saveButton">Save</button>
- JavaScript部分
前回のファイルに以下のコードを追加します。
ファイル名と中身をフォームから取得します。
// Dropboxにファイル書き込み function saveFile() { console.log("saving.."); var title = document.getElementById("titleText").value; var content = document.getElementById("contentText").value; if(!title.length || !content.length){ alert('title or content is empty.'); } console.log("saveFile",title, content); client.writeFile(title, content, function (error) { if (error) { alert('Error: ' + error); } else { alert('File written successfully!'); } }); } // ボタンが押された時の処理 document.getElementById('saveButton').onclick = function () { client.authenticate(function (error, client) { if (error) { alert('Error: ' + error); } else { saveFile(); } }); }
適当なファイル名と中身を入力して、実行してみます。
ファイルが保存されたようです。
Dropbox上にもちゃんと保存されています!
中身もちゃんと入ってますね。
ファイル一覧の取得
次にDropbox上のファイル一覧を取得します。
HTMLに、ファイル名を挿入していくSELECT要素を追加します。
- html部分
<form name="form"> FileList:<select id="fileSelect"> <option value="">=== Select File ===</option> </select><br> FileName:<input id="titleText" type="text" size="30" maxlength="20"> <br> <textarea id="contentText" rows="4" cols="40"></textarea><br> </form>
次にJavaScriptでファイル一覧を取得する処理です。
ファイル一覧の取得
XMLHttpRequest readdir(path, options, callback)
を使います。
以下のメソッドを追加して、それを認証後に呼ぶようにします。
// Dropboxのファイル一覧取得 function getFileList() { client.readdir('/', { deleted: false }, function(error, files, stats){ if(error){ alert('Error: ' + error); } else { var elmFileSelect = document.getElementById("fileSelect"); console.log("readdir success", files, stats); // Dropbox内のファイル名がfiles配列に入ってきます for (var i = 0; i < files.length; i++){ // selectボックスに挿入 elmFileSelect.options[i + 1] = new Option(files[i], i); } } }); }
上記のメソッドを認証後に呼びます。
// AOuth認証を実行 client.authenticate({ interactive: false }, function (error) { if (error) { alert('Error: ' + error); } else { console.log("authorized successfully"); getFileList(); // ※ここ追加! } });
さて、実行してみます。
ページを開いたら自動的にファイル一覧を取得するはず。
プルダウンを開くと、、、さっき作成した2つのファイルが入ってます!
ファイルの中身を取得する
次にプルダウンで選択したファイルの中身を取得して、
フォームに表示します。
ファイルの取得は
XMLHttpRequest readFile(path, options, callback)
を使います。
JavaScriptに以下のコードを追加します。
指定したpathのファイルをDropboxから取得するメソッドを、
プルダウンが選択されたときに呼んでいます。
// Dropbox内の特定のファイルを取得する function readFile(path) { client.readFile(path, {}, function(error, stat, rangeInfo){ if(error){ console.log("readFile error", error); } else { console.log("readFile success", stat, rangeInfo); document.getElementById("titleText").value = path; document.getElementById("contentText").value = stat; } }); } // プルダウンを選択した時の処理 document.getElementById('fileSelect').onchange = function () { var elmFileSelect = document.getElementById("fileSelect"); var index = elmFileSelect.selectedIndex; if (index != 0){ var fileName = elmFileSelect.options[index].label; readFile(fileName); } }
さて実行してみます。
プルダウンからファイルを選ぶと、、、
お、先ほど入力した中身が表示されました!
いつのまにかメモ帳できてた!
あれ、気がつけば、、、
これSaveって押したら保存されるから、、、
メモ帳ができてました!
テキストを変更してSaveを押すとDropbox上で更新されてますね。
意外と簡単でした♪
Dropbox API素晴らしい!感謝!
最後に完成したソースコードをこちらに置いておきます。
https://gist.github.com/takahi5/9697318