Arduino MKR WiFi 1010 で始める Arduino IoT Cloud【下準備編】

この記事は、[スイッチサイエンスさんのオンラインショップでポチった「Arduino MKR WiFi 1010」](https://www.switch-science.com/catalog/7384/)を使い、「[Arduino IoT Cloud](https://create.arduino.cc/iot)」を試してみた、という内容の記事です。

実施した内容は、Arduino IoT Cloud を使い始めるまでのセットアップの部分のみとなります。
**※【追記】その後、ダッシュボード連携を実現できたので、続きの記事を書きました（詳細は、この記事の最後をご覧ください）**

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/ssci?ref_src=twsrc%5Etfw">@ssci</a> さんでポチってた「Arduino MKR WiFi 1010」を無事にゲット！<br><br>8/17（火）に開催の <a href="https://twitter.com/hashtag/IoTLT?src=hash&amp;ref_src=twsrc%5Etfw">#IoTLT</a> で登壇する際のタイトル、（仮）としてたものは確定させて大丈夫そうだな。<br><br>●IoT縛りの勉強会! IoTLT vol.78 <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@Youtube</a> - connpass<br>　<a href="https://t.co/xudVrpeqjK">https://t.co/xudVrpeqjK</a> <a href="https://t.co/CrbiqQUiUt">pic.twitter.com/CrbiqQUiUt</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1425315960236351489?ref_src=twsrc%5Etfw">August 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## セットアップのために参照したドキュメント
今回の内容を進めていく際に参照したものは、以下の 2つの公式ドキュメントです。

### 1つ目（Arduino MKR WiFi 1010 に関するもの）
●Getting started with the MKR WiFi 1010 | Arduino
　https://www.arduino.cc/en/Guide/MKRWiFi1010
![Getting started with the MKR WiFi 1010](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/516a7687-12af-ae87-5a61-aec30c75adfe.jpeg)

### 2つ目（Arduino IoT Cloud に関するもの）
●Getting started with the Arduino IoT Cloud | Arduino Documentation | Arduino Documentation
　https://docs.arduino.cc/cloud/iot-cloud/tutorials/iot-cloud-getting-started
![Getting started with the Arduino IoT Cloud](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dc51983a-7774-0493-6ff2-abdd146586ba.jpeg)

## 2つのドキュメントを見つつ進めて行く
### Arduino IoT Cloud を使っていく準備
上記の 2つのドキュメントのうち、1つ目の「Getting started with the MKR WiFi 1010」のほうは、「Arduino Web IDE」や「Arduino Desktop IDE」を使う話も書いてありますが、今回は他にある残り 1つの選択肢（Arduino IoT Cloud を使う流れが書かれたもの）である「Use your Arduino MKR WIFI 1010 with the Arduino IoT Cloud」の部分を見ていきました。
![Use your Arduino MKR WIFI 1010 with the Arduino IoT Cloud](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8f162e66-7ab7-1578-dedf-ced4369b5781.jpeg)

手順として書いてある　3つのステップは以下のとおりです。

1. 「Arduino Createアカウント」を作成する
2. 「Arduino Create plugin」をダウンロードしてインストールする
3. 「Arduino IoT Cloud」のサイトへ進む

上記のうち、ステップ2 について少し補足します。
以下を進める前に、[上記のステップ1 に書かれたリンク](https://store.arduino.cc/digital/create)から、アカウントの作成を行っておいてください（アカウント登録の詳細はここでは割愛します）。

### Arduino Create plugin（Arduino Create Agent）のセットアップ
[ 「Arduino Create plugin」について記載があった行にあるリンク](https://create.arduino.cc/getting-started/plugin/welcome)をクリックすると、「WELCOME TO THE ARDUINO CREATE AGENT INSTALLATION!」と書かれたページに遷移します。
![WELCOME TO THE ARDUINO CREATE AGENT INSTALLATION!](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ede3c43e-775b-6dd1-c14d-e1bc2b8f9e1a.jpeg)
この画面の右下にある「START」と書かれたボタンを押して、次へ進みましょう。

次の画面で、インストーラがダウンロードできます。
自分は Mac で進めていたので、Mac用のインストーラがダウンロードできるページが表示されました。
![DOWNLOAD THE CREATE AGENT FOR MACOS
](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5138c6bd-7768-abbb-1aee-b6e811d8bd1d.jpeg)
画面右下の「DOWNLOAD」と書かれたボタンを押すと、「ArduinoCreateAgent-1.2.3-osx-amd64-installer-chrome.dmg」という名前のファイルをダウンロードすることができました。
![Mac用のファイル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8a62bf85-3c0b-b5c3-3c23-2f29ee9904f4.jpeg)

ダウンロードしたファイルを使って、インストール作業を進めます。
詳細は割愛しますが、デフォルト設定のままどんどん進めていきました。

ブラウザで開いていたページのほうは、ファイルダウンロード後は「Looking for installed agent...」と書かれた画面が表示されます。
どうやら、先ほどダウンロードした Arduino Create Agent が動作している状態になるのを待ち受けているようです。
![Looking for installed agent](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/78afe4b7-1669-1a29-15b1-628ff378e5de.jpeg)

先ほど、ダウンロードしてインストールした Arduino Create Agent を起動してやれば、このページの表示が以下のように切り替わります。
![ Arduino Create Agent のセットアップ完了の確認画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/24cd3abb-b86f-9ecc-1c58-c034e6a2a60e.jpeg)

そして、画面右下のボタンを押して次へ進むと、「CONGRATULATIONS! YOU'RE ALL SET.」と書かれたページが表示されます。
![CONGRATULATIONS! YOU'RE ALL SET.](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3932d81b-7287-67d1-33c0-2ea2f29487df.jpeg)
ここで、「GO TO WEB EDITOR」と書かれた右下にあるボタンを押すと、オンライン上の Arduino Editor が開くので、デバイスが認識されるかどうかを確認しておくと良いかもしれません。

自分の場合は、PC に Arduino MKR WiFi 1010 をつなぎつつ、以下のようにブラウザ上のエディタでデバイスが認識されることを確認しました。
![Arduino_Editor上でデバイスが認識されるかどうかを確認](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/454e57ea-37a0-ebb4-8e47-e32dcfbe412c.jpeg)

### Arduino IoT Cloud の利用
それでは、Arduino IoT Cloud を利用していきます。

2つのドキュメントを参照したと書いていたもののうち、[「Getting started with the Arduino IoT Cloud」というタイトルのページ](https://docs.arduino.cc/cloud/iot-cloud/tutorials/iot-cloud-getting-started)も参照しつつ進めてみます。

#### 対応しているデバイス
ドキュメントの中で、Arduino IoT Cloud に対応しているデバイスが書かれていたので、見てみました。

この記事を書いた時点では、今回使っている「Arduino MKR WiFi 1010」以外に 8種類のデバイスの名前が書かれていました。
![対応しているボード（Arduino関連）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9581230b-3f96-74c5-501a-8e5fbb03202a.jpeg)

また、Arduino関連のデバイス以外に、ESP32 / ESP8266 にも対応しているようです。
![対応しているボード（ESP32等）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c213cd9b-643a-435d-39db-b61e7eab0712.jpeg)

#### Arduino IoT Cloud でデバイスを登録
それでは、Arduino IoT Cloud のページへと進みます（前の手順で作成したアカウントでのログインが必要です）。
そうすると、以下のようなページが表示されました。
![Arduino IoT Cloud.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6e815ded-8b83-70a5-bc9d-288073fd07e2.jpeg)

上記の画面内の「CREATE THING」のボタンを押して、次へ進みます。
以下の画面では、画面右のほうの「Device」と書かれたエリアにある「GO」と書かれたボタンを押して、次へと進みました。
![Arduino IoT Cloudの次の画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e80fdcf7-5801-0e4b-685c-989e9dc84ec3.jpeg)

そうするとデバイスの種類を選ぶ画面が出るので、左側を選びます。
![デバイスの選択.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/27357b9c-83a8-6f96-9ff5-0a2b785f082a.jpeg)

そうすると、以下のように「Waiting for your device to become available...」と書かれた画面が表示されます。
この時 Arduino MKR WiFi 1010 を PC に接続した状態にしておいてください。
![デバイスを探している画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/287945dc-a4e6-db52-c99f-73db8aa6e289.jpeg)

上記の画面でデバイスを接続した状態にしていると、以下のように Arduino MKR WiFi 1010 を検出した状態の画面表示になりました。
ここで「CONFIGURE」と書かれたボタンを押します。
![Arduino MKR WiFi 1010 を検出](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fe53a598-c88b-8904-fc1e-dd36d9e0e4e4.jpeg)

次の画面では、今回つないでいるデバイスの登録名を入力する画面が出てきます。
後で名前を変更することができるので、ひとまずデフォルトのまま進めても、適当に名前を書きかえて進めても問題ありません。
![デバイスの名前をつける.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b3bb3150-a69a-7f95-b904-f8953ebf1e31.jpeg)

次へ進めると、「Make your device IoT–ready」と書かれた画面が表示され、自動的に画面の中の 3つのステップが進んでいきます。
画面内の説明でも 5分くらいかかるかもしれないような記載があるので、しばらく待ってみましょう（自分が試した中では、ステップ3 の部分で時間を要する感じでした）。
![bbbArduino_IoT_Cloud.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/86fc5305-367a-518a-a732-c4bb73e149d4.jpeg)

そのまま待っていると、以下のような画面が表示されました。
![デバイスのセットアップ完了.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/26b56857-ec1f-9814-4b5e-2c7beea1c7ae.jpeg)
無事に処理が完了したようなので、画面内の「DONE」と書かれたボタンを押しましょう。

そうすると、Arduino IoT Cloud のトップに戻るのですが、画面内の右のほうの「Device」と書かれた部分に、先ほど登録したデバイスの登録名や ID などが表示されているのが分かります。
![デバイスが登録された状態](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/adb7617d-48e9-1ad7-b286-496dd8d32855.jpeg)

#### Arduino IoT Cloud で変数の設定
この後の手順を進めるためには、Arduino IoT Cloud上で 1つ以上の変数を設定する必要があるようです。
![変数の設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f2d9129c-ef2b-9dcc-0f91-dc03da1d98f2.jpeg)

ここで用意する変数が、この時点ではよくイメージできてなかったので、とりあえず以下のようにドキュメント内で例示されていた気温に関する変数を作って進めてみました。
![変数の作成の例.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/534cdec7-7046-d6b8-6716-c548b71d8e7d.jpeg)

Arduino IoT Cloud のトップ画面の左側にある、「Variables」と書かれた部分の「ADD VARIABLE」というボタンを押してみます。
![Arduino IoT Cloudの次の画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e80fdcf7-5801-0e4b-685c-989e9dc84ec3.jpeg)

設定画面で、Name は「temperature」に、その下のプルダウンメニュー的な部分では「Temperature Sensor（℃）」というものを選びました。
![変数を作成する.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9eb9665c-1ad3-3bb8-7c02-c15159db38f9.jpeg)

画面を下に進めていき、とりあえずデフォルト設定のままで、「ADD VARIABLE」と書かれたボタンを押して、作成を完了させました。
![変数を作成する2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/97f1d05e-089d-a215-cd28-38f6742db16a.jpeg)

変数の設定を終えた後、Arduino IoT Cloud のトップ画面はこのようになっていました。
![変数設定後.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/df1c617b-3a28-f897-2886-16f1a977baf3.jpeg)

#### Arduino IoT Cloud でネットワーク設定
公式ドキュメントの説明では、次にネットワーク設定の話が書いてあったので、そちらを見ていきます。

Arduino IoT Cloud の画面右側で、Device と書かれた部分の下を見ていくと、「Network」と書かれた部分があります。
ここで、デバイスをネットワークにつなげるための設定を行うようです。
![ネットワークの設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cc76da5c-b8c7-f2d3-65c0-6b1d1aee00ba.jpeg)

先ほどの変数の作成を行う前は、この部分がグレーアウトしていたりしたのですが、利用できるようになりました。
Network と書かれた部分の中で、「Configure」と書かれたテキストの上にあるボタンを押してみます。

そうすると、SSID とパスワードを入力する画面が出てくるので、自分が使っている Wi-fi の SSID とパスワードを入力しました。
![SSIDとパスワードの設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b4ca1045-04ef-71f2-c798-9a1d270bd400.jpeg)
入力を終えたら、画面右下の「SAVE」と書かれたボタンを押してください。

#### 自動生成されたスケッチを描き込んでみる
画面の上部にあるタブの「Sketch」という部分が、変数の設定を行った後に少し表示が変わっていたのが気になっていましたが（※ 通知 2件があるような表示になっていたもの）、ここを選んでみてみます。

そうすると、変数作成の手順を終えた後に、以下のスケッチが自動生成されていたようでした。
とりあえず、ここからは手探りな感じで、明らかに処理が空という感じの以下のスケッチですが、書き込みをしてみました。

```c
/* 
  Sketch generated by the Arduino IoT Cloud Thing "Untitled"
  https://create.arduino.cc/cloud/things/【固有の文字列】 

  Arduino IoT Cloud Variables description

  The following variables are automatically generated and updated when changes are made to the Thing

  CloudTemperatureSensor temperature;

  Variables which are marked as READ/WRITE in the Cloud Thing will also have functions
  which are called when their values are changed from the Dashboard.
  These functions are generated with the Thing and added at the end of this sketch.
*/

#include "thingProperties.h"

void setup() {
  // Initialize serial and wait for port to open:
  Serial.begin(9600);
  // This delay gives the chance to wait for a Serial Monitor without blocking if none is found
  delay(1500); 

  // Defined in thingProperties.h
  initProperties();

  // Connect to Arduino IoT Cloud
  ArduinoCloud.begin(ArduinoIoTPreferredConnection);
  
  /*
     The following function allows you to obtain more information
     related to the state of network and IoT Cloud connection and errors
     the higher number the more granular information you’ll get.
     The default is 0 (only errors).
     Maximum is 4
 */
  setDebugMessageLevel(2);
  ArduinoCloud.printDebugInfo();
}

void loop() {
  ArduinoCloud.update();
  // Your code here 
  
  
}
```

以下の画面の左上にある 2つのボタンのうち、右側にある「→（右矢印）」が書かれた部分を押してみます。
![自動生成されたスケッチ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0b7458fb-7434-052c-5720-34f6f987b172.jpeg)

しばらくすると、以下のように書きこみが完了したような表示が出ました。
![書き込み実行後.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a9eed538-0fc8-94fe-5da4-61faa4bb04a9.jpeg)

## まとめ
とりあえず、スケッチの書き込みはできましたが、この後にきちんと Arduino IoT Cloud を使っていくには、もう少し使い方や活用方法について調査が必要そうです。

下準備はできたようにも思うので、ひとまず記事はここで一区切りにしようと思います。

## 【追記】 ダッシュボード上のウィジェットとデバイスの連携に成功！
その後、Arduino IoT Cloud のダッシュボード上に設置した「スイッチウィジェットの ON/OFF」と、「Arduino MKR WiFi 1010内蔵の LED の ON/OFF」とを連動させることができました。

また、続きの記事も完成させられました！
●Arduino MKR WiFi 1010 で始める Arduino IoT Cloud【その2：ダッシュボード連携編】 - Qiita
　https://qiita.com/youtoy/items/e247056e1696161ebba1

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Arduino IoT Cloud のダッシュボード上に設置した「スイッチウィジェットの ON/OFF」と、「Arduino MKR WiFi 1010内蔵の LED の ON/OFF」とを連動させられた！！<a href="https://twitter.com/hashtag/IoTLT?src=hash&amp;ref_src=twsrc%5Etfw">#IoTLT</a> の発表に向け、また一歩前進した！<a href="https://twitter.com/hashtag/Arduino?src=hash&amp;ref_src=twsrc%5Etfw">#Arduino</a> <a href="https://twitter.com/hashtag/ArduinoIoTCloud?src=hash&amp;ref_src=twsrc%5Etfw">#ArduinoIoTCloud</a> <a href="https://t.co/u7WwWS1RzK">pic.twitter.com/u7WwWS1RzK</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1425373685666312193?ref_src=twsrc%5Etfw">August 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 【追記】 さらに続き
●Arduino Cloud と Arduino IoT Cloud などの情報を整理してみる【未完】 - Qiita
　https://qiita.com/youtoy/items/7885aa0e85e1dbf78cdc