MESHタグで取得した値を可視化&外部で利用できる形に(JSON形式)

#やりたい事
・MESHタグで取得した値をお手軽に可視化
・その値を外部で利用できる形(JSON形式)に
したいと思ったので、その2つのやり方ご紹介(自分用メモ的要素が大きいですが)

下図のようなグラフ化を簡単に作成し、定期的に更新されます
![14.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/03f001fd-f018-416d-b2aa-94582c8ef9e8.jpeg)


#HOW TO
定期的にMESHの値をIFTTTに送信して、それをGoogleスプレッドシートに書き込んでいき、その書きこまれた値をグラフ化して、書きこんでいる値をgoogle apps scriptでWEB API化して、JSON形式で取得

##MESHのレシピ
タイマーで1分おきに、温度をチェックしてその値をIFTTT側に送信しています
温度タグ：温度を確認するを選択し、パラメータを-10-50に設定
IFTTTタグ：イベントIDをmesh01(IFTTT側の設定に合わせる)、テキストをデータを選択からTemperatureを選択
![IMG_1655.PNG](https://qiita-image-store.s3.amazonaws.com/0/159447/4348f190-28be-e4e7-9f1b-891d45815683.png)

温度以外にも、動き・明るさ・湿度・GPIOのアナログ入力・マイクなどが送信できる
(いつの間にかUpdate?されてて、ちょっと感動。気付いていなかっただけの可能性もあり)
![IMG_1656.PNG](https://qiita-image-store.s3.amazonaws.com/0/159447/552e8cc4-ca15-1bfa-8250-807014d6cd3f.png)


##IFTTT側の設定
IFTTT側はMESHの値を受け取ったら、Googleスプレッドシートに新しく行を追加します
MESH：イベントIDをmesh01(MESH側と合わせる)
Google Drive:Add row to spreadsheetを選択し、ファイル名・新しく行に書き込むデータ(初期のまま)・フォルダパス等を入力
![ifttt.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/b0735487-5448-c615-ff07-2400ad6f50e5.jpeg)


##Googleスプレッドシート
作成されたファイルの一行目にtimeとtempを入力します(IFTTTからの値がすでに記入されていたら、行を追加してください。)
![02.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/e0a0fb4f-a0e5-73c2-8647-04cc5e1bba9d.jpeg)

B列全体を選択し、その状態から「挿入」→「グラフ」でグラフの種類を選んでください
![03.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/be97d74a-0d22-0063-b4bb-c42e329f6693.jpeg)

タイトルや縦横の軸に適当な名前を付ければ、簡単にMESHの値を可視化できます
![04.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/c9c0ecaf-7914-3843-1e50-f36ece4b3aa3.jpeg)

##外部で利用できる形に(JSON形式)
###「ファイル」→「ウェブに公開」を選択して公開
https\://docs.google.com/spreadsheets/d/**xxxxxxxxxxxxxxxxxxxxxxx**/pubhtml
ここのxxxxxxxxxxxxxxxxxxxxxxxの部分(id)とシート名(Googleスプレッドシート下部のタブにあるシートの名前)は後で使います
![09.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/79485da9-83e1-1682-5720-4a5582cc7083.jpeg)


###「ツール」→「スクリプトエディタ」を選択し、スクリプトを編集する画面へ
原因が分かっていませんが、ドライブから新規でgoogle apps scriptを作成して全く同じ事をやると、WEP APIがエラーで動かなかったので、
Googleスプレッドシートから作る事をお勧めします(原因分かる方いたら教えて頂けると嬉しいです)
![10.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/d04a186c-b300-5526-0729-0856db5a6110.jpeg)

###コードを書く
doGet関数の中の'xxxxxxxxxxxxxxxxxxxxxxx' の部分(id)と 'シート1'(sheetName) の部分は適切なものに変更してください
![05.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/30c0676e-904d-48b7-a8b7-ea5866c4a5d9.jpeg)

```js:json.gs
function getData(id, sheetName) {
  var sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {}
    row.map(function(item, index) {
      obj[keys[index]] = item;
    });
    return obj;
  });
}

function doGet() {
  var data = getData('xxxxxxxxxxxxxxxxxxxxxxx', 'シート1');
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}
```

###WEB APIとして公開
「公開」→「ウェブアプリケーションとして導入」を押して、各項目を設定
![06.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/8c37e186-9fe2-8520-375e-aad17f0bf107.jpeg)

![11.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/9c79b329-dcd0-7c47-2a82-aa161c987a92.jpeg)

問題がなければ公開され、「現在のウェブアプリケーションのURL」のリンクから下記のような結果が得られる
![12.jpg](https://qiita-image-store.s3.amazonaws.com/0/159447/7bdef468-6aea-d6de-e03e-8fe3a8b0edad.jpeg)

##まとめ
簡単にログが取れて可視化できるので楽しく、MESHの値を利用できるので出来る事の幅が広がりそう
これを使ってラピッドプロトタイプングのスピードをさらに高速化していきたい

##参考サイト
Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る
http://qiita.com/takatama/items/7aa1097aac453fff1d53