Unityを使ってスマホからLEDを点滅させてみた

Shota Ueno

2024年8月18日 01:07

〈生成AI / 3Dプリンター / XR〉を趣味でいじっているただの大学生です。

今回は、Unityを使って、スマホからLEDをON/OFFできる仕組みを制作したので、実装方法をまとめてみました！

自分自身、コードは書けないし、Unityも超初心者ですが、Chat GPTを使って何とか実装できたので、同じような仕組みを作りたい方は、ぜひこの記事を参考に格闘してみてください🔥

【開発環境】
デバイス：Mac Book Pro 14インチ（M1 Pro）
macOS：Sonoma 14.5
Unity バージョン：2022.3.42f1

1.使用機材

今回、この仕組みを実装するにあたって、使用した機材をざっくりまとめます。購入した商品のリンクを載せておきますが、もう少し賢い買い方はあると思います。

ESP32-WROOM ボード

1つあれば十分ですが、複数使用予定であったため、こちらを購入しました。ESP32の中にも、いろいろなボードがあるみたいなので、購入する際は気をつけてください。

ELEGOO Arduino用UNO R3スターターキット

家にあったためこちらを使用しましたが、実際に使用したのは、LED1つ、ブレッドボード1つ、ジャンパーワイヤー2つ、220Ωの抵抗だけです。

2.回路設計

回路に関しても、完全に知識ゼロなので詳しい説明は避けますが、写真の通りに実装すると、上手くいきました！！

また、この配線は、以下のYoutube動画を参考にしたので、そちらを見ていただいても問題ないです。

注意点としては、LEDのアノード（プラス）とカソード（マイナス）を間違えないようにしてください。GNDに繋がっている方をカソード（短い方）、2に繋がっている方をアソード（長い方）にしてください。

3.ESP32での実装

まずは、ESP32での実装についてです。
今回の実装の方針としては、ESP32でhttpのWebサーバーをつくり、Unityで実装したアプリからLEDに指示が送られると、LEDがON/OFFされるというものです。（あまり詳しくないので、表現に誤りがあったらごめんなさい。）

①Arduino IDEをダウンロードする
以下のリンクから、自分の開発環境にあったものをダウンロードしてください。寄付をしますか？という画面が出ますが、気にせず"JUST DOWNLOAD"を選択してください。

②ESP32をArduino IDEで使う為のライブラリをインストールする

まず、Arduino IDE→基本設定を選択して、下記の画像と同様の設定に変更してください。

特に、追加のボードマネージョのURLに下記のリンクを追加することを忘れないでください。

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

ESP32でLチカする

基本設定の変更後、最初の画面に戻り、左側の欄からボードマネージャーを選択して、"ESP32"と検索、"esp32 by Espressif"をダウンロードしてください。

③ESP32をPCに接続して設定を行う

一番上の緑色の箇所にある、「ESP32 Wrover Module 🔽」と書かれている箇所を選択してください。すると、"他のボードとポートを選択"、と出てくるはずなので、さらに選択してください。

ボード「ESP32 Wrover Module」、ポート「Serial Port (USB)」に変更

上記のような画面が出てきたら、ボードを「ESP32 Wrover Module」、ポートを「Serial Port (USB)」に変更し、OKを選択してください。

その後、ツールを選択し、Upload Speedの欄が初期設定で"921600"となっているはずなので、"115200"に変更してください。（この変更を忘れると、ESP32にコードを書き込む際、エラーが発生します。）

④ESP32にコードを追加していく

コードを追加していく前に、一番右上のシリアルモニタという箇所を選択して、シリアルモニタを表示させましょう。また、"改行なし"、"115200 baud"になっているかも必ず確認しましょう。

ここまで出来たら、以下のコードをそのままコピペしてください。ただし、"yourssid"と"yourpassword"と記載されている箇所には、必ず、今回操作に使用する端末が接続されているWi-FiのIDとパスワードに変更してください。注意点として、2.4GHz帯のWi-FiでしかESP32がネットワークに接続されなかったので、5.0GHz帯は使用しないようにしてください。

#include <WiFi.h>
#include <WebServer.h>

const char* ssid     = "yourssid"; // 自分のSSIDに書き換える
const char* password = "yourpassword"; // 自分のパスワードに書き換える

WebServer server(80);
String target = "LED OFF"; // 初期状態をオフに設定
const int ledPin = 2; // LEDの接続ピン（GPIO2）

void setup() {

  // シリアルコンソールのセットアップ
  Serial.begin(115200);
  delay(10);
  Serial.println();
  
  // WiFiに接続
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println();
  Serial.println("WiFi connected.");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  // LEDピンを出力モードに設定
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW); // 初期状態でLEDをオフに設定

  // アクセスされた際に行う関数を登録する
  server.on("/led", HTTP_ANY, [](){
    if (server.method() == HTTP_POST) { // POSTメソッドでアクセスされた場合
      target = server.arg("plain"); // server.arg("plain")でリクエストボディが取れる。targetに格納
      if (target == "LED ON") {
        digitalWrite(ledPin, HIGH); // LEDをオンにする
      } else if (target == "LED OFF") {
        digitalWrite(ledPin, LOW); // LEDをオフにする
      }
    }
    server.send(200, "text/plain", target); // 値をクライアントに返す
  });

  // 登録されてないパスにアクセスがあった場合
  server.onNotFound([](){
    server.send(404, "text/plain", "Not Found."); // 404を返す
  });

  server.begin();
}

void loop() {
  server.handleClient();
}

コードの修正を行い書き込みの準備ができたら、左上の➡️のアイコンの書き込みボタンをクリックして、ESP32にコードを書き込んでください。（書き込みには、3分ぐらいかかります）

書き込み完了後、シリアルモニタをチェックすると、"WiFi connected"と表示されていれば、基本的には、上手くいっていると思ってもらって大丈夫です。

またここで、IP address:に表示される数値を確認することを忘れないようにしてください。この数字は、Unityでコードを編集する際に使用します。

4.Unityでの実装

次に、Unityでの実装です。
今回は、キューブをクリックするとLEDをON/OFFできるように設定しましたが、ボタンでも、何でもコードがあれば設定できると思います。

①Unityをダウンロードする

上記のサイトからUnity Hubをダウンロードした後、Install Editorから最新のバージョンのUnityをダウンロードしてください。今回は、Unity(2022.3.42f1)のバージョンを使用しています。

②プロジェクトの設定
ダウンロード後、New projectを選択し、3D(Built-in Render Pipeline)から、新規プロジェクトを作成してください。

新規プロジェクトが作成できたら、今回はiOSにビルドするため、File→Build Settingsを選択し、PlatformをiOSに変更するようにしてください。

また、Platformを変更する際、Development Buildを必ずチェックするようにしてから、Switch Platformを選択してください。

次に、Edit→Project Settingsを選択、PlayerのiOSの設定から、"Allow downloads over HTTP*"の項目を見つけ出し、初期設定の"Not allowed"から、"Allowed in development builds"に変更してください。

③キューブの追加

一番左側のSampleSceneで右クリック、3D Object→Cubeを選択すると画面にキューブが出現します。

必要に応じて、一番右側のTransformと書かれた箇所の数値（X, Y, Z）をいじることで、スケールなどを変更してください。

④コードの追加

一番下のAssetsと書かれた場所で右クリックを選択、Create→C# Scriptを選択してください。

Assetsにスクリプトファイルが追加されるので、適当に"ON/OFF"など名前をつけてください。また、このファイルをダブルクリックすると、
Visual Studio Codeなどのコードエディタが開き、以下のような画面が表示されます。（コードエディタをダウンロードしていない場合は、Visual Studio Codeなどを必ずダウンロードしてください。）

ここまできたら、以下のコードのIPAddressという箇所の数値部分を、先ほど、Arduino IDEのシリアルモニタで確認した、IPアドレスに変更して、コピペ後、ファイルを保存してください。

using UnityEngine;
using System.Collections;
using UnityEngine.Networking;

public class CubeController : MonoBehaviour
{
    private string esp32IPAddress = "192.168.1.100"; // ESP32の固定IPアドレス
    private bool isLedOn = false;

    void OnMouseDown()
    {
        isLedOn = !isLedOn;
        StartCoroutine(SendPostRequest(isLedOn ? "LED ON" : "LED OFF"));
    }

    IEnumerator SendPostRequest(string ledState)
    {
        string url = "http://" + esp32IPAddress + "/led";
        UnityWebRequest www = new UnityWebRequest(url, "POST");
        byte[] bodyRaw = System.Text.Encoding.UTF8.GetBytes(ledState);
        www.uploadHandler = new UploadHandlerRaw(bodyRaw);
        www.downloadHandler = new DownloadHandlerBuffer();
        www.SetRequestHeader("Content-Type", "text/plain");

        Debug.Log("Sending POST request to: " + url + " with body: " + ledState);
        yield return www.SendWebRequest();

        if (www.result != UnityWebRequest.Result.Success)
        {
            Debug.LogError("POST request failed: " + www.error);
        }
        else
        {
            Debug.Log("POST request successful: " + www.downloadHandler.text);
        }
    }
}

Unityの画面に戻り、このファイルを先ほど制作したCubeにドラックアンドドロップします。

すると、一番右側の欄に、Cube Controller(Script)が追加され、先ほどのファイルが参照されているはずなので、必ず確認してください。

あとは、先ほど使用した、File→Building SettingsからBuildを行い、書き出されたXcodeのファイルをお手持ちのスマホなどにビルドすれば実装完了です。アプリを使用する際は、必ずESP32と同じWiFiに接続するようにしてください。

また、iOSへのビルド方法は、ここで説明すると長くなってしまうので、以下の動画を参考に行ってみてください。

5.完成品

以上の実装を行うと、画面に表示されたキューブをタップすることで、LEDをつけたり、消したりできるようになります💡

このようにして、ESP32やUnityの知識ほぼゼロの初心者ながら、Chat GPTを駆使して、何とか作りたいものを実装することが出来ました！

Chat GPTと格闘している様子は、以下のリンクから見られるようにしておきます。（かなりぐちゃぐちゃしていること、ご了承ください）

Chat GPT会話ログ②

Chat GPT会話ログ③

※1個目のログのみ画像生成を行なってしまったため、共有ができませんでした。また、Chat GPTの他に、Claude 3.5なども並行して使用していました。

この記事が気に入ったらサポートをしてみませんか？