リビングの環境監視ダッシュボードを６０分で作る方法（Nature Remo Cloud APIとGoogleサービス連携）

# はじめに
アレクサで、古い家電を操作する目的で購入した[Nature Remo](https://nature.global/)。
センサーがとても秀逸だったので、部屋のモニタリングする仕組みを作ってみました。
部屋の環境が一目でわかるようになり、色々活用できそうです。

[Nature Remo Cloud API](https://developer.nature.global/)を利用して、Googleのサービスで作ってみました。
[GAS（GoogleAppsScript）](https://www.google.com/search?biw=1440&bih=770&ei=9plXXO-3Lon08gWh_IHYBQ&q=Google+Apps+Script&oq=Google+Apps+Script&gs_l=psy-ab.12...0.0..675...0.0..0.0.0.......0......gws-wiz.PLOu1S94-O8)で[Googleスプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/#start)にデータを頂いて、[Googleデータポータル](https://support.google.com/datastudio/answer/6283323?hl=ja&ref_topic=6267740)にまとめてみました。これでサーバーレスかつセキュアなクラウド型環境監視ダッシュボードが完成しました。
とりあえず、トリガーで１時間ごとに自動更新することにしました。
<img width="665" alt="kankyoukanshiimg1.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/be8343de-0737-d90c-fafc-ca9536e74495.jpeg">
**Nature Remo、Googleスプレッドシート、Googleデータポータルの順を現した写真**

## 今回のゴール
Googleデータポータルでリビングの照度、温度、湿度を監視。
1時間おきのログを目視的に確認できるようにする。
![kankyoukanshi.PNG](https://qiita-image-store.s3.amazonaws.com/0/349931/e9c782f5-9ea8-5af1-9990-e3d042c7a8c4.png)





##  必要なもの
### Nature Remo
> https://nature.global/
Nature Remo（ネイチャーリモ）は、お使いの家電をインターネットに繋げることで、手軽にスマートホームを実現するスマートリモコンです。

持ってない人は購入してくださいね。
[Nature Remo](https://nature.global/)
今回の説明は、Nature Remoセットアップ完了後を想定して説明します。

### Googleアカウント
持っていない人は作成してください。
###　https://support.google.com/accounts/answer/27441?hl=ja
##  NatureRemoのアクセストークンを発行する
###　https://home.nature.global/
↑URLからログイン
<img width="332" alt="kankyoukanshiimg20.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/cfd7f114-0e27-b069-cff8-c7f11964f0f7.jpeg">

###  Googleアカウントでログイン
<img width="492" alt="kankyoukanshiimg21.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e4767321-5e8c-85d8-6c23-fe5349c54f53.jpeg">

###  Remoへのアクセスをリクエストする
Remoへのリクエストを許可します。
<img width="256" alt="kankyoukanshiimg22.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/2e93f7d6-18ee-b0e8-a360-298a04f07321.jpeg">

<img width="361" alt="kankyoukanshiimg23.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/5f493fb3-1aa3-9908-0add-2ec80df392fc.jpeg">


###  アクセストークンの生成
アクセストークンの生成をクリックします。
<img width="350" alt="kankyoukanshiimg24.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/3b9a4cf2-33bf-8563-b31c-ca2f47d9d492.jpeg">
コピーします。
<img width="253" alt="kankyoukanshiimg25.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7718000c-1ca2-1c91-7e28-a04bf301b90d.jpeg">
アクセストークンはとても大切なので、公開することのないように、厳重に管理してください。
この後、このトークンを使用しますので、適切に保存してください。


##  Googleスプレッドシート作成
###  https://docs.google.com/spreadsheets/u/0/
↑URLから作成できます。
<img width="527" alt="kankyoukanshiimg30.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7b7590b7-2707-1a68-7bf7-05e54d32423b.jpeg">

Googleスプレッドシートが開きます。
<img width="400" alt="kankyoukanshiimg31.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9b26db2c-8e5d-1fae-b024-3769982f4831.jpeg">

###  シート作成
<img width="486" alt="kankyoukanshiimg32.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/05a6aea2-ae5a-485d-58ed-e79cc66304fa.jpeg">
スプレッドシート名は任意でOKです。
A1に日時、B1に温度、C1に
度、D1に照度、E1に日時（補正）を入力して表題部分を作成します。
<img width="358" alt="kankyoukanshiimg33.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/93294cfe-5605-e036-1a4b-44043c6654cd.jpeg">
シート名を**log**に変更しておきます。

##  GASでNatureRemo Cloud APIを呼び出す
GASって何？
簡単に言うと、Googleが開発した軽量アプリケーション開発用のスクリプト言語です。
[Google Apps Script 入門](https://qiita.com/t_imagawa/items/47fc130a419b9be0b447)

###  GASを作成
シートのツール、スクリプトエディタの順にクリックします。
<img width="648" alt="kankyoukanshiimg42.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a116f9cd-6828-2be2-451c-aae76bc28c03.jpeg">
すると、GASのスクリプトエディタが起動します。
<img width="386" alt="kankyoukanshiimg36.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a39d05d6-ac88-c645-cb87-f73d1852cec9.jpeg">
次のソースコードを入力します。

### ソースコード
```js
var access_token = '***************'//←トークンを入れる
var spreadsheetId = '*****************'//←スプレッドシートのIDを入れる
function remo() {
  var data = getNatureRemoData();　　　　//data取得
  var lastData = getLastData();　　　　　//最終date取得
  setLaremoData(
  {
    te:data[0].newest_events.te.val,　　//温度
    hu:data[0].newest_events.hu.val,　　//湿度
    il:data[0].newest_events.il.val,　　//照度
  },
  lastData.row + 1//最終data追加作業
  );
}
 
function getNatureRemoData() {　　　　　　//Remoのapiをお借りします
  var url = "https://api.nature.global/1/devices";
  var headers = {
    "Content-Type" : "application/json;",
    'Authorization': 'Bearer ' + access_token,
  };
 
  var postData = {
 
  };
 
  var options = {





    "method" : "get",
    "headers" : headers,
  };
 
  var data = JSON.parse(UrlFetchApp.fetch(url, options));
  Logger.log(data[0].newest_events)
  Logger.log(data[0].newest_events.te.val)
  Logger.log(data[0].newest_events.hu.val)
  Logger.log(data[0].newest_events.il.val)
 
  return data;
  
}
 
function getLastData() {
  var datas = SpreadsheetApp.openById(spreadsheetId).getSheetByName('log').getDataRange().getValues()　　//logシートをゲットする
  var data = datas[datas.length - 1]
 
  return {
    totalpoint:data[1],
    coupon:data[2],
    row:datas.length,
  }
}
 
function setLaremoData(data, row) {
  SpreadsheetApp.openById(spreadsheetId).getSheetByName('log').getRange(row, 1).setValue(new Date())//A2にゲットした日時ほりこむ
  SpreadsheetApp.openById(spreadsheetId).getSheetByName('log').getRange(row, 2).setValue(data.te)　　//B2に温度追加
  SpreadsheetApp.openById(spreadsheetId).getSheetByName('log').getRange(row, 3).setValue(data.hu)　　//C2湿度追加(幅があるけど気にしない)
  SpreadsheetApp.openById(spreadsheetId).getSheetByName('log').getRange(row, 4).setValue(data.il)　　//D2照度追加
}
```

※remoの機種によってセンサーの内容が異なります。 mini対応分もコード貼っておきます。（温度のみ）
```js
/**
 * アクセストークンとスプレッドシートのIDを設定
 */
const ACCESS_TOKEN = '**********'; // アクセストークンをここに設定
const SPREADSHEET_ID = '**********'; // スプレッドシートのIDをここに設定

/**
 * Nature Remoのデータを取得してスプレッドシートに記録するメイン関数
 */
function updateRemoDataToSheet() {
  try {
    const data = fetchNatureRemoData(); // Nature Remoデータを取得
    if (!data || data.length === 0) throw new Error('No data returned from Nature Remo.');

    const sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName('log');
    if (!sheet) throw new Error('Sheet "log" not found.');

    const rowData = buildRowData(data[0]);
    appendRowDataToSheet(rowData, sheet);
    Logger.log('Data updated successfully.');
  } catch (error) {
    Logger.log(`Error: ${error.message}`);
  }
}

/**
 * Nature RemoのAPIからデータを取得
 * @return {Object[]} データ配列
 */
function fetchNatureRemoData() {
  const url = 'https://api.nature.global/1/devices';
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${ACCESS_TOKEN}`,
  };
  const options = {
    'method': 'get',
    'headers': headers,
  };

  const response = UrlFetchApp.fetch(url, options);
  return JSON.parse(response.getContentText());
}

/**
 * 取得したデータからスプレッドシートに追加する行データを構築
 * @param {Object} deviceData Nature Remoデバイスデータ
 * @return {Object} 行データ
 */
function buildRowData(deviceData) {
  return {
    timestamp: new Date(),
    temperature: deviceData.newest_events.te?.val || 'データなし',
    humidity: deviceData.newest_events.hu?.val || 'データなし',
    illumination: deviceData.newest_events.il?.val || 'データなし',
  };
}

/**
 * 構築した行データをスプレッドシートに追加
 * @param {Object} rowData 行データ
 * @param {GoogleAppsScript.Spreadsheet.Sheet} sheet スプレッドシート
 */
function appendRowDataToSheet(rowData, sheet) {
  sheet.appendRow([rowData.timestamp, rowData.temperature, rowData.humidity, rowData.illumination]);
}

```

よくわかんないや！ってかたは、とにかくソースコードを貼り付けます。
貼り付ける時は最初入っているコードごと上書きしてください。
<img width="652" alt="kankyoukanshiimg36.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7c496656-d8a2-5513-feac-769750754b33.jpeg">

こんな感じになると思います
<img width="486" alt="kankyoukanshiimg37.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/c2f1cc98-d74d-474f-835f-00b64e4e565c.jpeg">

任意の名前を付けます。
<img width="638" alt="kankyoukanshiimg38.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/af3c9761-54e6-e239-dc7e-7d1ac63719b3.jpeg">
ちなみに今回は**リビング環境監視**にしてみました。


###  NatureRemoのアクセストークンを指定する
初めに取得したアクセストークン（大切なやつ）をaccess_token = 'から後の***マークの部分に貼り付けます。
<img width="570" alt="kankyoukanshiimg39.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/9a5acdee-acf9-935d-0b98-1a79e9ae25b7.jpeg">


###  スプレッドシートのIDを指定する
続いて今回作成したスプレッドシートのIDをspreadsheetID = 'から後の***マーク部分に貼り付けます。
※スプレッドシートのIDって何よ！？って人は、一つ下を参考にしてください。
<img width="575" alt="kankyoukanshiimg40.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/77996723-f80c-f6a3-565b-70d15f96e4b7.jpeg">

####  スプレッドシートのID確認方法
今、スクリプトエディタが開いている場合は、タブでスプレッドシートを開いてURLを確認してください。
<img width="642" alt="kankyoukanshiimg41.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/559bcc87-510e-1911-565f-79124b983cba.jpeg">

###  GASを実行
ついに準備が整いました。
今、画面にスプレッドシートを開いている場合はスクリプトエディタを再度開いてください
エディタの上の方に三角の再生ボタンがありますよね。
いきなり実行してみてください
<img width="581" alt="kankyoukanshiimg42.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/dc2fcc06-b1cc-b8f3-96ee-f4edc6494644.jpeg">

※2020/09/06追加
当初大丈夫だったのですが、現在は**関数を選択**で、remoを選択しておかないとエラーになるみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/9d2c6926-4a62-3a13-eb48-48184d6b7229.png)


###  承認
すると、承認が必要です画面がポップアップされるので、許可を確認をクリックします。
<img width="419" alt="kankyoukanshiimg43.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a6f5d75f-984f-7a0f-ca02-17eaefc0eb1d.jpeg">

アカウントを選択します。
<img width="620" alt="kankyoukanshiimg44.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d8b1a159-70cd-841c-526f-9dd3ca94e418.jpeg">

このアプリは確認されていません
当然今作っているので確認されてたらおかしいのですが、とりあえず**詳細**を選択。
<img width="486" alt="kankyoukanshiimg45.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/0b551ee0-e916-7492-fb87-5a9a7c57e43f.jpeg">

つづいてリビング環境監視（安全ではないページ）に移動を選択。
<img width="681" alt="kankyoukanshiimg47.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/dfc9e789-e655-d5f1-e45e-3a2f617135a3.jpeg">

アカウントへのアクセスを許可
許可を選択します。
<img width="243" alt="kankyoukanshiimg48.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d1055547-e065-e36a-6256-7c1d0d3b4c6c.jpeg">
これで実行されたかと思います。
確認してみましょう。

###  スプレッドシートを確認
表題の下に数値が入っているでしょうか？
入っていれば、APIの呼び出しに成功です。
<img width="587" alt="kankyoukanshiimg49.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/cc782f3f-3a03-92f5-53ab-61adad85f77f.jpeg">

日時（補正）が気になりますよね。
生データだと、秒まで入っているので、不要な部分を取り除くための処理です。
GASで表示形式（フォーマット）を指定して日時を追加するようにすればいいのだけですが、スプレッドシートにはエクセルには存在しない素晴らしい関数があるので、そちらを紹介することにします。（まぁ、ぶっちゃけ手抜きです。）
これで、年月日と時間までのフォーマットのデータの列が完成しました。

E2に`=ARRAYFORMULA(TEXT(A2:A,"YYYYMMDDHH"))`と入力します。
この[ARRAYFORMULA](https://www.google.com/search?q=ARRAYFORMULA&oq=ARRAYFORMULA&aqs=chrome..69i57j69i59j0l4.439j0j7&sourceid=chrome&ie=UTF-8)。発想がクレイジーで、一発目に使用すれば、数式を配列形式で表示します。Excelに無い概念ですね。
<img width="604" alt="kankyoukanshiimg53.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ba6aeb46-cddd-454e-bcdf-87aa4fc6306a.jpeg">

つづいて、表を整理します。
少しでも不具合を回避するために、不要な部分を消します。

3行目から1000行目（最終行）までを削除しておきます。
<img width="515" alt="kankyoukanshiimg54.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ea16bbf4-6974-8ca0-8d94-82a4d139d48b.jpeg">
3行目を選択して、最終行をShiftを押したまま選択すると3行目から1000行目（最終行）までを選択できます。
<img width="525" alt="kankyoukanshiimg55.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7d8ea8d4-1cea-6d75-27ac-c86b6ebe164c.jpeg">

行3-1000を削除
<img width="551" alt="kankyoukanshiimg56.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/93f76f84-ad2f-fbe9-1f06-de85f673a3f8.jpeg">

とてもシンプル
<img width="570" alt="kankyoukanshiimg57.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/48573c3d-552c-3883-6ec4-ddcb726f0041.jpeg">

※F列からZ列も同じように削除しておきましょう。また、setシートについても同じように不要な行列は削除しておきましょう。

###  トリガー設定
続いて、このデータを定期的にスプレッドシートに自動でためていく処理を実装します。
スクリプトエディタに戻って編集、現在のプロジェクトのトリガーを選択。
トリガーって引き金っていうことだと思うんだけど、条件によってさっき作ったGASを実行しますよ！ってことができるんです。
<img width="374" alt="kankyoukanshiimg60.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/77805e04-ab86-be2e-1401-2c5853c09f83.jpeg">

トリガーの設定画面に移るので、右下の**トリガーを追加**を選択します。
<img width="745" alt="kankyoukanshiimg61.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/6031d1aa-15b4-accf-f7d9-71ccd3054ef4.jpeg">

イベントのソースを選択で**時間帯主導型**を選択します。
<img width="615" alt="kankyoukanshiimg62.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/fe6939d6-388c-e874-48b7-48cea93a31f8.jpeg">

時間の間隔を選択（時間）で今回は**1時間おき**を選択し保存します。
<img width="652" alt="kankyoukanshiimg64.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/98b45611-2d61-9811-29c2-a0ccd3093d1e.jpeg">

これでトリガーの設定は完了です。
<img width="733" alt="kankyoukanshiimg65.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d1257f71-0528-4194-0f09-3100fe2db7ec.jpeg">

スクリプトエディタに戻って保存ボタンを押して保存してスクリプトエディタを閉じます。
<img width="310" alt="kankyoukanshiimg66.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/5073ca37-ed57-9f91-c6a2-fac99db29916.jpeg">

###  管理シート追加
logの最新情報を拾い出すためのシートを作成します。
<img width="470" alt="kankyoukanshiimg50.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/3d3417c3-4231-0b1d-eb60-dfb37f3d533c.jpeg">

シート名変更をsetにします。
<img width="275" alt="kankyoukanshiimg51.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/fc44fb29-1337-0d18-42a4-13a6206d2260.jpeg">

setシートを作成していきます。
データの表題を作成します。
A1から1列目を順に温度、湿度(グラフ)、湿度、照度と入力します。
![kankyoukanshiimg52.JPG.PNG](https://qiita-image-store.s3.amazonaws.com/0/349931/bf7aecaf-5d0f-c1cc-fc80-27c3dae50b6d.png)

続いて式を作成していきます。
logシートのデータから、最新のものを表示してみます。
温度A2に`=LOOKUP(10^10,log!B:B)`
湿度（グラフ）B2に`=LOOKUP(10^10,log!C:C)`
<img width="275" alt="kankyoukanshiimg67.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/6eb3e428-8f1c-75a4-328a-9c343afcc514.jpeg">

つづいて、湿度については円グラフを作りたいので、残りの100分率を求めます。
ですので、B3に`=100-B2`と入力します。
<img width="310" alt="kankyoukanshiimg68.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/cd093493-df40-f10d-1c94-682bc260340e.jpeg">

湿度C2に`=LOOKUP(10^10,log!C:C)`
<img width="481" alt="kankyoukanshiimg69.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/fca15002-195f-46b5-192c-eadaf1055649.jpeg">

照度D2に`=LOOKUP(10^10,log!D:D)`
<img width="473" alt="kankyoukanshiimg70.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/3d232710-dc40-e6aa-0033-b7df205a68a8.jpeg">
おつかれさまです。第2部　スプレッドシートの作成はこれで完了です！
いよいよこのシートを使って環境監視画面（ダッシュボード）を作成していきます。

## Googleデータポータル
[Googleデータポータル](https://support.google.com/datastudio/answer/6283323?hl=ja)は、Googleが提供するBI（ビジネスインテリジェンス）ツールです。
データを接続して、グラフや表を使って可視化することができます。
詳しくはGoogle先生に聞いてみてくださいね。

### リビング環境監視作成  
で、早速新しいレポートの開始をクリック。
空白から作りたいと思います。（**空白**良い響きですね）
https://datastudio.google.com/u/0/
<img width="718" alt="kankyoukanshiimg71.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/3c7217ed-a406-6466-0c1d-cce69876cc36.jpeg">

すると無題のレポートが作成されます。
<img width="796" alt="kankyoukanshiimg72.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/895011b7-a0a3-9d79-efa6-ab1ab20ba751.jpeg">

名前を**リビング環境監視**に変更します。
<img width="470" alt="kankyoukanshiimg73.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/0bdb38f3-469a-d1d7-0507-4e23e6fd664a.jpeg">

### データソース接続 
右下の**新しいデータソースを作成**をクリック。
<img width="413" alt="kankyoukanshiimg74.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e28ab5fc-9769-c65a-5bbd-b5f23be94a53.jpeg">

**Google スプレッドシート**を選択します。
<img width="724" alt="kankyoukanshiimg75.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ae1b419a-7cfc-9df9-e7a2-ab81241fd047.jpeg">

データソースを選択する画面になります。
ここで、先ほど作成したGoogle スプレッドシートのシートを一つづつ選択します。
<img width="584" alt="kankyoukanshiimg76.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/cc6fbeab-f06d-d56c-496d-8f732cd3f2f6.jpeg">

まず、**リビング環境監視**を選択、続いてワークシートの**log**を選択します。
<img width="802" alt="kankyoukanshiimg77.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/74bd63f5-f033-0cf9-688e-dfd4a911f6b9.jpeg">

右上の**接続**をクリックします。
<img width="485" alt="kankyoukanshiimg78.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7180404b-224e-c1d5-fbd8-de2ffb2a25a0.jpeg">

**レポートに追加**をクリックします。
<img width="799" alt="kankyoukanshiimg79.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d6253b63-b78b-c841-bbaa-f965881370a8.jpeg">

データソースを追加します。
**レポートに追加**を再度クリックします
これで、Google スプレッドシートのlogシートが追加されました
<img width="649" alt="kankyoukanshiimg80.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/dff47ac0-51b5-52a3-83bb-0abc18834a52.jpeg">

もう一つ、同じ要領でsetシートも追加します。
リソースをクリックします。
<img width="572" alt="kankyoukanshiimg81.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/0bc2dae1-4f01-bcec-3ba2-226fc73de230.jpeg">

先ほど追加したデータソースが表示されています。
下の**データソースを追加**をクリックします。
<img width="445" alt="kankyoukanshiimg82.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/86c7a053-eecc-6e40-e310-4f2c1156db45.jpeg">

**Google スプレッドシート**を選択
<img width="713" alt="kankyoukanshiimg84.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/372d63a2-b5fb-b349-312e-e687b346749e.jpeg">

**リビング環境監視**を選択、続いてワークシートの**set**を選択します
<img width="803" alt="kankyoukanshiimg85.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/02e52f93-2f71-a543-ed4f-ecbf0087ea5e.jpeg">

データソースを接続する画面に切り替わります
<img width="781" alt="kankyoukanshiimg86.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/a75210bf-0158-8321-cb2f-58e0fb98dcd1.jpeg">

右上の**接続**をクリックします
<img width="485" alt="kankyoukanshiimg78.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7180404b-224e-c1d5-fbd8-de2ffb2a25a0.jpeg">

**レポートに追加**をクリックします。
<img width="788" alt="kankyoukanshiimg87.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e9a9befd-76e4-d598-733f-da041f019383.jpeg">

データソースを追加します。
**レポートに追加**を再度クリックします。
<img width="639" alt="kankyoukanshiimg88.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/3936bca0-8748-4faf-642d-0b3d6c9e5614.jpeg">

### 監視画面作成
データソース接続が完了したので、いよいよ作りこんでいきます。
先にテーマを設定します。
<img width="798" alt="kankyoukanshiimg89.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e20057fb-6a87-b308-8a34-0a135aef8977.jpeg">

現在のテーマが**シンプル**になっているので、**シンプル(暗)**を選択します。
私の場合は、ディスプレイの消費電力量、眼球に対する負荷、の2点（実際の影響は微小または気分だけ）からダーク色を基本としています。
※ここら辺は好みに合わせて色々いじってみてくださいね。
<img width="399" alt="kankyoukanshiimg90.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/c2033a05-ee0a-a2fe-f35d-71a382ccd59d.jpeg">

### 一覧表作成
いよいよグラフを作成していきます。
グラフを追加を選択します。
<img width="418" alt="kankyoukanshiimg91.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ea37b26f-c75d-d275-febb-45b89ae0666c.jpeg">

するとプルダウンしますので、まずは表を選択してみます。
<img width="149" alt="kankyoukanshiimg92.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/97bee2dd-8ba3-d5f6-7286-a8d5d997f625.jpeg">

えっ、できた！？と一瞬思います。が、
Google先生が適当に作ってくれるので、これを整えていきます。
使用可能な項目からドラッグアンドドロップの方式で、必要な設定項目にデータソースを設定していきます。まず、**日時（補正）**を期間のディメンジョンの**日時**の上にドロップします。
<img width="516" alt="kankyoukanshiimg93.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ee267c8b-4e6e-3522-32b3-fdb7af412eec.jpeg">

日時（補正）に変わっていれば成功。
<img width="544" alt="kankyoukanshiimg94.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b7c603af-f31c-0cb9-1e4f-29bf9ee5bb7e.jpeg">

続いて、表に**湿度**と**照度**を追加してみます。
先ほどと同じ方法で、指標の指標を追加の上あたりに対して、使用可能な項目から、**湿度**、**照度**をドラッグアンドドロップします。
表に追加されれば成功です。
<img width="539" alt="kankyoukanshiimg95.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7c68154d-1a10-e89f-2ffc-a32009e0b6e5.jpeg">

ん？日時（補正）の順番がおかしい？
並べ替えを確認します。
**温度**とかになっていたら、クリックして、**日時(補正)**を選択します。
<img width="494" alt="kankyoukanshiimg96.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/6731be0d-ed10-5497-8f69-404a4e0e6e88.jpeg">

日時(補正)順に並び替わると成功です。
また、表の見た目を変更するにはスタイルをいじってみてください。
<img width="586" alt="kankyoukanshiimg97.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e080c167-8f25-f301-db40-1253d2436fe9.jpeg">

### 温度・湿度折れ線グラフ作成
続いて温度と湿度の折れ線グラフを作成していきます。
<img width="227" alt="kankyoukanshiimg98.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e53eeda7-fc1f-1702-11b7-5d7abc7bf404.jpeg">

またまたいい感じにGoogle先生が作ってくれるので、先ほど同様修正していきます。
期間のディメンジョンを**日時（補正）**に変更します。
<img width="765" alt="kankyoukanshiimg99.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/059ad9f4-10e6-8541-dd5b-acc69497baf3.jpeg">

日時（補正）になっているか確認します。
<img width="592" alt="kankyoukanshiimg100.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/6d2c228b-2afc-f89b-3428-a24aad7cc10b.jpeg">

並べ替えを、**日時（補正）**に変更します。
<img width="585" alt="kankyoukanshiimg101.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8968a3b9-4ded-8ef5-c29c-c84750769098.jpeg">

つづいて、降順を**昇順**に変更します。
<img width="588" alt="kankyoukanshiimg102.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/4c64bc2e-666e-55bd-572c-eaaaeb205a56.jpeg">

温度と湿度をドラッグアンドドロップで入れ替えます。
<img width="737" alt="kankyoukanshiimg103.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/e091de83-f2ba-72eb-ac30-6ec8c9afc66a.jpeg">

### 照度の棒グラフ 
照度の棒グラフを作ります。
<img width="232" alt="kankyoukanshiimg104.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/70af5a2e-059f-3ed3-54f3-1305f9016392.jpeg">

先ほど同様、期間のディメンションを**日時（補正）**に変更します。
<img width="691" alt="kankyoukanshiimg105.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/3640d07f-455c-f9ae-a5f3-083975899778.jpeg">

**日時（補正）**になっているか確認します。
<img width="790" alt="kankyoukanshiimg106.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/fc453c02-ac25-29a7-930c-1cc63f571a9d.jpeg">

指標を**照度**、並べ替えを**日時（補正）**に変更します。
<img width="778" alt="kankyoukanshiimg107.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b0931bef-3c58-fc3b-506f-38893e05b780.jpeg">

続いて降順を**昇順**に変更します。
<img width="585" alt="kankyoukanshiimg108.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/efff1e0f-7422-d70c-2e9d-db92597c8d5c.jpeg">

### 湿度の円グラフ
湿度を表す円グラフを作成します。
グラフを追加から円グラフを選択します。
<img width="228" alt="kankyoukanshiimg109.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/c136a559-9389-f1a1-51ff-7d851370c197.jpeg">

なんかド派手なんができてしまいました。
これは、**logのソースコード**を使用したためです。
データソース**リビング環境監視**をクリックします。
<img width="686" alt="kankyoukanshiimg110.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ef4ddfbb-4798-764d-1c43-6477f12d9968.jpeg">

**リビング環境監視-set**を選択します。
<img width="391" alt="kankyoukanshiimg111.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/7e4e1e98-097e-fb7f-a4bb-41dfd2ea4a96.jpeg">

**←**で戻ります。
<img width="788" alt="kankyoukanshiimg112.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8be4f951-fc5f-9802-e42d-507044623a87.jpeg">

特に変化はありません
<img width="642" alt="kankyoukanshiimg113.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/2b536772-a357-c2a3-55ce-429022ed1e14.jpeg">

ディメンション、並べ替えを**湿度**に、指標を**湿度（グラフ）**に変更します。
すると、円グラフが現れました。
<img width="583" alt="500.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/1ad9a0fb-eb08-5064-2b32-87c40ed5f2fd.jpeg">

降順を**昇順**に変更します。
<img width="555" alt="501.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349931/cec3c836-9750-d8da-8fb6-a3339dc3b7a9.jpeg">


### 湿度・温度・照度スコアボード
湿度、温度、照度の現在の値を作成していきたいと思います。
グラフを追加からスコアカードを選択します。
<img width="223" alt="kankyoukanshiimg116.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b3297a00-ebe3-e737-e9e8-8986ee5c69e3.jpeg">

いきなり温度のスコアボードが完成しました。
<img width="624" alt="kankyoukanshiimg117.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/77d27e52-0836-f25c-429e-6166b0894d54.jpeg">

作成したスコアボードをコピーします。
<img width="380" alt="kankyoukanshiimg118.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/b3ede791-d11d-2ee4-be72-95eb258a5e8d.jpeg">

任意の場所で右クリックして貼り付けます。
<img width="606" alt="kankyoukanshiimg119.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/4cb5cd13-007e-64e8-f565-dd283ccc8928.jpeg">

指標を湿度に変更します。
<img width="624" alt="kankyoukanshiimg120.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/f6753aa6-8653-79fc-8bf9-23edb8bce2ed.jpeg">

同様にコピーから照度のスコアボードも作成します。
<img width="551" alt="kankyoukanshiimg121.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/99134896-539d-37de-6652-665dbe6fbed8.jpeg">

### スコアボードのデザインを作る
湿度のスコアボードを先ほど作成した円グラフの真ん中に移動させます。
<img width="486" alt="kankyoukanshiimg122.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/ce09aed6-cee8-a07f-fa09-de3f2f7da079.jpeg">

温度と照度のデザインも円形で囲んで統一感を出したいと思います。
円形をクリックします。
<img width="744" alt="kankyoukanshiimg123.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/2d68fda4-4f29-4059-86c6-a22ca8e13f65.jpeg">

円形が作成されるので、円グラフと同じ形状になるように調整します。
<img width="706" alt="kankyoukanshiimg124.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/17d0f228-3f7e-3cfd-da83-7c0ccd86ece0.jpeg">

円形のプロパティで背景色を透明に、枠線の色と太さを調整します。
<img width="727" alt="kankyoukanshiimg125.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/477ca660-1bba-56ba-3a0e-e6fde9c9e612.jpeg">

### 期間の指定
期間を指定して、情報を見ることができるように、期間を選択のコンボボックスを作成します。
上部のカレンダー（期間）をクリックすると作成できます。
<img width="787" alt="kankyoukanshiimg126.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/8cb6ff3d-068b-9d01-e64c-7ff76b4fe01b.jpeg">

### リンク
下のソースデータにアクセスするためのリンクを作成します。
上部のT（テキスト）をクリックします。
<img width="789" alt="kankyoukanshiimg127.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/339fce92-baf2-ad81-35db-e4a62c4e65bb.jpeg">

**データにアクセスする**と入力してみます。
<img width="304" alt="kankyoukanshiimg128.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d54bc039-7384-ae7b-325e-473ce2587533.jpeg">

入力した文字を選択し、リンクをクリックします。
<img width="477" alt="kankyoukanshiimg129.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/4787e89f-06b3-ce9d-90ec-8b546943fffc.jpeg">

いったん、スプレッドシートのURLをコピーし、URLを貼り付けて適用をクリックします。
<img width="614" alt="kankyoukanshiimg130.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/0fb6fe1b-c425-0117-c9bc-98e5136b09d8.jpeg">

リンクの色が見ずらい場合は変更できます。
<img width="622" alt="kankyoukanshiimg131.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/2872f40a-9e3c-f995-b3c0-f6c587740e66.jpeg">

テキストのプロパティでフォントの色を変更します。
<img width="658" alt="kankyoukanshiimg132.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/d4f0c6ee-3c91-773b-9036-eda2b45f1b83.jpeg">

### デザイン仕上げ
グラフ全体のデザインを自分の好みに調整してみてください。
各グラフを選択して、**スタイル**のフォント色やグラフの系列色などを変更してみてください。
これで今回のゴールに到着です。
大変お疲れさまでした。
さっそく、ビューをクリックして出来上がりをご確認ください。
<img width="751" alt="kankyoukanshiimg133.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/77c8356e-64c9-36c9-c847-aade50fb97cc.jpeg">

お付き合いいただきありがとうございました！！
<img width="609" alt="kankyoukanshiimg134.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/349931/516835bc-73f9-ea50-c61b-45ad7d79e3c3.jpeg">

## おまけ
###アラート通知設定　2020年3月14日追加
[リビングを環境監視して、一定温度以上になるとアラートメールで知らせる方法（Nature Remo Cloud APIとGoogleサービス連携）](https://qiita.com/t-chi/items/0048e19caa641338868d)
###その後のお話　2021年6月5日追加
[リビングの環境監視ダッシュボードを６０分で作る方法をQiitaに投稿してから数年たった今のお話。](https://www.cd-l.net/2021/06/qiita.html)

###スプレッドシートセル上限対応（暫定）
500万セル制限により、いつかはスプレッドシートの上限値到達によりダッシュボードが停止してしまいます。
IMPORTRANGE関数を利用する方法もありますが、半永久的（サービス変更がなければ）にオートメーション化したいので、上限前に指定ファルダにデータをコピーして、データをクリアする方法をざっくり作ってみました。
っていっても、不要なセルを全て削除した状態かつ、現在のルールでは100年以上上限値になることは無いのですが、とりあえず100年後にバックアップとクリアを繰り返すことにしました。
※logシートF列からZ列削除とsetシートについても同じように不要な行列削除状態。

###何列まで稼働するのか？
setシート　12行×4列=48セル
上限5,000,000セル-48セル=4,999,952セル

logシート　5行なので
4,999,952÷5行=999,990.4列
**≠999,990列**までは稼働可能

###100年設定
365日×75年+366×25年=36,252日　36,252日×24時間+1行=**876,601列**

まず、Googleドライブでバックアップ用のフォルダを作成します。
そして、GoogleスプレッドシートのGASを次のとおり変更します。
(フォルダIDを出力フォルダを指定するコードのID部分に入力)

```js
var access_token = '***************'//←トークンを入れる
var spreadsheetId = '*****************'//←スプレッドシートのIDを入れる
function remo() {
  var data = getNatureRemoData();　　　　//data取得
  var lastData = getLastData();　　　　　//最終date取得
  setLaremoData(
  {
    te:data[0].newest_events.te.val,　　//温度
    hu:data[0].newest_events.hu.val,　　//湿度
    il:data[0].newest_events.il.val,　　//照度
  },
  lastData.row + 1//最終data追加作業
  );
}
 
function getNatureRemoData() {　　　　　　//Remoのapiをお借りします
  var url = "https://api.nature.global/1/devices";
  var headers = {
    "Content-Type" : "application/json;",
    'Authorization': 'Bearer ' + access_token,
  };
 
  var postData = {
 
  };
 
  var options = {
    "method" : "get",
    "headers" : headers,
  };
 
  var data = JSON.parse(UrlFetchApp.fetch(url, options));
  Logger.log(data[0].newest_events)
  Logger.log(data[0].newest_events.te.val)
  Logger.log(data[0].newest_events.hu.val)
  Logger.log(data[0].newest_events.il.val)
 
  return data;
  
}
 
function getLastData() {
  var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName('log')  //20190815追加
  var datas = sheet.getDataRange().getValues()  //20190815変更
  var data = datas[datas.length - 1]
 
  return {
    totalpoint:data[1],
    coupon:data[2],
    row:datas.length,
  }
}
 
function setLaremoData(data, row) {
  var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName('log')  //20190815追加
  sheet.getRange(row, 1).setValue(new Date())//20190815変更
  sheet.getRange(row, 2).setValue(data.te)//20190815変更
  sheet.getRange(row, 3).setValue(data.hu)//20190815変更
  sheet.getRange(row, 4).setValue(data.il)//20190815変更

  
  //20190815追加　スプレッドシートを指定フォルダにコピーしてデータ削除 （スプレッドシートセル上限対応）
　if (LastRow = 2) {
   //E2に=ARRAYFORMULA(TEXT(A2:A,"YYYYMMDDHH"))挿入
    var range = sheet.getRange("E2").setValue('=ARRAYFORMULA(TEXT(A2:A,"YYYYMMDDHH"))');

  } else {
    Logger.log('そのまま');    
  } 

   // A列の値を配列で取得
    const columnBVals = sheet.getRange('A:A').getValues(); 
   //空白を除き、配列の数を取得
    const LastRow = columnBVals.filter(String).length;  
    Logger.log(LastRow);

   // 行数が指定した数値を上回れば処理実行 365日×75年+366×25年=36252日　36252日×24時間+1行=876601行
  if (LastRow > 876601) {
    Logger.log('処理実行');
    // コピー元ファイル
    var templateFile = DriveApp.getFileById(spreadsheetId);
    // 出力フォルダ
    var OutputFolder = DriveApp.getFolderById('*****************');//←バックアップフォルダのIDを入れる

    // 出力ファイル名
    var OutputFileName = templateFile.getName().replace('_template', '')+'_'+Utilities.formatDate(new Date(), 'JST', 'yyyyMM')
    templateFile.makeCopy(OutputFileName, OutputFolder);
    sheet.deleteRows(2,876601);
  } else {
    Logger.log('そのまま');    
  } 

}
```
とりあえずの思い付きなので、雑過ぎですが、何かの参考になればと思います。
100年間リビングの環境データを蓄積し、その後データをバックアップしてリセットを繰り返す感じです。
Googleの99％以上の可用性を誇るクラウドが100年後もあることを願って仕組みを作ってみましたが、リビングが100年以上ある可能性が極めて低いことに気づいてしまいました。というオチでした。

## 参考
- [Nature Remo](https://nature.global/)
- [Google Apps Script 入門](https://qiita.com/t_imagawa/items/47fc130a419b9be0b447)
- [Nature RemoのAPIを叩き続けて温度と湿度を集計してみた。] (https://blog.pnkts.net/2018/05/21/nature-remo-api/)
- [Google Apps Script（GAS）でGoogleドライブ内のファイルを指定フォルダに複製する！](https://www.indetail.co.jp/blog/171223/)