この記事では、M5StickCに他のパソコンやスマートフォンからブラウザ経由で接続し、動作中のM5StickCの設定の変更を行うようプログラミングする方法について紹介します。
M5StickC本体にもボタンはありますが、M5StickCを手に取って、ボタンで操作するのは使い勝手が良くありませんよね。。。
最近では洗濯機や掃除機なんかもブラウザ経由で設定を変更することができるようになっています。使い勝手を求めるなら、スマホやパソコンのブラウザでM5StickCを設定できるなんて、なんかいいですよね！
今回はこれまでArduino for M5Stickでご紹介した次の機能をブラウザで設定できるようにプログラミングしていきます。
- LEDライティング（発光パターン）の変更
- 冷却ファンの回転速度の設定
- 温湿度センサーから読み取った温度によってファンの回転速度を自動で変化させるための閾値の設定
実際に動かしてみた動画はこちらです！
今回は、特にカメラなどの個人情報が取得できるデバイスがないので、単純にHTTP用のページを返すように作ります。
● Google Chrome バージョン：90.0.4430.212（Official Build）(64 ビット）
ブラウザで設定する際の仕組みを理解する
ブラウザからM5StickCの設定を変更するには、ブラウザ（Webクライアント）とM5StickC（Webサーバー）の役割を知る必要があります。
各役割は一般的に以下のように定義されます。
- Webクライアント
ソフトウェアの種類の一つ。Webサーバの持つ情報や機能にアクセスして利用できるようにするもの。 - Webサーバー
WebクライアントからHTTP/HTTPSで送られたリクエストに対してHTML、CSS、JavaScriptなどの情報を返す役割を持ったソフトウェアのこと。
要求への応答内容も次の2種類あります。
①ファイル
返信結果があらかじめ決まっているもの（更新されないもの）です。
これはHTMLファイルとCSSファイルや画像ファイルなどで構成され、Webサーバ上に保存されています。
②処理結果
Webサーバ側で実行されているプログラムの実行結果を返すパターンです。
PerlやPHPと呼ばれるWebサーバー側で動作するプログラムが使われます。
Webサーバ上にプログラムが保存されています。
つまり、今回作るものに置き換えると次のようになります。
- Webクライアント →スマホやパソコンのブラウザ
- Webサーバー →M5StickCの中に作るべきもの
ブラウザ（Webクライアント）は、いつも皆さんが使っているものが使えますので、特に作る必要はありません。
今回プログラミングして作るのは次の2つになります。
①Webサーバーの機能
②リクエストに対する応答内容（HTML、CSS、JavaScript）
Webサーバから返される応答内容は次のような仕組みで動いています。
Webブラウザを使ってWebサイト（Webサーバ）にアクセスする場合、「HTTP（Hypertext Transfer Protocol）」というプロトコルが利用されます。
Webブラウザのアドレスバーに「http://karakuri-musha.com/」などと入力した場合、「http:」の部分になります。ちなみにHTTPプロトコルを使って、サイト（karakuri-musha.com）にアクセスするという意味になります。
このHTTPというプロトコルでは、WebサーバとWebクライアントがTCP：80番ポートを使用して通信します。そのため、Webサーバでは、TCPの80番ポートで待ち受け（リッスン）していて、WebクライアントはWebサーバの80番ポートに対してTCP接続を行ったあと、次の手順を実行します。
①WebクライアントからHTTPのファイル取得要求（GET要求）を送信する
②Webサーバ側から応答を返す
図ではステータスとして「HTTP/1.1 200 OK」と返していますが、これは成功を意味します。
続いて応答ヘッダ（Content-type～Connection）とドキュメント部（<!DOCTYPE…～</html>）が返されます。
ドキュメント部の内容が実際にブラウザで表示される内容になります。
※応答ヘッダとドキュメント部の間には改行コードが入ります。
※図に記載した以外にも応答ヘッダで記述できるものはあります。
M5StickCでWebサーバを構成するためには
M5StickCにWebサーバの機能をプログラミングするためには、M5StickC用のライブラリにある「WiFiServer」を使用します。Webクライアントからの接続は「WiFiClient」を使用します。
Webサーバ機能
| 関数 | 説明 |
| WiFiServer::WiFiServer(uint16_t port=80, uint8_t max_clients=4) | Webサーバを生成します。生成時には次の２つを指定します。 ①ポート番号 ②最大接続数記述方法としては次のようにします。 WiFiServer server(80,4); |
| WiFiServer.begin() | Webサーバを開始します。 |
| WiFiServer.available() | Webクライアントからの接続情報の取得 戻り値はWiFiClient型 |
Webクライアント機能
| 関数 | 説明 |
| WiFiClient::WiFiClient() | Webクライアント接続を生成します。 生成時にWiFiServer.available()の結果を格納することでWebサーバに接続されているものが取得できます。 |
| WiFiClient.connected() | Webクライアント接続が接続されているかを取得します。 |
| WiFiClient.available() | Webクライアント接続が有効かどうかを取得します。 |
| WiFiClient.read() | Webクライアント接続から値を取得します。 |
| WiFiClient.println(String) | Webクライアント接続への応答内容を定義します。 最後に改行が入ります。 |
回路を作りましょう
今回は、冷却ファンの回転速度、LED発光制御と温湿度センサーを使用しますので、M5StickCから各部品に対して信号を送る線（パス）を作成する必要があります。また、M5StickCを含む各部品が動作するための電力を供給する線（パス）を構成します。
それぞれの部品を使うための回路図については、前回までの記事でご紹介しているため詳細は省きます。
今回使う回路は次のようにしたいと思います。
基本的に前回までにご紹介した内容を組み合わせていますので、特に難しいところはないと思います。
電源は、電源アダプターからDCジャック経由で５Vと１２Vを別々に供給します。
この部分は１２Vから５Vを作る変圧回路を使うと５V用のDCジャックの代替が可能です。
変圧回路については、次の記事でご紹介しています。
ミニケース「KARAKURI -HAKO-」を構成する各部品間でやり取りする信号と電力供給のための回路を設計します。 前回の電源供給に関する検討で決まったことをもとに具体的な回路図に落としていきます。 回路図は以下の2つのツールを用途で[…]
実際にブレッドボードで回路を組むと次のようになります。
ブラウザでM5StickCの設定を変更するプログラムを作ってみる
それではM5StickCにWebサーバをプログラミングし、前回までの記事でご紹介した次の機能の設定をブラウザで操作できるようにします。
①M5StickCのディスプレイには時計と温度・湿度を表示する
②スマホやパソコンのブラウザで以下の設定を変更できる
※LED設定と回転速度制御をタブで分けて表示します
冷却FANのLED発光パターンを設定
＜種類＞
・単色：RED、PURPLE、BLUE、GREEN
・グラデーション
・アニメーション（ローテーション）
冷却FANの回転速度制御を「自動」か「手動」に切替
＜設定＞
・自動：温度による回転速度のDuty比の条件を設定
・手動：回転速度のDuty比を指定
前回までにご紹介した各記事は次の一覧を参照してください
この記事では、Arduino IDEを使ってコンピュータをWi-Fiルータに接続する方法について紹介します。 Wi-Fi接続する方法は、２つあります。２回目の今回はマイコンにアクセスポイント情報（SSID、パスワード）を記憶させることでプ[…]
この記事では、Arduino IDEを使ってM5StickCをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービスを使って時刻を同期する方法について紹介します。 M5StickCなどのマイコンも内部に時刻をもってい[…]
この記事では、M5StickCと冷却ファンを使って回転速度制御をしていきます。 M5StickCから冷却ファンの回転を制御できれば、扇風機のように、自由に風量を変えることができます！ 今回の冷却ファンは次のものを使います。パソコン用[…]
この記事では、M5StickCとLED搭載の冷却ファンを使ったLED発光制御の方法について紹介します。 前回は、M5StickCで冷却ファンを使った回転速度制御をおこないましたが、今回はLEDです。 使用するLEDは、複数のLEDを1個[…]
この記事では、M5StickCに温度・湿度センサー（以降、温湿度センサー）を接続して、部屋の温度・湿度を測定し、M5StickCのディスプレイに表示させます。 センサーを使うと、M5StickCでできることが増えてきます。 センサー[…]
冷却ファンのLED発光制御プログラム
Arduino IDEを起動して、「ファイル」メニューから「新規ファイル」を選択し、表示されるスケッチに以下のように記述します。
Arduino IDE スケッチ例
M5Stack／M5StickCへの書き込み
- 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
- 「ツール」メニューから「ボード」情報を確認し、M5StickCであるか確認します。 この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
- 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。
- 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。
- シリアルモニタの画面にM5StickCのIPアドレスが表示されるのでメモします。
- M5StickCからUSBケーブルを抜き、作成した回路に組み込んで電源を入れます。
プログラム実行結果
実際にiPadのChromeブラウザで操作してみた結果を動画にまとめました。
手順は次の通りです。
実際に回路を作成し、M5StickCを起動すると時計が表示され、しばらくすると温度と湿度が画面下に出てきます。この状態になれば、起動は完了しています。
スマホ、iPadなどのタブレット、パソコンなどからChromeブラウザを起動して、プログラムの書き込み時にメモしたIＰアドレスを使用して以下の通り入力します。
http://”IＰアドレス” ※入力例：http://192.168.x.20 など
次のような画面が表示されます。
あとは、ブラウザ上でボタンなどを押すことでLED発光パターンなどが変更できます！
今回の記事は以上になります。
次回は、これまでの記事で作成してきた機能をたくさん盛り込んで作成してみました。
ここまでくればM5StickCを使った様々なものを作ることができるようになっているはずです。皆さんもいろいろ試してみてくださいね！
これからはじめる方にお勧めの参考図書はこちら！