あっきーの教材工房 あっきーの教材工房
サイトバナー

目の動きでDropToneを演奏する🎹

公開日: 2026/06/09
タグ: iPad,アプリ解説,たっち＆びーぷ,DropTone,IoT
目の動きでDropToneを演奏する🎹

この記事でご紹介する内容は構成が少し複雑に見えるかもしれませんが、素早く設置できて動作の安定性も高く、私が実際に支援の現場で活用しているものです。

概要

目的

実現したいニーズはズバリこれです。

「目の動きで、楽器を演奏したい」

実際の様子

百聞は一見にしかずということで。
以下の動画は訪問カレッジの活動で合奏を楽しんでいるところです。
目をクルンと動かす動作で、DropToneのピアノを演奏しています。

システム構成

用意したもの
  • 『たっち＆びーぷ Connect』をインストールしたiPhoneかiPad
  • 『DropTone』をインストールしたiPad
  • iPhone固定用の三脚
  • 視線操作の受信機(AtomS3 Lite)
  • USB-Cのケーブル
  • 一緒に演奏するための楽器！
システム構成の概略

iPhoneは目の動きを捉えるために、iPadは音を鳴らすために使います。
その2台の繋ぎを、AtomS3 Liteが果たすという構成です。

iPhone → AtomS3 Lite は無線接続、
AtomS3 Lite → iPad は有線接続です。

iPadに有線接続することで、電源を考える必要がなくなります。
この有線接続のためにAtomS3 Liteというデバイスを選択しています。

この記事では自作のプログラムをAtomS3 Liteに書き込む方法を紹介していますが、アームワンダで有名なOGIMOテック開発室さんが、M3キューブマルチスイッチで同じことを実現できるようアップデートしてくださいました。
自分でプログラムを用意するのはちょっと…という方は、ぜひそちらをチェックしてみてください！

M3キューブマルチスイッチときょろきょろ操作で楽器演奏🎻 | あっきーの教材工房
M3キューブマルチスイッチと『たっち＆びーぷ Connect』のきょろきょろ操作を組み合わせて、DropToneで楽器演奏する方法を紹介しています。
favicon あっきーの教材工房
M3キューブマルチスイッチときょろきょろ操作で楽器演奏🎻 | あっきーの教材工房

動作の仕組み

  • iPhoneの『たっち＆びーぷ Connect』できょろきょろ操作を使用し、目の動きを捉える。
  • iPhoneの『たっち＆びーぷ Connect』はAtomS3 Liteと接続しておく。
  • 目を特定の方向に動かしたらiPhoneからAtomS3 Liteにコマンドが送られる。
  • AtomS3 Liteから有線接続したiPadにキーボードのキーコードが射出される。
  • iPadの『DropTone』がキーコードを受け取り、音が鳴る。

ポイント

『たっち＆びーぷ Connect』のきょろきょろ操作は、パソコンの視線入力に比べると設置と調整（キャリブレーション）が格段に楽です。
シンプルな活動であれば、画面内に限定して視線操作するより、操作者の負担も軽くなります。

AtomS3 Liteは2000円程度と激安なのも大事なポイント。
iPhoneやiPadが既にあるのであれば、ほんの数千円で準備できることになります。

AtomS3 Lite
超小型マイコンボード AtomS3 Lite

DropTone の設定

先にDropToneの画面を紹介します。

演奏したステージはこんな感じ。

動画で実際に使ったDropToneのステージ

また、以下のように動作を設定しておきます。

  • 演奏順を「配置順で指定」
  • 操作可能なサウンドパーツを「どこをタッチしても・・・」
DropToneの設定

これで、画面のどこかをタッチしたり、接続した外部スイッチを押したりするだけでコードを演奏できるようになりました。

AtomS3 Lite の準備

公式情報はこちら

半田付けのような作業は必要ありませんが、プログラムを書き込む必要があります。

プログラムを書き込むまでの流れ

Arduinoが初めて・・・という方にはややハードルが高いかもしれません。
概要としては以下のような流れです。

  1. Arduino IDEのインストール
  2. ボードマネージャーのインストール
  3. ライブラリのインストール
  4. プログラムの編集
  5. デバイスを接続してプログラムを流し込む

上記の2と3は公式ドキュメントを参考にしながら作業を進めてください。

M5Stackのボードマネージャーと、以下の二つのライブラリをインストールできればOKです。

  • M5AtomS3 by M5Stack
  • NimBLE-Arduino by h2zero

FastLEDというライブラリも必要ですが、Arduino IDEではM5AtomS3と一緒にインストールされるはずです。

プログラムの編集

以下、サンプルのプログラムです。

#include <M5AtomS3.h>
#include "USB.h"
#include "USBHIDKeyboard.h"
#include <NimBLEDevice.h>

USBHIDKeyboard Keyboard;

bool hasFired  = false;
bool sendKey = false;
bool isConnected = false;

/* ---------- UUID ---------- */
// 説明を簡単にするため、固定 UUID を使用しています。
// 実際のアプリケーションでは、独自に生成した UUID を使用してください。
// Webアプリでも生成できます⬇
// https://aki-ict.com/app/ble-uuid-generator/
const char* service_uuid = "00000001-0123-4567-1234-56789abcdef0";
const char* characteristic_uuid = "00000002-0123-4567-1234-56789abcdef0";

/* ---------- デバイス名 ---------- */
// ここでデバイス名を指定します。任意です。
// アプリ『たっち＆びーぷ Connect』側からはこの名称で検索できます。
const char* device_name = "ATOM-S3-Key";

/* ---------- ワンショット動作 ---------- */
// ワンショット動作の有無を設定できます
const bool isOneShot = false;

/* ---------- 送信したいキーコード ---------- */
// 使いたいキーのコメントを外してください（それ以外はコメントアウト）
// const uint8_t targetKey = KEY_LEFT_ARROW; // 左矢印キー
// const uint8_t targetKey = KEY_RIGHT_ARROW; // 右矢印キー
const uint8_t targetKey = KEY_SPACE; // スペースキー
// const uint8_t targetKey = KEY_RETURN; // エンターキー


/* ---------- BLE ---------- */

class ServerCallbacks : public NimBLEServerCallbacks {
  void onConnect(NimBLEServer *pServer, NimBLEConnInfo &connInfo) {
    isConnected = true;
    Keyboard.releaseAll();
    AtomS3.dis.drawpix(CRGB::Blue); // 接続時に青色に点灯
  }

  void onDisconnect(NimBLEServer *pServer, NimBLEConnInfo &connInfo, int reason) {
    isConnected = false;
    NimBLEDevice::startAdvertising();
  }
};

class WriteCallback : public NimBLECharacteristicCallbacks {
  void onWrite(NimBLECharacteristic *pChar, NimBLEConnInfo &connInfo) override {
    std::string value = pChar->getValue();

    if (value.length() > 0)
    {
      uint8_t cmd = value[0];

    // ここで指定したコマンドをアプリ『たっち＆びーぷ Connect』側で指定（Hexモード）
      if (cmd == 0x01) // 01というコマンドを受信した場合
      {
        sendKey = true;
      }
      else // その他のコマンドを受信した場合
      {
        sendKey = false;
      }
    }
  }
};

/* ---------- setup ---------- */

void setup() {
  AtomS3.begin(true);
  AtomS3.dis.clear();

  /* USB HID */
  Keyboard.begin();
  USB.begin();

  /* NimBLE */
  NimBLEDevice::init(device_name);

  NimBLEServer *server = NimBLEDevice::createServer();
  server->setCallbacks(new ServerCallbacks());

  NimBLEService *service = server->createService(service_uuid);

  NimBLECharacteristic *ch = service->createCharacteristic(
    characteristic_uuid,
    NIMBLE_PROPERTY::WRITE | NIMBLE_PROPERTY::WRITE_NR
  );
  ch->setCallbacks(new WriteCallback());

  service->start();

  NimBLEAdvertising *adv = NimBLEDevice::getAdvertising();
  adv->addServiceUUID(service_uuid);
  adv->enableScanResponse(true);
  adv->setName(device_name);
  adv->start();
}

/* ---------- loop ---------- */

void loop() {
  AtomS3.update();

  if (!isConnected) {
    /* BLE接続待機中 */

    /* 本体ボタン */
    if (AtomS3.BtnA.wasPressed()) {
      if (isOneShot) {
        if (!hasFired) {
          Keyboard.write(targetKey);
          hasFired = true;
        }
      } else {
        Keyboard.press(targetKey);
      }
    }
    if (AtomS3.BtnA.wasReleased()) {
      Keyboard.releaseAll();
      hasFired = false;
    }

    // 接続待機中は黄色点滅
    uint32_t now = millis();
    if (now % 1000 < 500) {
      AtomS3.dis.drawpix(CRGB::Yellow);
    } else {
      AtomS3.dis.clear();
    }
  } else {
    /* BLE接続中 */

    /* キー送信 */
    if (sendKey) {
      if (isOneShot) {
        if (!hasFired) {
          Keyboard.write(targetKey);
          hasFired = true;
        }
      } else {
        Keyboard.press(targetKey);
      }
      AtomS3.dis.drawpix(CRGB::Red);
    }else{
      Keyboard.releaseAll();
      hasFired = false;
      AtomS3.dis.clear();
    }
  }
}

詳しくはコード内のコメントをご確認ください。

  • UUIDやデバイス名は任意のものに変えてください。趣味・実験用途でしたらこのままでも差し支えないと思います。
  • 途中の if (cmd == 0x01) の部分が大事です。「0x」の後の数字がアプリ側から送信されるコマンドとなります。
  • 詳しく知りたい方は生成AIに聞いてください！

デバイスを接続してプログラムを流し込む

デバイス（AtomS3 Lite）とパソコンをUSBケーブルで接続し、プログラムを送ります。

ポートを選択してアップロード、という流れです。
一つ注意点は、USBケーブルで接続した後に、AtomS3 Liteの側面にあるボタンを長押ししてから書き込む、という手順があることです。

公式ドキュメントに写真付きの説明もあるので事前にご確認ください。
側面ボタン長押しで「ダウンロードモード」にしてからプログラムを書き込むべし、ということのようですね。
アップロードなのかダウンロードなのか少し分かりづらいですが、細かいところはあまり気にせず、「長押ししてから書き込み」と覚えておきましょう。

たっち＆びーぷ Connect の設定と接続

たっち＆びーぷ Connectの画面

たっち＆びーぷ Connectでは、ピンクのアクセシビリティ、グリーンのフィードバック、ブルーの外部デバイスをそれぞれ設定して使います。

アクセシビリティ設定

目を動かしたときに再生 をオンにします。

フィードバック設定

フィードバック形式をタイマーに設定し、1秒ほどに調整します。

この時間が、DropToneの音を鳴らす長さになります。

外部デバイス設定

① 周辺のデバイスのスキャンする

[Connect]セクションの外部デバイス設定を開きます。

[その他のBLEデバイスに接続] - [周辺のデバイスを探す] と操作していくと、近くにあるBLEデバイスの一覧が表示されます。

ATOM-S3-Key という名称（Arduinoのプログラム内で指定した名称）のデバイスを探してください。

② 接続してサービス/キャラクタリスティックを選択する

デバイス名をタップして接続が成功すると、次の画面に遷移します。

Arduinoのプログラム内で指定した SERVICE_UUID と CHARACTERISTIC_UUID が記されているはず。
[Select]ボタンをタップしてください。

③ 送信するコマンドを設定する

AtomS3 Liteに送信するコマンドを編集します。
設定内容は以下の通りです。

Aコマンド

// Hexモード
01
// 1 でもOK
// Arduinoのプログラムで指定したコマンド

Bコマンド

// Hexモード
00
// 今回は01以外ならなんでもOK

TextからHexに切り替えるのをお忘れなく！

一度接続したデバイスは設定内容ごと履歴に残るので、次からは履歴から選ぶと簡単に接続できます。

まとめ

ここまで長かったですが、これで準備は完了です！

AtomS3 Liteの準備が少し重めかもしれませんが、一度プログラムを作ってしまえば何度でも使えます。
今回のプログラムでは右矢印キーにしてあるので、写真やスライドのページめくりにも応用できます。

難しいと感じる場合には強力な味方、M3キューブマルチスイッチがありますのでご安心を。

ぜひ、トライしてみてください。

同じようなシステムで家電やおもちゃを操作することも。

目の動きでミシンを操作しています

こちらの記事でデバイスの自作方法を紹介しています。

たっち＆びーぷとAtom LiteでiPad/iPhoneをスイッチ化🕹️ | あっきーの教材工房
『たっち＆びーぷ Connect』とAtom LiteをBluetooth接続し、iPad/iPhoneをスイッチとしておもちゃなどを操作する方法を紹介しています。
favicon あっきーの教材工房
たっち＆びーぷとAtom LiteでiPad/iPhoneをスイッチ化🕹️ | あっきーの教材工房
たっち＆びーぷ Connect | あっきーの教材工房
画面タッチで音を鳴らせるアプリです。タッチ以外にも様々な入力方法に対応しています。
favicon あっきーの教材工房
たっち＆びーぷ Connect | あっきーの教材工房
タグ: iPad,アプリ解説,たっち＆びーぷ,DropTone,IoT