Document
Everything about obniz

Lesson: Dropbox

センサーの値をdropboxに保存

How it works

Dropboxはファイルを簡単にネットに上げておいて複数のPCで同期ができるサービスです。 Dropbox提供のsdkがあるので、javascriptから簡単に自分のDropboxにファイルを上げたり ファイルを読み取ったりすることが出来ます。 これを使えばobnizで取得した温度センサーの値をDropboxに保存したり、 カメラとボタンをつないで撮った写真をDropboxに上げるオンラインカメラなどが簡単に作れます。

Use external Javascript

DropboxのsdkはjavascriptのファイルとしてDropboxから提供されています。 その中身を自分のhtmlにコピー&ペーストしても良いのですが、 htmlには外部のjavascriptを読み込んでくれる機能があるのでそれを使ってみます。

Dropboxのsdkは https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js で配布されています。 これを読み込んで使えるようにするにはhtmlに

<script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>

このようなタグをタグを書けばそれだけでこのファイルをロードして使えるようにしてくれます。 このタグを書く場所は使いたい場所よりも前であれば大丈夫です。 例えば、obnizから使いたい場合はobnizを使う<script>があるよりも前ならobnizの部分で使えます。 つまり、これならOKです

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.3.0/obniz.js"></script>
  <script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    // use dropbox here
  }
</script>
</body>
</html>

これはNGです。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    // NG. (~_~
    // you can't use dropbox here
  }
</script>
  <script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</body>
</html>

Use dropbox api

「ボタンを押されたら押された時間をDropboxに保存する」 というのをやってみます。 まずは、ボタンをobnizの0,1に接続し、押されたのが分かるようにしてみましょう。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
  <script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");

  obniz.onconnect = async function () {
    var button = obniz.wired("Button",  {signal:0, gnd:1});
    button.onchange = function(pressed){
      if (pressed) {
        // when pressed 
      }
    };
  }
</script>
</body>
</html>

これで、ボタンが押された時にif(pressed)の部分が実行されます。 では、ここで押された時に時間をdropboxに入れてみましょう。

dropbox SDKの使い方は http://dropbox.github.io/dropbox-sdk-js/ に書いてあります。が、まずはあなたのdropboxを読み書きするための鍵を取得しないといけません。

Generate AccessToken

アクセストークンが必要になりますので、dropboxで発行します。 dropboxにログインし、AppConsoleを開きます https://www.dropbox.com/developers/apps すると CreateAppというボタンがありますので、それを押してアプリを作成します。

作成するときに聞かれるのは

  • APIの種類。BusinessでなくDropboxAPIの方を選びます。
  • 読み書き権限はAppフォルダ限定かフルアクセスか。今回はAppフォルダ限定にします。

この2点で、あとは名前で、それは自由です。 出来たら作成します。

作成できるとさっき作ったアプリの管理画面になります。 この中でGenerated access tokenというところで「Generate」というボタンがあると思います。 これを押すと長いアルファベットのaccessTokenが生成されます。 この文字が鍵です。 これを使うことでdropboxAPIからあなたのDropboxのAppフォルダにあるファイルを読み書きできます。

Code it

早速プログラムしてみましょう。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
  <script src="https://unpkg.com/dropbox@4.0.3/dist/Dropbox-sdk.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Hello</h1>
<div id="text"></div>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");

  obniz.onconnect = async function () {
    var dbx = new Dropbox.Dropbox({ accessToken: '<YOUR ACCESS TOKEN HERE>' });
    var button = obniz.wired("Button",  {signal:0, gnd:1});
    button.onchange = function(pressed){
      if (pressed) {
      dbx.filesUpload({path: '/obniz.txt', contents: "[Button Pressed]\n" + new Date(), mode: 'overwrite' })
        .catch(function(error) {
          alert(error);
        });
      }
    };
  }
</script>
</body>
</html>

このプログラムのOBNIZ_ID_HEREを自分のobnizidに、

をさっき取得したDropboxのアクセストークンにします。 そして実行し、obnizの0,1に繋いだボタンを押すと自分のDropboxに Dropbox>アプリ>アプリ名>obniz.txt というファイルが作られて、時刻が記録されます。

プログラムの中で

dbx.filesUpload({path: '/obniz.txt', contents: "[Button Pressed]\n" + new Date(), mode: 'overwrite' })

の部分がファイルアップロードになります。 dbxというのが自分のアクセストークンを使って生成したdropboxのsdkです。 pathでファイル名をcontentsで中身を、modeで上書きであることを指定しています。

とっても簡単ですよね。 これ以外にもファイルの読み込みや、ファイル一覧の取得などたくさんのことが出来ます。 何が出来るかはdropboxのsdkドキュメントにあります。

http://dropbox.github.io/dropbox-sdk-js/Dropbox.html

または、exampleが用意されていますので、それを見るのもおすすめです。

https://github.com/dropbox/dropbox-sdk-js/tree/master/examples/javascript


Feel free to leave a comment