OpenAIExpo2025/10/30 13:00

Building a MIDI-over-Bluetooth app using Expo Modules

要点だけを先に読めるように短く再構成したセクションです。

元記事

Quick Digest

要約

要点だけを先に読めるように短く再構成したセクションです。

openaijamodel: gpt-5-mini-2025-08-07

Expo ModulesでMIDI-over-Bluetooth対応アプリを構築

Key Points

  • Expo ModulesでネイティブMIDIを追加
  • iOSでPoC→AndroidでAPI整合
  • 実機でMIDIコマンドを徹底検証

Summary

Chase Bliss用のプリセット管理アプリをExpoで構築し、カスタムExpo ModuleでMIDI-over-Bluetoothを実装しました。iOSでのPoCを作成してからAndroidに機能を揃え、実機(WIDI Jack+ペダル)で動作確認。React Native側はReanimated/Skia/Gesture Handlerで高性能なUIを実現し、Expoプラグインでネイティブ差分を管理しています。

Key Points

  • Expo Modulesでネイティブ機能を追加することで、iOS/Android両対応のままネイティブMIDI機能を実装可能。
  • ワークフロー: iOSでPoC → 同名関数・同等挙動でAndroid実装 → 実機でMIDIコマンドを検証。
  • GitHub Copilotを補助ツールとして活用し実装効率を向上させたが、手動での検証と調整は必須。
  • expoプラグイン/カスタムモジュールでネイティブパッチを管理し、ネイティブフォルダを削除しても再現可能な構成にする。
  • リアルタイム挙動はReanimatedの値にバインドしてパフォーマンスを確保(JSスレッド負荷時も考慮)。
  • リリース前にMIDIコマンド全パターンのテストとユーザー向けの接続ガイド(ペアリング/開始手順)を用意する。
  • UXはシンプルさを優先し、機能追加は優先順位付けしてインターフェイスの肥大化を避ける。

Practical tips for engineers

  • まずハードウェア(WIDI Jack等)でプロトタイプを動かし、MIDIメッセージ形式と遅延を観察する。
  • API名と挙動をiOS/Androidで合わせることでJS側の実装を共通化しやすくする。
  • Expoの既存パッケージ(expo-haptics/expo-audio等)を活用して再発明を避ける。
  • ユーザー向けには接続手順とトラブルシュートをアプリ内で明示し、MIDIコマンドの失敗ケースをハンドリングする。

Full Translation

翻訳

原文の流れを保ったまま読める翻訳セクションです。

openaijamodel: gpt-5-mini-2025-08-07

Expo Modules を使用した MIDI over Bluetooth アプリの構築

Expo Modules を使用した MIDI over Bluetooth アプリの構築

ユーザー • React Native • 開発 • 2025年10月30日 • 読了: 8分
ゲスト投稿: Laurens Lamberts

Expo Modules を使ってカスタムネイティブ機能を作成し、実機ハードウェア統合のために MIDI-over-Bluetooth サポートを追加する方法を紹介します。この記事はオランダ在住のフリーランス React Native 開発者かつミュージシャンである Laurens Lamberts によるゲスト投稿です。

背景 — ペダルへの愛

私は(ギター)エフェクトペダルが大好きで、楽曲制作の音作りやリラックスのためによく使います。特に Chase Bliss(ミネアポリス)のペダルが好みで、独自の多数の調整オプションと堅牢なデザインが魅力です。

2024年に Chase Bliss の Discord に参加し、2025年にはファン製のペダル工場プリセット一覧サイトが消えてしまいました。Discord 上で復活の予定があるか尋ねましたが計画はありませんでした。そこでそのプリセットをコミュニティ向けに取り戻し、さらに拡張するアイデアに固執するようになり、Jordy(同郷の仲間)と一緒にプロジェクトを始めることになりました。

こうして生まれたのが Chase Bliss アプリ(iOS、Android)です — Chase Bliss ペダル愛好家のためのプリセット管理アプリ。2025年2月から開発を開始しました。Made by the community, for the community.

アプリでできること

  • ペダルごとにプリセット(ノブやスイッチの組み合わせ)を保存
  • アプリ内のペダル UI は実物のペダルに極力近づけ、直感的に設定できるように設計
  • 物理ペダルのノブはモーター化されていないため、セカンダリ(隠し)オプションの値を覚えておく必要があります。アプリはすべてのモードの値を表示してそれを補助します。
  • ペダルのマニュアル PDF をアプリ内で参照可能

アプリの最初のマイルストーンは「お気に入りの音をアプリで管理すること」でした。次のマイルストーンは:

  • ユーザー同士でプリセットを共有できること
  • 他のユーザーが共有したプリセットを探索して新しいサウンドを発見すること

同時に、ユーザープライバシーを尊重する設計(必要最小限のデータ収集、基本的かつ匿名化された使用状況インサイト)を行っています。

なぜ Expo を選んだのか

主な理由は iOS と Android 両方を同時に開発でき、ネイティブプロジェクトを手動で保守し続ける必要がない点です。私が Expo を使い始めてから約1年で、無駄な時間が大幅に減りました。以前はネイティブプロジェクトの設定やビルドで多くの時間を費やしていましたが、Expo によって両方のネイティブフォルダをいつでも安全に削除でき、読みやすい設定ファイルと一部のカスタム Expo プラグイン・モジュールでネイティブコードを変更できます。

また Expo パッケージ群(expo-hapticsexpo-blurexpo-sharingexpo-apple-authentication など)が充実しており、今回 expo-audio を導入してオーディオ再生を行っています。これらは Expo がメンテナンスしているオープンソースで、安定性と継続的な保守が見られます。

カスタム Expo Module の作成

当初からのアイデアは、アプリから実際のペダルにプリセットを送れるようにしてハードウェアと連携させることでした。多くの Chase Bliss ペダルは MIDI(1/4 inch jack)インターフェースを備えており、アプリから“ビーム”してペダル側の設定を更新できたら素晴らしいだろうと考えました。

ビームの手段としては Bluetooth が現実的に思え、私は CME の製品である WIDI Jack を入手してペダルとのインターフェースを試しました。私は Swift や Kotlin の専門家ではなく、MIDI 仕様についても詳しくありませんでした。そこで Github Copilot の助けを借りながら、アプリに「MIDI over Bluetooth」サポートを追加する Expo モジュールを作成しました。

  • まず iOS 側で Proof of Concept を作り、動作を確認
  • 次に Copilot に同等の関数名と振る舞いを持つ Android 実装を提案してもらい、手作業で調整して動かす

結果的に Android も動作するようになり、モーター化されたフェーダーを持つモデルでは、アプリからプリセットを送信するとミリ秒単位でフェーダーが飛んでプリセットに追従する様子が確認できました。非常に感動的な瞬間でした。

重要な材料として、Chase Bliss から第一者のアセット(ペダル写真、フォント、工場プリセットなど)を使用する許可と協力を得られたことにも深く感謝しています。これがなければこの体験は実現できませんでした。

使用しているその他の技術

  • UI とインタラクション: Reanimated、React Native Skia、Gesture Handler

    • ノブをドラッグすると縦移動に合わせて回転し、選択値を表示
    • 複数のビューがあり、ビュー切替時にノブがアニメーションで値に追従
    • 将来的に、選択値や細かなニュアンスを遊び心を持って表示する方法を検討中。これらは Reanimated の値に直接バインドされ、JS スレッドが忙しい時でも高性能を維持
  • Expo パッケージ: expo-hapticsexpo-blurexpo-sharingexpo-apple-authenticationexpo-audio など

今後の計画

  • Chase Bliss チームにこれまでの成果を見せ、今後の進め方についてまだ協議中

  • 「MIDI over Bluetooth」機能は現状で安定しているが、リリース前に以下を完了する必要がある:

    • ユーザー向けの開始手順や導入説明の整備
    • インターフェースの明確化
    • ペダルごとのすべての MIDI コマンドを検証
  • 機能アイデアは多数あるが、インターフェースを複雑にしすぎず直感的・保守可能に保つことを重視して優先順位付けを実施

  • ユーザーフィードバックを受けながら、Chase Bliss ペダル愛好家にとって最も役立つツールになるよう継続的に改善していく予定

感想

Expo Modules を使ったネイティブ機能の拡張は、iOS と Android 両方で同等の体験を提供するうえで非常に有効でした。Github Copilot の支援を受けつつ、自分たちの目標に合わせて手作業で調整することで、ハードウェアとシームレスに連携する体験を作れたことは大きな収穫です。今後もコミュニティと Chase Bliss の協力のもと、より良いアプリを目指していきます。