特定されちゃう！？M5Stackで家の温度データをWEB公開する

## 目的

記事（[M5Stackに温度センサーDS18B20を繋げて気温（℃ および F）を取得する](https://qiita.com/knyrc/items/889645342db00371a017)）の続きで取得した温度データを [Ambient](https://ambidata.io) というIoTデータ可視化サービスに投げて、WEB公開してみました。その備忘録としてこちらに投稿しておきます。

## 準備

* [Ambient](https://ambidata.io) へユーザー登録し下記2点取得します。
    * チャネルID
    * ライトキー
* M5Stack に対して [Windows ではじめるM5Stack](https://qiita.com/xzr_tw/items/3363a500b4503e424d8b) などを参考に Hello World のサンプルを動作確認します。
* [こちら](http://pages.switch-science.com/letsiot/m5stack_arduino/index.html) を参考に Ambient ライブラリのインストールをします。
* 先の記事（[M5Stackに温度センサーDS18B20を繋げて気温（℃ および F）を取得する](https://qiita.com/knyrc/items/889645342db00371a017)）を実施済みとします。

下記の道具を準備します。

* PC（Windows 10 Pro）
* [M5Stack BASIC](https://amzn.to/2FpW1sm)
    * USB-Cケーブル（M5Stack BASICに含まれる）
    * ジャンパワイヤ オスーメス 3本（M5Stack BASICに含まれる）
* [DS18B20](https://amzn.to/2FqDlsG)
* [2.2kΩカーボン抵抗](https://amzn.to/2Fr8RXB)
* [ブレッドボード](https://amzn.to/2Frqsys)

## 手順

### 1. M5Stack へのプログラムの書き込み

M5Stack を USB-C ケーブルで PC と接続し、PC側でArduino IDE を起動し、下記コードをコピペして M5Stack にプログラムの書き込みをします。

```c:
#include <WiFi.h>
#include <M5Stack.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#include "Ambient.h" 

#define ONE_WIRE_BUS 2 // DS18B20 on arduino pin2 corresponds to D4 on physical board
#define PERIOD 60

OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature DS18B20(&oneWire);

Ambient ambient; // Define Ambient Object
unsigned int channelId = 10536; // Channel ID of Ambient
const char* writeKey = "0badcad8f0f1af5c"; // Write Key of Ambient

WiFiClient client;
const char* ssid = "********";
const char* password = "********";

void setup() {
  M5.begin();
  M5.Lcd.setTextColor(TFT_WHITE, TFT_BLACK);
  M5.Lcd.setTextSize(2);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(100);
    M5.Lcd.print(".");
  }
  M5.Lcd.print("\n");
  M5.Lcd.print(WiFi.localIP());
  
  ambient.begin(channelId, writeKey, &client);
}

void loop() {
  int t = millis();
  float celsius;
  float fahrenheit;

  DS18B20.begin();
  int count = DS18B20.getDS18Count();

  //M5.Lcd.clear();
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.print("Devices found: ");
  M5.Lcd.println(count);

  if (count > 0) {

    DS18B20.requestTemperatures();

    celsius = DS18B20.getTempCByIndex(0);
    fahrenheit = celsius * 1.8 + 32.0;

    ambient.set(1, String(celsius).c_str());
    ambient.send();
      
    celsius = round(celsius);
    fahrenheit = round(fahrenheit);
      
    M5.Lcd.print("Device ");
    M5.Lcd.print(0);
    M5.Lcd.print(": ");
    M5.Lcd.print(celsius, 0);
    M5.Lcd.print( "C / ");
    M5.Lcd.print(fahrenheit, 0);
    M5.Lcd.println("F");
  }
  
  t = millis() - t;
  t = (t < PERIOD * 1000) ? (PERIOD * 1000 - t) : 1;
  delay(t);
}
```

### 2. Ambient でマイページの確認

[Ambient](https://ambidata.io) にログインして、作成したチャネルにチャートを追加（下記画面の[+]ボタンを押します）します。

![キャプチャb.PNG](https://qiita-image-store.s3.amazonaws.com/0/92806/36789a5b-9df2-d776-7879-0593f30b5dce.png)

下記のようにチャート設定をします。今回 data1 に温度データを投げているのでそちらを表示するグラフの設定です。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/92806/9f19481f-a4e9-b5e8-7b00-e7d5f3fd78aa.png)

正しくデータが投げられていれば、Myチャネルから下記のように時系列グラフが確認できます。

![キャプチャc.PNG](https://qiita-image-store.s3.amazonaws.com/0/92806/cff9a8a3-4d0f-1cee-db06-c4d9c6468615.png)

チャネル設定画面にて 公開チャネル？ というチェックボックスを☑します。

![キャプチャa.PNG](https://qiita-image-store.s3.amazonaws.com/0/92806/17d55a2c-762b-3ab9-41b8-9748b95dac13.png)

公開された WEB ページは下記です（下記イメージ）
https://ambidata.io/ch/channel.html?id=10536

![キャプチャe.PNG](https://qiita-image-store.s3.amazonaws.com/0/92806/e13e87cf-9d9a-031e-0d62-b0fef06a981c.png)


## 参考

* https://ambidata.io/samples/m5stack/m5stack-arduino/