ちょっと未来

ちょっと未来を感じさせるガジェットやアプリ、そして作ったものについて書きます

【所要時間1時間】JavaScript+Dropbox APIで、ブラウザで動くクラウドメモ帳を作ってみる

この前はiPhoneアプリからDropbox連携をやってみましたが、
続いてJavaScript版のDropbox APIを使って、ブラウザアプリを作ってみたいと思います。

ファイル自体はDropboxに置いておいて、クラウドメモ帳みたいなのが作れます。
自分でサーバを持たなくてよかったり、ユーザアカウント管理とかがDropboxに任せされるのがいいですね。

今回は簡単なクラウドメモ帳を作ってみたいと思います。

f:id:wasan:20140322071731j:plain

[1]Dropboxアカウント登録

デベロッパサイトでアプリを登録します。 アプリの登録までの手順はこちらを参考に(http://takahi5.hatenablog.com/entry/2014/03/20/070333)

さらに今回はブラウザからのアクセスなので、OAuth後のリダイレクトURLの設定が必要になります。
URLはhttpsである必要があります。私の場合ロリポップssl認証サーバを用意していくれていたので、それを使いました。 localhostに限ってはhttpでもOKです。

本番用のhttps://lolipop...と開発用のhttp://localhost...を登録しました。

f:id:wasan:20140321090142p:plain

[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がやってくれるので楽ですね。

f:id:wasan:20140321091206p:plain

ボタンを押すとファイル書き込みが成功したとのこと。

f:id:wasan:20140321064448p:plain

実際にDropboxのフォルダを見に行ってみます。
デベロッパーサイトで登録したアプリ名のフォルダが自動的に作られています。
そしてそのフォルダの中に、、、hello.txtが保存されてますね!

f:id:wasan:20140321091418p:plain

[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();
        }
    });
}

適当なファイル名と中身を入力して、実行してみます。
ファイルが保存されたようです。

f:id:wasan:20140321092532p:plain

Dropbox上にもちゃんと保存されています!
中身もちゃんと入ってますね。

f:id:wasan:20140321092652p:plain

ファイル一覧の取得

次に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つのファイルが入ってます!

f:id:wasan:20140321102606p:plain

ファイルの中身を取得する

次にプルダウンで選択したファイルの中身を取得して、
フォームに表示します。

ファイルの取得は

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);
    }
}

さて実行してみます。
プルダウンからファイルを選ぶと、、、
お、先ほど入力した中身が表示されました!

f:id:wasan:20140321103347p:plain

いつのまにかメモ帳できてた!

あれ、気がつけば、、、

これSaveって押したら保存されるから、、、

メモ帳ができてました!

f:id:wasan:20140321104057p:plain

テキストを変更してSaveを押すとDropbox上で更新されてますね。

意外と簡単でした♪
Dropbox API素晴らしい!感謝!

最後に完成したソースコードをこちらに置いておきます。
https://gist.github.com/takahi5/9697318