Arduino App Labのプロジェクト概要（センサ値を Web UI に表示する例）

Arduino UNO QのArduino App Labの基本的な使い方をあらためて確認した後、センサ値を Web UI に表示する例について調査を行ったので紹介する。

（注）本記事の内容は正確性を保証するものではない。

（2026年1月1日 追記）YouTube動画を追加しました。　https://youtu.be/ykONUWctQlU

Arduino App Lab の基本的な使い方チュートリアル

ChatGPT 5.2の回答

以下は、Arduino UNO Q と Arduino App Lab の基本的な使い方チュートリアルを、初めて触る方向けに整理したものです。
（UNO Q 実機をUSB接続している前提で説明します）

---

■ 対象と前提

• 対象ボード：Arduino UNO Q
• 開発環境：Arduino App Lab
• OS：Windows / macOS / Linux
• 接続：USB（電源＋通信）

1️⃣ Arduino App Lab をインストールする

手順

1. Arduino公式サイトから Arduino App Lab をダウンロード
2. OSに応じてインストール
3. 起動すると、UNO Q 接続待ち画面が表示される

⚠️ 注意

• App Lab は UNO Q が接続されていないと起動できない仕様です
• USB給電のみでもOK（外部電源は不要）

2️⃣ UNO Q を接続して初期セットアップ

初回接続時の流れ

1. UNO Q を USB ケーブルでPCに接続
2. App Lab が自動的にボードを検出
3. Linux（Debian）環境の初期セットアップが走る
4. 完了後、プロジェクト選択画面に移行

ここまでで
✅ Linux側（高機能処理）
✅ MCU側（リアルタイム制御）
の両方が使える状態になります。

3️⃣ 新しいプロジェクトを作成する

操作

1. New Project を選択
2. テンプレートを選ぶ（例）
   • Basic App（最小構成）
   • Sensor + UI
   • AI / Vision 系テンプレート
3. プロジェクト名を入力

プロジェクト構成（重要）

project/
 ├─ app.py        ← Linux側（Python）
 ├─ sketch.ino    ← MCU側（Arduino）
 ├─ bricks/       ← Bricks（拡張機能）
 └─ config.yaml

👉 App Lab 最大の特徴
Python と Arduino スケッチを 1つのプロジェクトで同時に管理します。

4️⃣ MCU側（Arduinoスケッチ）を書く

例：LEDを点滅させる

void setup() {
  pinMode(13, OUTPUT);
}

void loop() {
  digitalWrite(13, HIGH);
  delay(500);
  digitalWrite(13, LOW);
  delay(500);
}

• 通常の Arduino IDE とほぼ同じ書き方
• リアルタイム性が必要な処理はこちらに書く

5️⃣ Linux側（Python）を書く

例：起動ログを出す

def setup():
    print("UNO Q App started")

def loop():
    pass

Linux側でできること

• ネットワーク通信（HTTP / MQTT）
• AIモデル推論
• Web UI表示
• ファイル処理（SD / eMMC）

👉 重たい処理は Python 側に逃がすのが基本設計です。

6️⃣ Bricks（ブリックス）を使う

Bricksとは？

• App Lab 専用の 機能モジュール
• Python で簡単に追加可能

例：センサ Brick を使う（概念）

from bricks.sensor import Temperature

temp = Temperature()

def loop():
    print(temp.read())

よく使われる Brick

• センサ系（温度・加速度など）
• 通信系（Wi-Fi / API）
• AI系（音声・画像）

7️⃣ 実行・デプロイする

実行方法

1. Run / Deploy ボタンをクリック
2. Linux側アプリが UNO Q に転送・起動
3. MCUスケッチも同時に書き込み

実行中は：

• Python のログ → App Lab コンソール
• Arduino の挙動 → 実機で確認

8️⃣ よくある最初のつまずき

症状	対処
App Lab が起動しない	UNO Q が接続されているか確認
認識しない	USBケーブル変更・電源不足確認
スケッチが反映されない	Deploy を再実行
Pythonが動かない	config.yaml の設定確認

まとめ（使い方の考え方）

Arduino App Lab の基本思想

• 🧠 複雑な処理 → Linux + Python
• ⚡ 正確な制御 → MCU + Arduino
• 🧩 機能追加 → Bricks

UNO Q は

「Arduino + Raspberry Pi 的なことを、公式に一体化したボード」
と考えると理解しやすいです。

次のステップとしておすすめできる内容は：

• センサ値を Web UI に表示する例
• MCU ↔ Python のデータ連携方法
• AI Brick を使った簡単なデモ

どこまで知りたいかに合わせて、続きも整理できます。

最小例：温度（ダミー値）を Web UI にリアルタイム表示

ChatGPT 5.2の回答

以下は、Arduino UNO Q の Arduino App Lab で「センサ値を Web UI に表示する」ための、基本チュートリアル＋最小サンプルです（WebUI – HTML / web_ui brick前提）。
Web UI は UNO Q のIPアドレス + ポート7000 で開きます。 (Edge Impulse Documentation)

App Lab / WebUI の基本（何がどう動くか）

App Lab のアプリはざっくり次の3要素で構成されます。

1. app.yaml

• 使う Brick（例：arduino:web_ui）を宣言します（Brick＝機能パッケージ）。 (Edge Impulse Documentation)

2. python/main.py（Linux側で動く）

• WebUI() を起動し、
  • WebSocket（socket.io）で UI に push（リアルタイム表示）
  • REST API を expose_api で公開（履歴取得など）
    ができます。 (Arduino Project Hub)

3. sketch（.ino）（UNO Q のMCU側で動く）

• センサを読み、Bridge.notify(...) で Linux 側へ値を送れます。 (Arduino Project Hub)

事前準備) app.yaml（Brick を追加）

arduino:web_ui が入っていればOKです（App Lab のGUIで WebUI – HTML Brick を追加してもOK）。
※Edge Impulseのガイドでも、WebUI Brick 追加＆ assets をコピーして使う流れが説明されています。 (Edge Impulse Documentation)

例（イメージ）：

bricks:
  - arduino:web_ui: {}

1) sketch（MCU側）：1秒ごとに値を送る

#include <Arduino_RouterBridge.h>

float t = 20.0;

void setup() {
  Bridge.begin();
}

void loop() {
  t += 0.1; // ダミー温度
  Bridge.notify("on_samples", t);
  delay(1000);
}

Bridge.notify("on_samples", t) の “on_samples” が、次の Python 側で受ける「関数名キー」になります。 (Arduino Project Hub)

2、3) python/main.py（Linux側）：受信→UIへpush

import datetime
from arduino.app_utils import App, Bridge
from arduino.app_bricks.web_ui import WebUI

ui = WebUI()

def on_samples(temp_c: float):
    ts = int(datetime.datetime.now().timestamp() * 1000)
    # イベント名 "temperature" で UI 側へ push
    ui.send_message("temperature", {"value": float(temp_c), "ts": ts})

# MCU からの notify を受けるコールバック登録
Bridge.provide("on_samples", on_samples)

App.run()

• Bridge.provide("on_samples", on_samples) で、MCU から Bridge.notify("on_samples", ...) されたデータを受けます。 (Arduino Project Hub)
• ui.send_message(...) で Web UI にリアルタイム配信できます。 (Arduino Project Hub)

4) assets/index.html（UI側）：表示枠＋JS読み込み

WebUI の例では socket.io を assets/libs/socket.io.min.js から読み、app.js で購読します。 (Arduino Forum)

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>UNO Q Sensor</title>
</head>
<body>
  <h1>Temperature</h1>
  <div>
    <span id="temp">--</span> °C
  </div>
  <div>
    <small id="ts">--</small>
  </div>

  <script src="libs/socket.io.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

5) assets/app.js（UI側）：イベント購読→DOM更新

send_message("temperature", ...) と同名のイベント "temperature" を購読します。
（フォーラム例でも socket.on("Temperatura", ...) のようにイベント名で受けています。） (Arduino Forum)

const socket = io(`http://${window.location.host}`);

const tempEl = document.getElementById("temp");
const tsEl = document.getElementById("ts");

socket.on("temperature", (data) => {
  tempEl.textContent = data.value?.toFixed?.(1) ?? data.value;
  if (data.ts) tsEl.textContent = new Date(data.ts).toLocaleString();
});

動作確認の手順（最短）

1. App Lab でアプリ作成 → WebUI – HTML Brick（web_ui） を追加 (Edge Impulse Documentation)
2. 上の sketch / python/main.py / assets を配置
3. アプリ起動
4. PCやスマホのブラウザで http://<UNOQのIP>:7000/ を開く (Edge Impulse Documentation)

発展：APIで履歴を返す（expose_api）

WebUI brick は API を公開できます。たとえば Weather Station 例では ui.expose_api("GET", "/get_samples/{...}", ...) の形で履歴取得 API を作っています。 (Arduino Project Hub)
リアルタイムは send_message、履歴は expose_api で分けるのが分かりやすいです。

温度を Web UI にリアルタイム表示するという簡単なプロジェクトでも、複数分野の知識が必要なので、AIに聞きながらでないと進まないが、センサ入力からブラウザ表示までの一連の処理を学べるので、装置全体の最適化に関する設計の知見なども得られそうだ。