DocsDigest
Back to listLanguage: JA
OpenAIExpoOct 30, 2025, 1:00 PM

Building a MIDI-over-Bluetooth app using Expo Modules

A condensed section focused on the key takeaways first.

Original Post
OpenAIClaude

Quick Digest

Summary

A condensed section focused on the key takeaways first.

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

Building a MIDI-over-Bluetooth app using Expo Modules

exporeact-nativeexpo-modulesmidibluetoothiosandroidreanimated

Key Points

  • Custom Expo Module adds MIDI-over-Bluetooth
  • Cross-platform parity via matching native APIs
  • Real-device testing with WIDI Jack and motorized faders

Summary

A community-built React Native app (Expo) that manages and shares presets for Chase Bliss guitar pedals. The team implemented a custom Expo Module to add MIDI-over-Bluetooth so presets can be sent directly to pedals (tested with a WIDI Jack). The work covers a Proof-of-Concept on iOS, a port to Android with matching APIs, and a polished UI built with Reanimated + Skia + Gesture Handler.

Key Points

  • Built a custom Expo Module to expose MIDI-over-Bluetooth native APIs to JavaScript; started with an iOS PoC then matched Android behavior.
  • Used Expo plugins/modules to change native code while keeping the benefits of managed Expo workflows (no permanent native folders to maintain).
  • Hardware tested with a WIDI Jack and Chase Bliss pedals (motorized faders demonstrated fast, observable state changes).
  • UI uses Reanimated, React Native Skia and Gesture Handler for performant, animated knob/fader controls; values stay bound to reanimated values to remain smooth under JS load.
  • Practical tips: keep native function names and behavior consistent across platforms, test all MIDI commands with real hardware, and provide clear onboarding for Bluetooth pairing and permissions.
  • Ongoing work: finalize UX for getting started, complete MIDI-command coverage and testing, and prioritize feature roadmap without overcomplicating the interface.

Engineering considerations

  • Use Expo modules and plugins to implement and ship native features while retaining the managed workflow.
  • Ensure cross-platform parity by designing a stable native API surface and mirroring function names/behaviors.
  • Validate with physical devices early and exhaustively (MIDI spec edge cases, timing, pairing flows).
  • Keep telemetry minimal and privacy-first; collect only necessary anonymous insights.

Next steps before release

  • Complete thorough MIDI command testing across pedal models.
  • Add clear in-app onboarding and pairing instructions for users.
  • Polish error handling, edge cases (lost connections, permission denials) and UX for discoverability.

Full Translation

Translations

A translation section that keeps the flow of the original article.

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-haptics、expo-blur、expo-sharing、expo-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-haptics、expo-blur、expo-sharing、expo-apple-authentication、expo-audio など

今後の計画

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

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

    • ユーザー向けの開始手順や導入説明の整備
    • インターフェースの明確化
    • ペダルごとのすべての MIDI コマンドを検証

  • 機能アイデアは多数あるが、インターフェースを複雑にしすぎず直感的・保守可能に保つことを重視して優先順位付けを実施

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

感想

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