ClaudeExpoOct 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

Quick Digest

Summary

A condensed section focused on the key takeaways first.

claudeenmodel: claude-sonnet-4-20250514

Building a MIDI-over-Bluetooth app using Expo Modules

Key Points

  • Custom Expo module for MIDI-over-Bluetooth hardware integration
  • Smooth pedal knob interactions using Reanimated and Skia
  • Cross-platform preset manager with wireless pedal control

Summary

A comprehensive guide to building a React Native app for Chase Bliss guitar pedal preset management, featuring custom MIDI-over-Bluetooth functionality through Expo Modules. The app allows musicians to create, save, and share pedal presets while providing hardware integration capabilities.

Key Points

  • Custom Expo Module Development: Built MIDI-over-Bluetooth support using custom Expo modules for both iOS (Swift) and Android (Kotlin) platforms
  • Hardware Integration: Implemented wireless preset transmission to physical pedals using WIDI Jack Bluetooth MIDI interface
  • Advanced UI Components: Utilized React Native Reanimated, Skia, and Gesture Handler for smooth knob interactions and animations
  • Cross-Platform Benefits: Leveraged Expo's unified configuration and automatic native project management to avoid manual iOS/Android maintenance
  • Community-Driven: Fan-made preset manager app built with official Chase Bliss assets and permissions

Technical Stack

  • Core: Expo, React Native
  • Animation: Reanimated, React Native Skia, Gesture Handler
  • Expo Packages: expo-haptics, expo-blur, expo-sharing, expo-apple-authentication, expo-audio
  • Custom Module: MIDI-over-Bluetooth implementation in Swift/Kotlin

Full Translation

Translations

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

claudejamodel: claude-sonnet-4-20250514

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

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

ユーザー • React Native • 開発 • 2025年10月30日 • 8分で読める

Laurens Lamberts
ゲスト著者

Expo Modulesを使用してカスタムネイティブ機能を構築する方法を学び、実世界のハードウェア統合のためのMIDI-over-Bluetoothサポートの追加も含めて解説します。

これはLaurens Lamberts氏によるゲスト投稿です - オランダを拠点とするフリーランスのReact Native開発者兼ミュージシャンです。


私は(ギター)エフェクトペダルの大ファンです。音楽プロジェクトで音を形作るために使用することを楽しんでいますが、単純にリラックスする方法としても使っています。よく屋根裏部屋でコントロールを回し、エフェクトが楽器の音を星間的な何かに変換する様子に思いを馳せながら漂っています。

私の永遠のお気に入りペダル製造会社は、アメリカのミネアポリスにあるChase Blissです。彼らが作るすべてのペダルは楽しく、ほぼ無限の調整オプションに囲まれ、頑丈で一貫した美学で構築されています。

2024年にChase BlissがDiscordを持っていることに気づき、すぐに参加しました。2025年にペダルのファクトリープリセットを表示するファン製作のウェブサイトが消えてしまいました!Discordで似たようなものが再び現れるかどうか尋ねるメッセージを投稿しましたが、そのような計画はありませんでした。すべてのChase Blissペダルオーナーがアクセスしやすい方法でそれらを取り戻し、そのアイデアを拡張することがどれほど素晴らしいかに固執しました。

その時、Jordy(オランダ人の仲間)が私に連絡を取り、力を合わせるべきかと尋ねました。そして私たちはChase Blissアプリ(iOSAndroid)を構築することを決めました - 私のようなすべてのChase Blissペダル愛好家ミュージシャンのためのプリセットマネージャーアプリです。

私たちは2025年2月からこのアプリを構築しています。コミュニティによって、コミュニティのために作られました。

これらの美しさをご覧ください...

アプリは具体的に何をするのか?

私たちの最初のマイルストーンは、単純にアプリ内でお気に入りのサウンドを追跡することでした。ペダルのノブとスイッチを調整することで、入力される音にどのような影響を与えるかが変わり、非常に多くのコントロール(6つのノブ、3つのトグル、16個のミニスイッチ)があるため、Chase Blissの各ペダルで発見できるサウンドがたくさんあります。

私たちは、所有するペダルを選択し、アプリ内のコントロールと物理的な対応物のコントロールを合わせるために操作できる(React Native)インターフェースを構築しました。そして好きな名前を付けて、後で使用するためにその設定を保存します。これを「プリセット」と呼んでいます。

アプリ内のペダルは物理的なペダルを完璧に再現し、可能な限り直感的に設定できるようにしています。

アプリインターフェースの様子

私たちの次のマイルストーンは以下の通りでした:

  • これらのプリセットを他の人と共有できること
  • 他の人が共有したものを探索することで、ペダルで新しいサウンドと可能性を発見すること

すべてユーザーのプライバシーを確保しながら。アプリの実行を維持し、機能の使用方法について基本的で匿名の洞察を得るために必要な最小限のデータのみを収集します。

さらに、簡単にアクセスできるようにアプリ内にペダルマニュアルのPDFを追加しました。

私たちは、ペダルプリセットに含まれるすべての設定について可能な限り明確にしながら、楽しく遊び心のあるインターフェースの作成を目指しました。例えば、物理的なペダルのノブはモーター化されていないため、ユーザーは二次的な(隠された)オプションがどのように設定されているかを覚えておく必要があります。アプリは、すべてのモードのすべての値を表示できることで役立ちます。

私たちが作ったものは、Chase Blissからの第一者アセットとリソース(ペダルの写真、フォント、ファクトリープリセット...)の使用許可と協力なしには適切に実現できませんでした。そのため、非常に感謝しています。

なぜExpoを選んだのか

Expoを選んだ主な理由は、ネイティブプロジェクトを手動で最新に保つ必要なく、iOSとAndroidの両方向けに構築するためです。私は約1年前からExpoを使い始め、多くの時間を節約してくれました。

Expo以前は、ネイティブプロジェクトの様々な設定のトラブルシューティングに何時間も費やすことがよくありました。例えば、問題に直面し、同じ状況の人をインターネットで探し、最終的にネイティブiOSプロジェクト内の曖昧なビルド設定にパッチを当てることになりました。途中でそれを変更したことを忘れ、最終的に他の問題を引き起こすだけでした。

今Expoを使えば、いつでも両方のネイティブフォルダを安全に削除できます。また、読みやすい設定ファイルがあり、ネイティブコードを変更するためのカスタムExpoプラグインとモジュールで補完されています。

Expoが今やReact Nativeアプリを構築する標準的な方法と考えられていることは素晴らしいと思います。React Nativeでの作業を楽しく、よりアプローチしやすくしてくれます。

また、Expoパッケージも素晴らしいです。非常に多くのアプリ機能について、開発を支援するExpoパッケージがあります。このプロジェクトでは、expo-hapticsexpo-blurexpo-sharingexpo-apple-authenticationなどを使用しています。そして現在、音声再生のためにexpo-audioをインストールしています。

これらのライブラリで優れた安定性を実感しており、これらのオープンソースパッケージはExpoによって維持されているため、一貫したメンテナンスが行われています。

カスタムExpo Moduleの構築

最初からのアイデアの一つは、アプリをペダルハードウェアと接続し、プリセットを実際の(物理的な)ペダルに送信する方法を見つけることでした。

アプリ内のプリセットの例

これらのペダルにはMIDI(1/4インチジャック)インターフェースがあり、アプリからペダルにプリセットを「ビーム」し、設定を引き継いでプレイできるようにすることが素晴らしいと思いました。

この「ビーミング」にはBluetoothが最も実現可能だと考え、ペダルとのインターフェースをテストするためにWIDI Jack(CMEの製品)を入手しました。

私はSwiftとKotlin開発の専門家ではなく、MIDI仕様について何も知りませんでした。Github Copilotの多大な助けを借りて、アプリに「MIDI over Bluetooth」サポートを追加するためのExpoモジュールを構築しました。

最初に、iOS側の概念実証に取り組み、動作させることができました。その後、CopilotにiOS側と一致する関数名と動作で類似の機能を実装するよう依頼しました。いくつかの(まだ非常に必要な)手動の人間の思考で、「私たち」はAndroidも動作させることができました。

Chase Blissの製品の一つには音変数用のモーター化されたフェーダーがあるため、これは素晴らしいデモになりました。アプリ内のプリセットをペダルに送信することができ、数ミリ秒以内にフェーダーが飛んでアプリからのプリセットに適応する様子を見ることができました。このプロジェクトの断片がまとまる様子を見るのは魔法のような感覚でした。

さらに使用した技術

アプリは、「ペダル」のノブとコントロールとのスムーズなインタラクションを可能にするために、React Native SkiaとGesture HandlerでReanimatedに依存しています。ノブを垂直にドラッグすると、選択された値を表示するために回転します。

複数の「ビュー」があり、それらを切り替えると、ノブは自動的に回転をアニメーションして、そのモードのノブ値を視覚化します。

現在、ユーザーが選択している正確な値とニュアンスを遊び心を持って表示する複数の方法を探索しています。これらはreanimated値に直接バインドされ、JSスレッドが忙しい場合でも、パフォーマンスを維持します。

将来の計画は?

これまでに構築したものをChase Blissのチームに見せ、アプリをどのように進めるかについてまだ話し合っています。Chase Bliss会社、彼らが行うこと、彼らが代表することのファンとして、これは私たちにとって本当にエキサイティングでした!

「MIDI over Bluetooth」機能は現在安定していますが、リリースに含まれる前に完了すべきことがまだいくつかあります。主にユーザーに開始方法を説明し、インターフェースを可能な限り明確にし、すべてのMIDIコマンドをペダルでテストしたことを確認することです。

このアプリには多くの機能のアイデアがありますが、何を追加するかについて慎重に考えたいと思います。アプリのインターフェースをあまりにも多くのオプションで汚染したくありませんし、直感的で保守可能に保つ必要があります。

アイデアのリストは広範囲にわたるため、優先順位を付けてロードマップを作成し始めました。あらゆる種類のユーザーフィードバックに対してオープンであり続け、Chase Blissペダル愛好家にとって最も有用なツールにすることを目指します。