Arduino Uno R4 WifiをArduino Cloudから操作してみた

## 概要
Arduino Uno R4 Wifiになり、公式のArduino Uno R4単体でIoTデバイスとして活用できるようになりました。
そこで、Arduinoが運営しているArduino Cloudサービスを使って、Web上からArduinoのLEDを遠隔操作する方法を説明します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/S2Z6AL2p8vA?si=hlKAN-rGWaNR_Li_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## Arduino Cloudのユーザ登録とログイン

まずはArduinoの公式ページ、右上から`「Sign In」`を行います
https://www.arduino.cc/

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/ac76cea8-413b-1a86-b869-f495714af2f6.png)

するとSignInの画面になります。初めての場合は`「Create one」`からユーザ登録をしてください。  
Googleなどの外部認証を使う場合は下のボタンをクリックしてログインをしてください。（アカウント登録の詳細はここでは割愛します）

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/156604ac-d0f5-ce44-155a-e37b5e38e423.png)

Loginが完了すると、再度公式のページに戻るので右上の`Cloudマーク`からArduinoCloudに行きます。
下の画面がArduinoCloudのHome画面です。  
設定したDeviceやThingsの数が表示されています。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/1b18c025-c3e8-e0ca-6afe-85f5bef1ab82.png)

## Arduino Cloudの説明
Arduino Cloudとは、AdruinoやESP32などのデバイスから収集したデータを集約し、それを制御したり自動でグラフ表示するなどができるIoTクラウドサービス。


![ArduinoCloud](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/2610eeae-64cf-964f-9764-d32ce4b72b51.png)

### Arduino Cloudの特徴
- データ監視- ダッシュボードを通じて環境センサーの値を簡単に監視する
- 変数の同期- 変数の同期により、デバイス間の通信が可能
- スケジューラ- 特定の時間でジョブをオン/オフするようにスケジュール
- Over-The-Air (OTA)- コンピューターに接続されていないデバイスにコードアップロード
- Webhook - プロジェクトを IFTTT などの別のサービスと統合
- Amazon Alexa- Amazon Alexa 統合を使用してプロジェクトを音声制御
- ダッシュボードの共有- 世界中の他の人々とデータを共有

必要最低限の説明をすると下の3つを覚えてください。

1. Devices： ArduinoやESP32などの実際のデバイス、マイコンボードのこと
2. Things： プロジェクト。具体的にはDeviceの状態やセンサー値などの情報と、情報を扱うプログラムのこと。
3. Dashboards： 情報を可視化し、操作するWeb画面のこと 


ちなみにAdruind Cloudサービス自体は有料のサービスです。無料枠はThingsが2つまで。  
つまり無料の場合は2つのデバイス制御までとなります。

## Let's Try！　Arduino Uno R4 WifiをCloudから操作してみよう！

それでは簡単な例としてWeb上からArduinoのLEDを操作するプロジェクトを作ってみましょう。
先ほどの3つの設定をそれぞれ行っていきましょう。

## Devicesの設定
Home画面のメニューからDevicesを選択して、手持ちのArduino Uno R4 WifieをDeviceに登録してみます。
まずは`Add Device`のボタンをクリック。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/513874bc-ece5-e162-a696-c2d673ac3c36.png)

Deviceの設定画面になるので手順に沿って設定をしていきます。
- まずデバイスの選択画面では手持ちのデバイスを選択します。ここではAdruino公式ボードのAruino Uno R4 Wifiを登録するので、Adruino Boardを選択。
- 少し進んでデバイス名では任意の名前を付けます
- さらに進むと、Deive IDとSecuryt Keyが発行されるのでしっかり控えましょう。PDF形式でも提供されるので、必要であればリンクからPDFをダウンロードします。
- 控えが完了したら、画面下のチェックボックスをクリックしてContinueボタンを押します
- あとは画面を確認しながら順にボタンを押していけばDeveice設定は完了です。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/a3dddf30-287d-0865-aac1-b0ec80317f2d.png)

Deviceを選択すると、完了したDeviceの情報を確認することもできます。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/84bf25d2-8eb5-2b87-6c72-998bc282b4d6.png)

## Thingsの設定
次にThings（プロジェクト）の設定です。
`"CREATE THINGS"`から登録を開始します。それではやっていきます！
まずは左側にあるクラウド変数を追加します。
`Add`ボタンを押してLEDの状態を持つクラウド変数を追加します。
- 変数名：Led
- 変数の型：Boolean
- 権限：Read＆Write
- 更新頻度：On Changes

次に、右側にあるデバイス設定で先ほど設定したデバイスを紐づけます
‐ ここは先ほど設定したデバイス名を選択するだけです

次は、ネットワークの設定です
ここでは
- WifiのSSID
- WifiのPASS
- 先ほど紐づけたデバイスのセキュリティキー（Device設定で控えたものです。）

を設定します

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/4640cbe4-3a70-bda4-56ac-72a1f18b15d4.png)

Setupが完了したら、次にAdruinoに書き込むプログラムを編集します。
Sketchを選択してください。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/bfaf2f39-a6e2-8f29-f5f9-4cd190bf7e6b.png)

SKetchは先ほど設定したクラウド変数を基に自動的にテンプレートが作成されています
そこで、今回はクラウド変数Ledの値を使ってAdruino Uno R4 Wifi のボード上に実装してあるBuilin　LEDを使ってLチカします。プログラムを下記に示します。
プログラムを作成したら矢印ボタンから書き込みを行ってください。

※ 下記プログラムの大半は自動生成されたものです。追加した行を＋で表現しています。
コピペする場合は`＋`を除いてください。

```diff_cpp:sketch
/*
  Sketch generated by the Arduino IoT Cloud Thing "Cloud Blink"

  Arduino IoT Cloud Variables description

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

  bool led;

  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();
+ pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  ArduinoCloud.update();
+ digitalWrite(LED_BUILTIN, led);
}

/*
  Since Led is READ_WRITE variable, onLedChange() is
  executed every time a new value is received from IoT Cloud.
*/
void onLedChange()  {
+ Serial.print("Led status changed:");
+ Serial.println(led);
}
```



最後のMeta情報は自分の管理用に、必要な情報を設定します。
今回は`Time Zone`だけ`Asia/Tokyo`に変更しました。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/6f2dcf17-d6d7-e42b-70cb-0db64b56786a.png)

## Dashboardsの設定

最後にDashboardを1つ作ります。
ダッシュボードはノーコードで作成することができます。
まずは編集モードに変更し、`Addボタン`から「Switch」と「LED」のWidgitsを追加してください
編集モードではWidgitsを選択すると右上に`・・・`が表示されるので`「Edit Setting」`を選択し、
Widghetの設定画面を開きます
-Switch,LEDそれぞれにクラウド変数Ledを紐づけます

<iframe width="560" height="315" src="https://www.youtube.com/embed/xgN0kEHjcP4?si=1474stXzAti0RXBv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/a33d441c-ac1a-6091-785e-94b63210a7b2.png)

以上で完了です。

ダッシュボードには色々なWidgetsがあるので、とりあえず並べてみました。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/1ffcbb8a-bcf7-8aab-9959-299787592f25.png)

## まとめ
駆け足ですがArduino　Cloudを使ってAdruino Uno R4 Wifiをインターネット上から操作してみました。
今後もAdruino Uno R4 Wifiのネットワーク機能を色々と試していきます。