Arduino UNO R4 WiFiをネットワーク接続する方法を分かりやすく解説!
![Arduino UNO R4 WiFiをWiFi接続する方法を分かりやすく解説!](https://cediablog.com/wp-content/uploads/arduino-wifi-connect_eye.jpg)
こんにちは、せでぃあ(@cediablog)です。
Arduino UNO R4 WIFIを手にしたらやってみたいのが、本体の名前にもなっているWiFi接続です。
WiFi接続とは
スマホやノートPCなどのネットワーク接続に対応した機器を、無線LAN接続する技術のことです。
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
「WiFi」と書いて、「ワイファイ」と読みます。
今回はこのArduino UNO R4 WIFIを使って、自宅などの無線LANにWiFi接続動作をさせる方法を紹介します。
- WiFiネットワークへの接続方法
- ネットワーク接続状態の確認方法
- マトリクスLEDへのアニメーション表示方法
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
WiFi接続のやり方が分からない方に読んで欲しい記事です!
![](https://cediablog.com/wp-content/uploads/happy500-1.png)
![](https://cediablog.com/wp-content/uploads/happy500-1.png)
せでぃあ
せでぃあはこんな人物です
✅プライム企業に勤める電気・機械設計エンジニア
✅親子の絆を深めるため、夏休みに子供と一緒に電子工作を製作
✅Arduinoプログラミングを用いて作ったプログラミング電子工作「信GO機」が市の発明くふう展で「優秀賞」を受賞
✅本ブログにてArduinoスクラッチプログラミングLESSON記事投稿中
✅YouTubeチャンネル「せでぃあブログちゃんねる」運営中
Arduino UNO R4 WiFiはここで買えます
WiFi接続とネットワーク接続状態をマトリクスLEDに表示させる
今回作成するプログラム動作を説明します。
- プログラム動作を開始する。
- WiFiネットワーク接続を行う。
マトリクスLEDに接続中アニメーションを表示。 - 3秒後に接続状態を確認する。
接続状態に応じてマトリクスLEDにOK・NGを表示。
プログラム転送後、または本体のリセットボタンを押すとプログラム動作を開始します。
![マトリクスLED「接続中」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_1.webp)
![マトリクスLED「接続中」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_1.webp)
WiFi接続状態に応じてマトリクスLEDに「OK」または「NG」を表示させます。
接続に成功したときは、OKが表示されます。
![マトリクスLED「接続OK」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_2.webp)
![マトリクスLED「接続OK」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_2.webp)
接続に失敗しているときは、NGの表示がされます。
![マトリクスLED「接続NG」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_3.webp)
![マトリクスLED「接続NG」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_3.webp)
あくまでWiFiネットワークに接続して、接続状態を確認する動作になります。
WiFiネットワークに接続してデータをやりとりするにはさらにプログラムを作りこむ必要があります。
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
今回はネットワークに接続させるプログラムの紹介になります。
WiFi接続方法が理解できたら、ネットワーク経由で現在時刻を取得してみましょう!
マトリクスLED表示パターンを作る
メインプログラムを作る前に、マトリクスLED点灯パターンファイルを作成しておく必要があります。
今回作成するマトリクスLED表示
- WiFi接続中アニメーション
- 接続OK表示
- 接続NG表示
これらの作り方を順番に説明していきます。
WiFi接続中アニメーションの作り方
LEDマトリクスエディタを使ったマトリクス表示作成方法を紹介します。
ブラウザ上でマトリクス表示を作成してプログラムコードを生成することができます。
![LEDマトリクスエディタの画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_1.webp)
![LEDマトリクスエディタの画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_1.webp)
- マトリクス作画エリア
- 表示パターンエリア
- コード生成ボタン
実際のLEDマトリクスと同じ「縦8×横12=96マス」表示になっています。
![マトリクスエディタを使った表示パターンの作り方](https://cediablog.com/wp-content/uploads/matrix-editor_info_2.webp)
![マトリクスエディタを使った表示パターンの作り方](https://cediablog.com/wp-content/uploads/matrix-editor_info_2.webp)
LEDマトリクスエディタの使い方はとても簡単です。
点灯させたいLEDマスをクリックして、黒塗り表示にするだけです。
![コピーボタンを押すことで、同じ表示パターンがコピーされます。](https://cediablog.com/wp-content/uploads/matrix-editor_info_3.webp)
![コピーボタンを押すことで、同じ表示パターンがコピーされます。](https://cediablog.com/wp-content/uploads/matrix-editor_info_3.webp)
画面左下のコピーボタンを使うと、同じ表示パターンがコピーされます。
アニメーション表示をさせるときに便利です。
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
表示パターン下の数字は、アニメーション表示するときの1コマ表示時間(msec)になります。
デフォルト値は、66msec/コマ≒15コマ/秒です。
![2コマ目表示パターン作成画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_4.webp)
![2コマ目表示パターン作成画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_4.webp)
2コマ目の表示パターンを作ります。
![3コマ目表示パターン作成画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_5.webp)
![3コマ目表示パターン作成画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_5.webp)
3コマ目の表示パターンを作ります。
マウスでポチポチ。楽しいですね!
![4コマ目表示パターン作成画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_6.webp)
![4コマ目表示パターン作成画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_6.webp)
最後の4コマ目を作ります。
電波が飛んでいるイメージの絵になりましたね。
これでWiFi接続中アニメーションの作成は完了です。
![LEDマトリクスエディタを使った、アニメーション表示プログラム生成方法](https://cediablog.com/wp-content/uploads/matrix-editor_info_7.webp)
![LEDマトリクスエディタを使った、アニメーション表示プログラム生成方法](https://cediablog.com/wp-content/uploads/matrix-editor_info_7.webp)
アニメーション表示パターンの作成が完了したら、プログラムコードを生成します。
画面右上のコード生成ボタンをクリックして、任意のファイル名を指定してデータを生成します。
![生成したプログラムコードはダウンロードフォルダに保存されます。](https://cediablog.com/wp-content/uploads/matrix-editor_info_8.webp)
![生成したプログラムコードはダウンロードフォルダに保存されます。](https://cediablog.com/wp-content/uploads/matrix-editor_info_8.webp)
生成したプログラムコードファイルは、ダウンロードフォルダに保存されています。
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
アニメーション表示コードファイルはメインプログラム作成時に使用しますので、削除しないようにしてください。
接続OK・NG表示パターンコードを生成する
アニメーションではなく、単独表示パターンであってもLEDマトリクスエディタを使ってコード生成すると、32ビット整列のデータを確認できるため便利です。
![LEDマトリクスエディタを使った、OK表示の作り方](https://cediablog.com/wp-content/uploads/matrix-editor_ok_1.webp)
![LEDマトリクスエディタを使った、OK表示の作り方](https://cediablog.com/wp-content/uploads/matrix-editor_ok_1.webp)
LEDマトリクスエディタを使って、OK表示パターンを作ります。
パターンを作ったら画面右上のコードファイル生成ボタンを押して、ファイル生成します。
今回ファイル名を「ok」にしましたが、他ファイル名と重複しなければ何でも良いです。
![生成したプログラムコードをメモ長で開いて確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ok_2.webp)
![生成したプログラムコードをメモ長で開いて確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ok_2.webp)
生成したコードファイルは、ダウンロードフォルダに保存されています。
生成ファイルを右クリックして、プログラムから開くからメモ帳を使ってファイルを開きます。
![メモ帳を使ってOK表示のコードを確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ok_3A.webp)
![メモ帳を使ってOK表示のコードを確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ok_3A.webp)
すると、コードの中身をかくにんすることができます。
中かっこ内の4列のうち、上から1~3列目までがマトリクス表示コードです。
4列目はアニメーション表示時間のため、今回は使用しません。
![LEDマトリクスエディタを使った、NG表示の作り方](https://cediablog.com/wp-content/uploads/matrix-editor_ng_1.webp)
![LEDマトリクスエディタを使った、NG表示の作り方](https://cediablog.com/wp-content/uploads/matrix-editor_ng_1.webp)
OK表示と同様に、NG表示パターンも作成します。
作成できたらコードを生成します。
![メモ帳を使ってNG表示のコードを確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ng_2A.webp)
![メモ帳を使ってNG表示のコードを確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ng_2A.webp)
生成したコードをメモ帳で開いて、NG表示させるためのコードを確認します。
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
確認したコードは、プログラム作成時に使用します。
これでプログラム作成前の準備は完了です。
動作プログラムの作り方
プログラムは「メインプログラム」と「アニメーション表示プログラム」の2つで構成されます。
まずはプログラムファイルから作っていきます。
Arduino IDEのインストール方法を紹介しています。
プログラムファイルの作り方
![Arduino IDEを開いて、ファイルを名前を付けて保存する。](https://cediablog.com/wp-content/uploads/matrix-editor_info_9-1.webp)
![Arduino IDEを開いて、ファイルを名前を付けて保存する。](https://cediablog.com/wp-content/uploads/matrix-editor_info_9-1.webp)
Arduino IDEを開いて、ファイルを名前を付けて保存します。
プログラムは後ほど作りますので、まずは未作成状態のまま保存しても大丈夫です。
ファイル名は「UNO_R4_WiFiConnect」にしました。
![アニメーションプログラムファイルをメインプログラムファイルと同じフォルダに保存します。](https://cediablog.com/wp-content/uploads/matrix-editor_info_a-1.webp)
![アニメーションプログラムファイルをメインプログラムファイルと同じフォルダに保存します。](https://cediablog.com/wp-content/uploads/matrix-editor_info_a-1.webp)
アニメーションプログラムファイルを、メインプログラムファイルと同じスケッチフォルダに保存します。
同じフォルダに保存することで、メインプログラムに自動的に組み込まれます。
![](https://cediablog.com/wp-content/uploads/matrix-editor_info_b-1.webp)
![](https://cediablog.com/wp-content/uploads/matrix-editor_info_b-1.webp)
スケッチファイル「UNO_R4_WiFiConnect.ino」をダブルクリックして開きます。
プログラムの上のタブに「connect_animation.h」が表示されていることを確認してください。
メインプログラム
![Arduino IDEプログラム画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_d-1.webp)
![Arduino IDEプログラム画面](https://cediablog.com/wp-content/uploads/matrix-editor_info_d-1.webp)
メインプログラムを作成していきます。
/* 作品名:UNO_R4_WiFiConnect */
/* 作成者:せでぃあ https://cediablog.com */
/* WiFiネットワーク接続動作確認プログラム */
// WiFiS3ライブラリをインクルードする
#include "WiFiS3.h"
// Arduino_LED_Matrixライブラリをインクルードする
#include "Arduino_LED_Matrix.h"
// connect_animationをインクルードする
#include "connect_animation.h"
// ネットワークのSSIDとパスワードを定義する
#define SECRET_SSID "your_ssid"
#define SECRET_PASS "your_password"
// マトリクスパネルのオブジェクトを作成する
ArduinoLEDMatrix matrix;
// 接続成功時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ok[] = {
0x31149285,
0x48588588,
0x54492311,
};
// 接続失敗時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ng[] = {
0x85fc50a5,
0xa509579,
0x518d185f,
};
void setup() {
// シリアル通信を開始する
Serial.begin(9600);
// LEDマトリクス動作を開始する
matrix.begin();
// WiFiネットワークに接続されているかチェックする
if (WiFi.status() != WL_CONNECTED) {
// 接続を試みる
Serial.print("Attempting to connect to SSID: ");
Serial.println(SECRET_SSID);
// WPA/WPA2ネットワークに接続する
WiFi.begin(SECRET_SSID, SECRET_PASS);
// 接続中マトリクスアニメーション表示を読み出す
matrix.loadSequence(connect_animation);
// 接続中マトリクスアニメーション表示を有効
matrix.play(true);
// 3秒待つ
delay(3000);
}
}
void loop() {
if (WiFi.status() == WL_CONNECTED) {
// 接続に成功したことをシリアルモニタに表示する
Serial.println("Connected to wifi");
// マトリクスパネルにOKマークを表示する
matrix.loadFrame(connect_ok);
} else {
// 接続に失敗したことをシリアルモニタに表示する
Serial.println("Disonnected to wifi");
// マトリクスパネルにNGマークを表示する
matrix.loadFrame(connect_ng);
}
}
上記のサンプルプログラムをコピーアンドペーストしてもOKです。
ネットワークのSSIDとパスワードは、使用するネットワーク環境に合わせて書き換えてください。
アニメーションプログラム
const uint32_t connect_animation[][4] = {
{
0x0,
0x0,
0x60060,
66
},
{
0x0,
0xf01,
0x8060060,
66
},
{
0x1f,
0x82044f21,
0x8060060,
66
},
{
0x3fc4029f,
0x92044f21,
0x8060060,
66
}
};
アニメーションプログラムは、LEDマトリクスエディタで生成したコードファイルをそのまま使います。
初期設定やデータ転送方法などはこちらの記事を参考にしてください。
WiFi接続動作のプログラム解説
![Arduino uno r4 wifiに実装されたマイコンESP32-S3](https://cediablog.com/wp-content/uploads/arduino_esp32-S3.webp)
![Arduino uno r4 wifiに実装されたマイコンESP32-S3](https://cediablog.com/wp-content/uploads/arduino_esp32-S3.webp)
Espressif(エスプレッシフ)社製のマイコン「ESP32-S3」を実装することで、Wi-FiやBluetoothに対応しています。
Arduino UNO R4 WIFIを使ってWiFi接続するための専用ライブラリ「WiFiS3.h」を使ってWiFi接続します。
WiFiS3ライブラリのクラス
Arduino UNO R4 WIFI専用で用意されているライブラリ「WiFiS3.h」には4つのクラスがあります。
WiFiS3ライブラリのクラス
- WiFiクラス
- WiFiUdpクラス
- WiFiClientクラス
- WiFiServerクラス
WiFiクラスは、ArduinoボードのWi-Fi機能を制御するためのクラスです。
このクラスを使用すると、ArduinoをWi-Fiネットワークに接続させることができます。
その他3つのクラスは、Arduino本体とネットワーク経由でデータのやりとりを行うためのクラスです。
今回は、ネットワーク接続だけ行うためWiFiクラス以外は使用しません。
WiFiクラスを使ってネットワーク接続する
WiFiクラスを使ってネットワーク接続するプログラムの作り方を解説します。
// WiFiS3ライブラリをインクルードする
#include "WiFiS3.h"
WiFiS3ライブラリをインクルードして、プログラム内で使用可能にします。
// ネットワークのSSIDとパスワードを定義する
#define SECRET_SSID "your_ssid"
#define SECRET_PASS "your_password"
接続するWiFiネットワークのSSIDとパスワードを定義します。
// WPA/WPA2ネットワークに接続する
WiFi.begin(SECRET_SSID, SECRET_PASS);
WPA/WPA2ネットワークに接続するために、begin()メソッドを使用します。
WiFi接続するためのメソッド
WiFi.begin(“接続するSSID” , “接続するためのパスワード”)
ネットワーク接続状態を確認する
WiFiネットワークへの接続状態を確認するために、statusメソッドを使用します。
接続状態を確認するためのメソッド
WiFi.status()
WiFi.status()の戻り値(抜粋)
- WL_CONNECTED:Wi-Fiネットワークに接続された状態
- WL_IDLE_STATUS:接続されていない状態
- WL_NO_SSID_AVAIL:利用可能なSSIDがない状態
- WL_SCAN_COMPLETED:Wi-Fiネットワークをスキャンした状態
- WL_CONNECT_FAILED:Wi-Fiネットワークへの接続に失敗した状態
- WL_CONNECTION_LOST:Wi-Fiネットワークとの接続が切断された状態
- WL_DISCONNECTED:Wi-Fiネットワークから切断された状態
WiFiネットワークに接続されているかどうかの確認には、戻り値「WL_CONNECTED」を使います。
「WL_CONNECTED」が戻ってこれば「接続できている」と判断します。
それ以外の戻り値は接続できていないときに戻ってくるものであるため、「WL_CONNECTED」が戻ってこない場合は「WiFiネットワークに接続できていない」と判断します。
// WiFiネットワークに接続されているかチェックする
if (WiFi.status() != WL_CONNECTED) {
上記プログラムでは、「!=」の条件になっているので、「WiFiネットワークに接続されていないとき」という条件になります。
マトリクスLED点灯動作のプログラム解説
![Arduino uno r4 wifi内蔵のマトリクスLED](https://cediablog.com/wp-content/uploads/arduino_matrixled.webp)
![Arduino uno r4 wifi内蔵のマトリクスLED](https://cediablog.com/wp-content/uploads/arduino_matrixled.webp)
Arduino UNO R4 WIFIには、本体に12×8=96個のマトリクスLEDが実装されています。
マトリクスLEDの表示方法は主に下記3種類あります。
マトリクスLEDの表示方法
- 単独表示
- アニメーション表示
- テキストスクロール表示
今回作成するプログラムでは、①単独表示と②アニメーション表示を使用します。
マトリクスLEDのアニメーション表示
WiFi接続中アニメーション表示プログラムの作り方を解説します。
// Arduino_LED_Matrixライブラリをインクルードする
#include "Arduino_LED_Matrix.h"
// connect_animationをインクルードする
#include "connect_animation.h"
Arduino_LED_Matrixライブラリをインクルードして、プログラム内で使用可能にします。
またWiFi接続中アニメーション表示用プログラムもインクルードします。
// マトリクスパネルのオブジェクトを作成する
ArduinoLEDMatrix matrix;
マトリクスパネルを点灯させるためのオブジェクトを作成します。
// LEDマトリクス動作を開始する
matrix.begin();
// 接続中マトリクスアニメーション表示を読み出す
matrix.loadSequence(connect_animation);
// 接続中マトリクスアニメーション表示を有効
matrix.play(true);
LEDマトリクス動作を行うために、begin()メソッドを使います。
LEDマトリクスアニメーション表示データを格納するために、loadSequence()メソッドを使用します。
格納したアニメーションを表示させるためには、play()メソッドを使用します。
マトリクスアニメーション表示させるためのメソッド
matrix.begin()
matrix.loadSequence(アニメーション表示データ)
matrix.play(true)
※True:無限ループ表示 False(デフォルト):1度だけ表示
マトリクスLEDの単独表示
// Arduino_LED_Matrixライブラリをインクルードする
#include "Arduino_LED_Matrix.h"
Arduino_LED_Matrixライブラリをインクルードして、プログラム内で使用可能にします。
// マトリクスパネルのオブジェクトを作成する
ArduinoLEDMatrix matrix;
マトリクスパネルを点灯させるためのオブジェクトを作成します。
// 接続成功時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ok[] = {
0x31149285,
0x48588588,
0x54492311,
};
// 接続失敗時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ng[] = {
0x85fc50a5,
0xa509579,
0x518d185f,
};
接続成功、失敗時に表示させるパターンを定義します。
![メモ帳を使ってOK表示のコードを確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ok_3A.webp)
![メモ帳を使ってOK表示のコードを確認します。](https://cediablog.com/wp-content/uploads/matrix-editor_ok_3A.webp)
ここであらかじめ準備しておいた、OK・NGそれぞれのパターン表示データを使います。
// LEDマトリクス動作を開始する
matrix.begin();
// マトリクスパネルにOKマークを表示する
matrix.loadFrame(connect_ok);
// マトリクスパネルにNGマークを表示する
matrix.loadFrame(connect_ng);
LEDマトリクス動作を行うために、begin()メソッドを使います。
シーケンスにない単独パターンを表示させるために、loadFrame()メソッドを使用します。
単独パターン表示するためのメソッド
matrix.begin()
matrix.loadFrame(単独パターン表示データ)
まずはWiFi接続からはじめてみよう
![マトリクスLED「接続中」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_1.webp)
![マトリクスLED「接続中」表示](https://cediablog.com/wp-content/uploads/wifi-connect_info_1.webp)
WiFiS3ライブラリはArduino UNO R4 WIFI専用ライブラリのため、クラスやメソッドについての情報が見つからず困っている方も多いと思います。
ネットワークに接続してみたいけど、どうやったらいいのか分からない。
このようなお悩みを解決したいと思って本記事を執筆しましたが、お役に立てましたでしょうか?
本記事で紹介したプログラムでは、WiFiネットワークに接続するだけでデータのやり取りはありませんが、ネットワークに接続してデータのやり取りするプログラムについても紹介していきますのでお楽しみに!
Arduino UNO R4 WiFiで遊んでみたい!と思った方は下記サイトで購入できますのでご検討ください。
Arduino UNO R4 WIFIが買える国内サイト
通信ケーブルは別売りですので、併せて購入検討されることをおすすめします。
![](https://cediablog.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://cediablog.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
![](https://cediablog.com/wp-content/uploads/nomal-clr-150x150.png)
最後まで読んでいただき、ありがとうございました。
なつかしのジャンケンマンがオンラインでよみがえる!?
Arduino UNO R4シリーズはビジュアルプログラミングには対応していません。
Arduino UNO R3はビジュアルプログラミングにも対応していますので、小学生にはこちらがおすすめです。
ELEGOOのArduino互換キットは、コスパに優れた初心者向けキットです!
コメント