ESP32をスマホで操作する方法：BlueGrays IoTで5ステップ設定

ESP32をスマホで操作するとは、ボードにつないだリレーやLED、モーターをポケットのスマホからオン・オフし、センサーの値をスマホで確認することです。IoTを学ぶ最初の一歩として、いちばん楽しいテーマでもあります。ESP32には2.4 GHzのWi-FiとBluetoothが内蔵されているので、追加のモジュールは必要ありません。問題はどの方法を選ぶかです。ESP32をアプリで操作するには、自分でWebサーバーを書く、Bluetoothで接続する、Telegramボットを作るといった方法があります。BlynkやArduino IoT Cloudのようなクラウドのダッシュボードも選択肢です。方法ごとに設定にかかる時間、通信距離、制限が異なります。

このガイドでは、いちばん手軽な方法をステップごとに設定します。BlueGraysアプリのBlueGrays IoT機能です。コードはOhmiが用意してくれるので、回路を組んでArduino IDEからESP32に書き込むだけです。ボードは暗号化された接続でBlueGraysのサーバーにつながるため、スマホとボードが同じネットワークにある必要はありません。外出先からモバイルデータ通信で自宅のライトを点けることもできます。まずリレーでライトのスイッチを作り、次にDHT22を追加して温度と湿度をリアルタイムの値とグラフでスマホに表示します。記事の最後には、ほかの方法との比較と、よくあるトラブルの解決表もあります。

ESP32をスマホから操作する5つの方法

• ローカルWebサーバー：ESP32がWebページを配信し、スマホのブラウザからボードのIPアドレスにアクセスします。アカウントは不要ですが、通常は同じWi-Fiネットワークからしかアクセスできません。詳しくは「ESP32の非同期Webサーバー」の記事をご覧ください。
• Bluetooth ClassicとBLE：インターネットもルーターも不要で、スマホがボードに直接つながります。通信距離は屋内でおおむね10メートル程度です。両方の方式を「ESP32のBluetooth」のガイドで解説しています。
• Telegramボット：メッセージでボードに命令を送り、ボードから通知を受け取ります。外出先からも使えますが、グラフやスライダーのようなダッシュボードはありません。設定は「ESP32のTelegramボット」の記事を参考にしてください。
• クラウドのダッシュボード（Blynk、Arduino IoT Cloud）：Webコンソールでテンプレートや変数を定義し、コードを自分で書き、スマホのダッシュボードも自分でデザインします。自由度は高いものの、いくつもの画面や概念を覚える必要があります。Blynkについては「Blynk×ESP32入門」があります。
• BlueGrays IoT：アプリで8つのテンプレートから1つを選びます。Ohmiがピン設定とデバイスキーを入れたコードを用意します。スマホにはテンプレートに応じてスイッチ、スライダー、カラーピッカー、グラフが自動で表示されます。ダッシュボードのデザインもサーバーの構築も不要です。

必要なもの：部品とソフトウェアのリスト

ESP32をアプリで操作するしくみ

BlueGrays IoTでは、スマホとESP32が直接つながるわけではありません。ボードは起動するとまず自宅の2.4 GHz Wi-Fiに接続します。次に、ポート443でBlueGraysのサーバーへ暗号化されたWebSocket（TLS）接続を開き、その接続をつなぎっぱなしにします。スマホのアプリも同じサーバーにつながります。ライトのスイッチをタップすると、命令はスマホからサーバーへ、サーバーからボードへ届きます。接続がすでに開いているので、命令は待ち時間なしで届きます。ボードが送る温度の値も、同じ道を逆向きにたどります。443はWebサイトでも使われているポートです。そのため、ルーターでのポート転送も、自前のサーバーも、ボードのIPアドレスを知る必要もありません。

ボードをサーバーに識別させるのはデバイスキーです。これはアプリがデバイスを作成するときに生成する、bgd_で始まる秘密の文字列です。ボードは接続を開くとき、このキーを接続ヘッダーで送ります。サーバーはスマホからの命令を正しいボードに届けます。キーはシリアルモニタには表示されません。接続が切れると、BlueGraysIoTライブラリが間隔を少しずつ広げながら自動で再接続を試みます。オフライン中に測った値は接続後に送り、停電から復帰したときはスイッチの最後の状態を元に戻します。必要なのは、ボードとスマホがインターネットにつながっていることだけです。ボードは自宅のWi-Fi、スマホは別の街でモバイルデータ通信、という使い方もできます。

回路：リレーモジュールをESP32につなぐ

「リレーでライト」と「ルームステーション」テンプレートの初期ピンは、リレーのINがGPIO26、DHT22のデータ端子がGPIO4です。これらのピンは設定のステップ3で変更できます。ボードのピン配置は「ピン配置」ツールで確認してください。5 Vピンの表記は、ボードによってVINだったり5Vだったりします。

BlueGrays IoTの設定：アプリでの5ステップ

アプリでマイ工房 › マイデバイス › 新しいデバイスを追加の順に進みます。画面の上に「ステップ1／5」のようなカウンターが表示されます。最初の3ステップはスマホ、ステップ4はパソコン、ステップ5は再びスマホで行います。

1. ボードとテンプレート：「どのボードですか？」でESP32を選び、「何をしますか？」で8つのテンプレートから1つを選びます。最初は「リレーでライト」か、センサー付きの「ルームステーション」がおすすめです。デバイスには「リビングのライト」のように分かりやすい名前を付けましょう。
2. 部品と回路：「部品を準備」のリストに、テンプレートに必要な部品が表示されます。「配線する」の図では、どの端子をどのピンにつなぐかが示されます。リレーのテンプレートでは「220 Vで使う場合は、詳しい人と一緒に作業してください。まずはLEDで試してください。」という注意が表示されます。
3. Wi-Fiとコード：Wi-Fiのネットワーク名とパスワードを入力します。ネットワーク名は一字一句同じで、2.4 GHz帯のものでなければなりません。必要なら「接続ピン」の項目でGPIO26とGPIO4を別のピンに変更します。次に「デバイスを作成してコードを準備」をタップします。Ohmiがデバイスキー入りのコードを用意するので、「コードをコピー」か「シェア」でパソコンに送ります。
4. Arduino IDEで書き込む：コードをESP32に書き込みます。アプリに表示される細かい手順は、次の章で1つずつ説明します。
5. 接続：「ボードを待っています」の画面は、ボードがサーバーにつながった時点で自動的に次へ進みます。

ステップ4と5：コードを書き込んで接続を確認する

1. Arduino IDEが入っていなければインストールします。手順は「Arduino IDEのインストール方法」にあります。
2. ボードマネージャで「esp32」を検索し、Espressifのesp32パッケージをインストールします。このパッケージは3.xが必要です。古い2.xが入っている場合は更新してください。パッケージのインストールは「ESP32とは？」の記事にもあります。
3. データ通信用のUSBケーブルでボードをつなぎます。「ツール」>「ボード」でESP32 Dev Module（またはお使いのボードのモデル）を、「ツール」>「ポート」で新しく表示されたポートを選びます。ポートが表示されない場合はケーブルを替えてください。それでもだめなら、ボードのUSBチップに合わせてCP210xかCH340のドライバをインストールします。
4. ライブラリマネージャでBlueGraysIoTを検索し、「インストール」をクリックします。依存ライブラリについて聞かれたら「全てをインストール」を選びます。これでWebSockets、ArduinoJson、DHT sensor libraryも入ります。困ったときは「Arduinoにライブラリを追加する方法」を参考にしてください。
5. 新しいスケッチを開き、中身を消して、アプリからコピーしたコードを貼り付け、「書き込み」をクリックします。下の欄で「Connecting…」（接続中）のまま止まったら、ボードのBOOTボタンを押し続けます。書き込みのパーセント表示が出始めたらボタンを離します。
6. シリアルモニタを開き、速度を115200にします。まず「Wi-Fi connected」、数秒後に「BlueGrays IoT: connected」という行が表示されるはずです。

シリアルモニタに接続の表示が出ると同時に、スマホの「ボードを待っています」の画面が「接続しました：値がリアルタイムで届いています。」の画面に切り替わります。ライトのスイッチをタップしてみましょう。リレーのカチッという音が聞こえるか、LEDが点灯すれば成功です。2分以内にボードがつながらない場合、アプリは3つの確認を求めます。2.4 GHzのネットワークを選びましたか？シリアルモニタに「Wi-Fi connected」と出ていますか？パスワードの大文字と小文字は正しいですか？最初の行がまったく出ないなら、原因はWi-Fi側です。その場合は「ESP32がWi-Fiにつながらないとき」のチェックリストが役立ちます。

最初のコード：スマホでライトをオン・オフする

アプリが「リレーでライト」テンプレート用に用意するコードは、次のようなものです。冒頭の3行には、デバイスキー、ネットワーク名、パスワードが入った状態で届きます。ここではプレースホルダーで示しています。残りのコードは短く、リレーの関数が1つ、スイッチの定義が1つ、1行だけのloop()です。

1/*
2 * Salon lambası · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9
10// Uygulama bu üç satırı senin bilgilerinle doldurur / The app fills these three lines with your details
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20
21void setup() {
22  Serial.begin(115200);
23  pinMode(RELAY_PIN, OUTPUT);
24  setRelay(false);                  // açılışta lamba kapalı / lamp off at power-up
25  bg.onSwitch("lamba", setRelay);   // uygulamadaki "Lamba" anahtarı / the "Lamba" switch in the app
26  bg.setDebug(Serial);              // durum mesajları Seri Port Ekranı'na / status messages to the Serial Monitor
27  bg.setLanguage(BG_LANG_TR);
28  bg.begin(WIFI_NAME, WIFI_PASSWORD);
29}
30
31void loop() {
32  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
33}
34

センサーを追加する：ルームステーション（リレー＋DHT22）

次は同じボードにDHT22を追加して、スマホにデータを送ってみましょう。アプリで「ルームステーション」テンプレートを選ぶと、ライトのスイッチの横に温度（°C）と湿度（%）の値とグラフが表示されます。DHT22は-40〜80 °Cを約±0.5 °Cの精度で測れます。湿度は0〜100%の範囲で測定でき、読み取りは最短で2秒に1回です。データ端子をGPIO4に、VCCを3V3に、GNDをGNDにつなぎます。DHTシリーズのしくみは「DHT11温湿度センサー」の記事で比較しながら解説しています。

1/*
2 * Oda istasyonu · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9#include <DHT.h>
10
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20DHT dht(4, DHT22);                   // DHT22 veri ucu GPIO4 / DHT22 data on GPIO4
21unsigned long lastReadMs = 0;
22
23void setup() {
24  Serial.begin(115200);
25  pinMode(RELAY_PIN, OUTPUT);
26  setRelay(false);
27  bg.onSwitch("lamba", setRelay);
28  dht.begin();
29  bg.setDeadband("sicaklik", 0.1);   // 0,1 °C değişmeden gönderme / send only after a 0.1 °C change
30  bg.setDeadband("nem", 1.0);        // %1 değişmeden gönderme / send only after a 1 % change
31  bg.setDebug(Serial);
32  bg.setLanguage(BG_LANG_TR);
33  bg.begin(WIFI_NAME, WIFI_PASSWORD);
34}
35
36void loop() {
37  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
38  if (millis() - lastReadMs >= 2000) {  // DHT22 en fazla 2 saniyede bir okunur / DHT22 reads at most every 2 s
39    lastReadMs = millis();
40    bg.send("sicaklik", dht.readTemperature());
41    bg.send("nem", dht.readHumidity());
42  }
43}
44

リレーの部分は最初のコードと同じで、新しいのは3点です。1つ目はbg.send("sicaklik", dht.readTemperature())の行です。ボードからアプリに値を送り、最初の引数はアプリ側の変数名です（sicaklikはトルコ語で「温度」）。2つ目はbg.setDeadband("sicaklik", 0.1)の行です。最小の変化幅を決めるもので、温度は0.1 °C変わるまで再送されません。湿度の変化幅は1%です。3つ目はloop内のmillis() - lastReadMs >= 2000の判定です。センサーは2秒に1回読み取られますが、その間もbg.loop()は止まらずに回り続けます。ライブラリは値が変わったときだけ送り、プランの送信速度を超えません。同じ変数の送信間隔は、無料プランでは最低1秒、プレミアムでは最低0.2秒です。この制限はサーバー側で確認されるため、コードの数字を変えても超えられません。室温が何分も23.4 °Cのままならボードは新しい値を送らず、23.5 °Cになったときにメッセージが1回だけ送られます。ケーブルがゆるい、またはプルアップ抵抗がない場合、読み取りは無効（NaN）になります。値が届かないときは、まずGPIO4の配線と電源を確認してください。

スマホには何が表示される？

• 状態：デバイス画面の上部に「オンライン」または「オフライン」と表示され、その下に「最終データ：…前」が表示されます。ボードが本当につながっているかは、まずここで確認できます。
• コントロール：ライトのテンプレートではオン・オフのスイッチが表示されます。RGBテープのテンプレートではカラーピッカー、0〜100%の明るさ、エフェクトの選択が表示されます。カーテンのテンプレートには0〜180°の角度スライダーがあります。
• リアルタイムの値とグラフ：表示期間は1時間、24時間、7日、30日です。7日と30日の表示では1時間ごとの平均が表示されます。グラフには「最低」「最高」「最新」の値が表示されます。ボードがつながっている間は、毎分新しい点が追加されます。
• コードとキー：コード全体、デバイスキー、Wi-Fiの情報は後からここで確認できます。ボードを再度書き込む必要があれば、ここからコードをコピーします。
• キーを再発行：キーを誰かに見られたときや、ボードを交換したときに使います。古いキーはすぐに無効になり、新しいコードをボードに一度書き込むだけで済みます。
• デバイスを削除：デバイスとグラフの履歴が削除され、デバイスの登録枠が戻ります。

無料とプレミアム：どこまで使える？

最初のデバイスは無料です。ESP32を1台使ってライトのスイッチやルームステーションを作るなら、ほかに何も必要ありません。ルームステーションでは温度と湿度は別々の変数です。無料プランでは両方のリアルタイムの値がスマホに届きますが、グラフの履歴は1つの変数だけ保存されます。プランの違いは次のとおりです。詳しくは「BlueGraysプレミアムで使える機能」の記事をご覧ください。

ほかの方法との比較

正しい選択は目的次第です。インターネットがまったくない場所なら、BluetoothかローカルWebサーバーしかありません。BlueGrays IoT、Blynk、Arduino IoT Cloudは、ボードとスマホがインターネットにつながっている必要があります。画面をゼロからデザインしたい、Home Assistantと連携したいなど柔軟な構成を望むなら、「ESP32のMQTT」やクラウドのダッシュボードのほうが選択肢は広がります。BlueGrays IoTの既製テンプレートは8つです。その代わり、回路図、部品リスト、コード、スマホの画面が互いに合った状態でそろっています。学ぶ途中でミスをする可能性が減ります。

セキュリティ：キー、Wi-Fiのパスワード、コード

• デバイスキーはボードの身分証です。bgd_で始まるキーを知っている人は、あなたのボードになりすますことができます。スクリーンショットやフォーラム、メッセージのグループでキーを共有しないでください。
• Wi-Fiのパスワードはスマホに残ります。パスワードはサーバーに送られません。ネットワーク名は、後でコードを再表示できるようにデバイスと一緒に保存されます。ただし、ボードに書き込むコードの中にはパスワードが書かれています。
• コードを共有しないでください。アプリでも注意されるとおり、コードにはデバイスキーとWi-Fiのパスワードが入っています。助けを求めてフォーラムにコードを載せるときは、先にDEVICE_KEY、WIFI_NAME、WIFI_PASSWORDの行を削除してください。
• 接続は暗号化されています。ボードとサーバーの間の通信はポート443でTLSを使うため、同じネットワークにいる人でも命令を読み取れません。
• 不安なときはキーを再発行しましょう。「キーを再発行」ボタンで古いキーはすぐに無効になります。ボードを人に譲るときも、キーを再発行するかデバイスを削除してください。

よくあるトラブルと解決法

ESP32で作れるIoTプロジェクトのアイデア

• ライトのスイッチ：この記事の最初の回路の完成版はESP32 IoTライトスイッチ（リレー）プロジェクトにあります。回路図と部品リストも付いています。
• ルームステーション：リレーとDHT22を組み合わせ、温度のグラフ付きで：ESP32 IoTルームステーション（リレー＋DHT22）。
• 植物の水やり：土壌水分センサーをGPIO34（ADC1のピン）につなぎます。水分がスマホの「水やりのしきい値」スライダーを下回るとポンプが動き、しきい値より10ポイント上がると止まります。プロジェクトページ：ESP32 IoT植物の水やり（土壌水分センサー＋ポンプ）。センサーのキャリブレーションは「土壌水分センサー」の記事も参考にしてください。
• RGB LEDテープ：GPIO13につないだ30個のWS2812Bテープの色、明るさ、エフェクト（固定、虹、呼吸、点滅）をスマホで選べます：ESP32 IoT RGB LEDテープ（WS2812B）。30個のLEDは白色の全点灯で約1.8 Aを消費することがあるので、テープは別の5 V電源から給電してください。詳しくは「WS2812B NeoPixel」の記事をご覧ください。
• カーテンオープナー：GPIO18につないだSG90サーボを0〜180°のスライダーで回します：ESP32 IoTカーテンオープナー（SG90サーボ）。サーボも別の5 V電源から給電し、GNDを共通にしてください。
• ほかのテンプレート：ドアセンサー、人感カウンター、温度と湿度のプロジェクトはPico Wで解説しています。これらのテンプレートはアプリでESP32用にも選べます。

ボード、サーバー、スマホの間の道筋を一度作ってしまえば、新しいデバイスの追加は数分で終わります。まずライトのスイッチから始め、次にDHT22でデータがスマホに流れるのを確かめ、その後に水やりやカーテンのような大きなプロジェクトへ進みましょう。BlueGraysアプリでは、これらのESP32 IoTプロジェクトを回路図とコード付きでステップごとに確認できます。「見つける」のIoTプロジェクトの絞り込みを使ったり、プロジェクトページの「IoTデバイスとして設定」カードから同じ回路をそのままスマホにつないだりできます。