MIT App InventorでArduino制御用カスタムAndroidアプリを作成する

概要

このArduinoチュートリアルでは、MIT App Inventorオンラインアプリケーションを使用して、Arduinoを制御するカスタムAndroidアプリケーションの作り方を学びます。2つの例を扱います：LED制御とステッピングモータ制御。前回のチュートリアルでHC-05 Bluetoothモジュールを使ったArduino-スマホ間通信と、例1のArduinoコードはすでに解説済みです。詳細については、以下のビデオまたは文章チュートリアルをご覧ください。

Arduinoコード（おさらい）

シリアルポート経由でスマホからのデータを受信し、変数stateに格納。文字『0』受信でLED消灯し「LED: OFF」を返信、文字『1』受信でLED点灯し「LED: ON」を返信します。

/* Arduino and HC-05 Bluetooth Module Tutorial
 * by Dejan Nedelkovski, www.HowToMechatronics.com */
#define ledPin 7
int state = 0;

void setup() {
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  Serial.begin(38400);
}

void loop() {
  if (Serial.available() > 0) {
    state = Serial.read();
  }
  if (state == '0') {
    digitalWrite(ledPin, LOW);
    Serial.println("LED: OFF");
    state = 0;
  } else if (state == '1') {
    digitalWrite(ledPin, HIGH);
    Serial.println("LED: ON");
    state = 0;
  }
}

この『0』と『1』を送信し、Arduinoからの文字列を受信表示するAndroidアプリをMIT App Inventorで作成します。

MIT App Inventor

MIT App Inventorサイトで「Create apps!」をクリックし、Gmailアカウントでログイン。新規プロジェクトを作成します。デザイン画面は以下のようになります。

スマホとのリアルタイム接続

作成中にアプリの動作をスマホで確認するには、Play Storeから「MIT AI2 Companion」アプリをインストール。オンラインエディタの「Connect」メニューから「AI Companion」を選択し、表示されるバーコードをスキャンするかコードを入力します。

これでオンラインエディタでコンポーネントを配置すると、リアルタイムでスマホにも反映されます。スマホを使いたくない場合はPCにAndroidエミュレータをインストールして同様に使用可能です。

アプリ作成 - 例1: LED制御

レイアウト設計

「HorizontalArrangement」を複数配置し、高さ・幅・配置を調整
「ListPicker」を配置し、画像を設定 → Bluetoothデバイス選択用
「HorizontalArrangement」内に「Label」を配置、初期テキスト「Not Connected」→ 接続状態表示用
もう1つ「Label」でLED状態表示、初期「LED: OFF」
「Button」2つ：「Turn On」「Turn Off」
コンポーネント名をわかりやすく変更（後でブロックエディタで使用）
非表示コンポーネント：「BluetoothClient」「Clock」（接続状態リアルタイム更新用）

ブロックエディタ（ロジック構築）

左側に配置したコンポーネントに対応するブロックが並びます。

1. Bluetoothデバイスリスト表示

BluetoothList.BeforePickingブロックにset BluetoothList Elements toブロックを接続し、さらにBluetoothClient.AddressesAndNamesを接続。これによりListPickerクリック時にペアリング済みデバイス一覧が表示されます。

2. デバイス選択後の接続処理

BluetoothList.AfterPickingにcall BluetoothClient.Connect addressを接続し、引数にBluetoothList.Selectionを指定。選択したデバイスのアドレスに接続します。

3. 接続状態のリアルタイム表示

Clock.Timerイベント内で、BluetoothClient.IsConnectedを判定し、ConnectedLabel.Textを「Connected」または「Not Connected」に設定。

4. ボタン動作（LED制御）

TurnOn_Button.Click時：

BluetoothClient.Send1ByteNumberで数値49送信（ASCII『1』）
BluetoothClient.ReceiveTextでArduinoからの応答文字列を受信し、LED_Status.Label.Textに設定

TurnOff_Button.Click時：送信数値を48（ASCII『0』）に変更、それ以外は同じ。

アプリのビルドとインストール

「Build」メニューからAPKファイルをPCに保存して転送、またはQRコードで直接スマホにダウンロード可能。

MIT App Inventorプロジェクトファイル（.aia）ダウンロード

MIT App InventorでArduino制御用カスタムAndroidアプリを作成する BluetoothTest.aia (5.16 KB)

例2: ステッピングモータ制御

画面上部にBluetooth接続用コンポーネント（例1と同じ）。中央に「Canvas」コンポーネントを配置し、2枚の透過画像（ゲージ固定用、ポインタ回転用）を配置。下部に「CheckBox」（Manual/Auto切替）、「Button」（回転方向反転）、スライダー（回転速度調整）を配置。

ブロックエディタのポイント

Bluetooth接続ブロックは例1と共通
Canvasタッチ位置に合わせてポインタ画像を回転：ImageSprite.PointInDirectionでタッチ座標方向に回転、ヘディング値をラベル表示
10ms遅延のカスタムプロシージャ呼び出し後、ヘディング値をテキストとしてBluetoothClient.SendTextでArduino送信

CheckBox（Auto/Manualモード切替）

チェックON時：「Auto」送信 → Arduino側で連続回転モード突入
Autoモード中に「Reverse」ボタン押下：「Reverse」送信 → 回転方向反転
Autoモード中にスライダー変更：スライダー値送信 → 回転速度変更
チェックOFF時：「Manual」送信 → 手動モード復帰

ダウンロードファイル

MIT App InventorでArduino制御用カスタムAndroidアプリを作成する StepperMotorTest.aia (60.96 KB)
Stepper Motor Gauge and Pointer Images (27.34 KB)

Arduinoコード（ステッピングモータ制御側）

/* Stepper Motor Control via HC-05 Bluetooth Module
 * by Dejan Nedelkovski, www.HowToMechatronics.com */
const int stepPin = 7;
const int dirPin = 6;
String state = "";
int currentHeading = 0, currentAngle = 0, lastAngle = 0, angle = 0, rotate = 0;
int runContinuously = 0;
String mode = "Manual";
boolean dirRotation = HIGH;
int rotSpeed = 1500;

void setup() {
  pinMode(stepPin, OUTPUT);
  pinMode(dirPin, OUTPUT);
  Serial.begin(38400);
}

void loop() {
  delayMicroseconds(1);
  if (Serial.available() > 0) {
    state = Serial.readString();
  }

  // Autoモード
  if (mode == "Auto") {
    if (state == "Reverse") {
      delay(10);
      dirRotation = !dirRotation;
      digitalWrite(dirPin, dirRotation);
      delay(10);
      state = "";
    }
    rotSpeed = state.toInt();
    if (rotSpeed >= 300 && rotSpeed <= 3000) {
      digitalWrite(stepPin, HIGH); delayMicroseconds(rotSpeed);
      digitalWrite(stepPin, LOW); delayMicroseconds(rotSpeed);
    } else {
      digitalWrite(stepPin, HIGH); delayMicroseconds(1500);
      digitalWrite(stepPin, LOW); delayMicroseconds(1500);
    }
    if (state == "Manual") mode = state;
  }
  // Manualモード
  else if (mode == "Manual") {
    currentHeading = state.toInt();
    if (currentHeading < 0) currentHeading = 360 + currentHeading;
    currentAngle = map(currentHeading, 0, 359, 0, 200); // 200ステップ/回転想定
    digitalWrite(dirPin, HIGH);
    if (currentAngle != lastAngle) {
      if (currentAngle > lastAngle) {
        rotate = currentAngle - lastAngle;
        for (int x = 0; x < rotate; x++) {
          digitalWrite(stepPin, HIGH); delayMicroseconds(500);
          digitalWrite(stepPin, LOW); delayMicroseconds(500);
        }
      } else {
        rotate = lastAngle - currentAngle;
        digitalWrite(dirPin, LOW);
        for (int x = 0; x < rotate; x++) {
          digitalWrite(stepPin, HIGH); delayMicroseconds(500);
          digitalWrite(stepPin, LOW); delayMicroseconds(500);
        }
      }
    }
    lastAngle = currentAngle;
    if (state == "Auto") mode = state;
  }
}

以上でこのチュートリアルは終了です。ご質問はコメント欄でお気軽にどうぞ。