iOS/AndroidアプリからWi-Fi/イーサネットでArduinoのLEDを制御 – Evothings Studio活用

必要な部品と材料

Arduino UNO × 1

Wi-Fiシールド (CC3000, ESP8266搭載等) または イーサネットシールド (W5100/W5500) × 1

LED (お好みの色) × 1

抵抗 200Ω〜330Ω × 1

ブレッドボード、ジャンパーワイヤー × 1式

必要なソフトウェア

• Arduino IDE (公式サイト)
• Evothings Studio (公式サイト) – デスクトップアプリ (Win/Mac/Linux)
• Evothings Viewer アプリ (iOS App Store / Google Play Store で「Evothings Viewer」検索)

プロジェクト概要

Evothings Studio を使って、スマートフォンアプリ (HTML5/JavaScript) から Arduino の LED を Wi-Fi またはイーサネット経由で ON/OFF 制御するデモです。TCPソケット通信で Arduino とアプリが直接やり取りします。同じ LAN 内であれば Wi-Fiシールド使用時は直接通信、イーサネットシールド使用時は Wi-Fi ルーター経由でスマホと通信します。

ハードウェア接続

LED アノード (長い足) → 抵抗 200Ω → Arduino デジタルピン 2
LED カソード (短い足) → GND

※ シールドは Arduino にスタックするだけ。別途配線不要。

Arduino スケッチ準備

1. Evothings Studio インストール後、例題フォルダからスケッチをコピー:
   • Wi-Fiシールドの場合: examples/arduino-input-tcp/arduinowifi/
   • イーサネットシールドの場合: examples/arduino-input-tcp/arduinoethernet/
2. Wi-Fi版の場合、スケッチ内の SSID とパスワードを自分の環境に書き換え (約62行目、66行目)
3. Arduino IDE でスケッチを書き込み
4. シリアルモニター (115200bps) を開き、割り当てられた IPアドレス をメモ (例: 192.168.1.42)

Evothings Studio でアプリ作成・実行

1. Evothings Studio 起動
2. Examples タブ → Arduino TCP Blink を探す → Copy ボタンで My Apps にコピー
3. 自動的に My Apps タブに切り替わる
4. コピーしたアプリの Code ボタンを押してファイル構成確認:
   • index.html: UI構造、IPアドレス入力欄、ボタン等
   • arduinotcp.js: TCP通信ロジック、コマンド送信関数等
5. Pro Tip: index.html のデフォルトIPアドレス (52行目付近) を Arduino の IP に書き換えて保存 → スマホで手入力不要に
6. PCとスマホを 同じWi-Fiネットワーク に接続
7. Evothings Viewer アプリをスマホで起動
8. Evothings Studio の Connect タブで表示される QRコードをスマホでスキャン、または手動でPCのIP:ポート入力して接続
9. My Apps のアプリの Run ボタンをクリック → スマホの Viewer にアプリが配信される
10. アプリ画面で IPアドレス確認/入力 → Connect ボタン → ON/OFF ボタンで LED 制御！

通信プロトコル (簡易)

• TCP ポート: 通常 80 またはスケッチで指定したポート
• コマンド形式: 単純なテキストコマンド (例: LED=1\n, LED=0\n)
• Arduino側: EthernetClient / WiFiClient で受信、パース、GPIO制御

自動リロード (開発中に超便利)

Evothings Studio で HTML/JS ファイルを編集して保存するたびに、接続中の Evothings Viewer アプリに自動でコードがプッシュされ、即座に反映されます。コンパイル・署名・アップロードの手間なし！

発展・応用アイデア

• アナログ入力読み取り (センサー値をアプリにグラフ表示) – arduinotcp.js に関数あり
• PWM出力で LED 明るさスライダー制御
• 複数デバイス同時制御 (ルームライト、ファン、カーテン等)
• センサー閾値超えでプッシュ通知 (アプリ側で実装)
• MQTT/WebSocket に移行でより堅牢な IoT システムへ
• ESP8266/ESP32 単体で実装 (Arduino + シールド不要、コスト削減)

トラブルシューティング

症状	確認事項
アプリから接続できない	PCとスマホが同一LANか、ファイアウォールでTCPポート遮断されてないか、Arduino IP正しいか
LEDが動かない	スケッチのピン番号と配線一致か、シリアルモニターでコマンド受信ログ確認
Wi-Fiシールドが繋がらない	SSID/パスワード正しいか、2.4GHz帯か (5GHz非対応多し)、電源容量足りてるか
Evothings ViewerでQRコード読めない	PCのIPアドレス手動入力 (StudioのConnectタブに表示)

Evothings Studio のメリット

• Web技術 (HTML/CSS/JS) でネイティブ風アプリ開発可能
• Cordova/PhoneGapベースで iOS/Android/デスクトップにエクスポート可能
• 豊富な Arduino/BLE/IoT デバイス向けテンプレート付属
• ライブリロードで開発サイクル高速化

ダウンロード

Evothings Studio: https://evothings.com/download