今回もヴァイブコーディングの話です。これまでとの違いは、Claude Codeではなく、Codexを使っていること、そして、Androidアプリを開発していること。なぜこうなったかというと……。
インスタコード、カンタンプレイで知られるゆ～いちさんが新しい楽器のプロジェクト「ストラモ」を始めました。ギターライクで簡単に演奏できるインスタコードをさらに簡素化し、安価に提供するもので、その割り切りに非常に感銘を受けました。これは大ヒットすると思います。
物理キー、物理ブリッジを備えたインスタコードをより安価に提供するために、タッチパネルを使うという割り切りのアイデアが素晴らしいのです。5月28日に予約受付開始ということで、これは買おうと思います。
そこで思い出したのが、ギターをタッチインタフェースで再現するというアイデアが、iPhone登場の時まで遡れることです。
まだiPhoneのSDKが出る前、JailBreakしたiPhone（日本での発売前の初代）を手に入れて、公開されていた楽器アプリを自分用に改造していました。公開日付は2008年5月13日、今から17年前。
MooCowMusicの12 Bar Bluesというアプリを改造し、ボタンに初音ミクの歌をサンプリングして割り当てただけの簡単なものです。
この時期には、笠谷真也さんのPocket Guitarというアプリが公開されていています。ギターシミュレーターとしてこれを超えるものは、いまだにこの世に存在していません。
筆者はこれを複数のiPhoneにインストールし、縦に繋いで演奏するというスタイルで、2012年には東京ドームでギターソロを演奏したりもしました。
マルチタッチを活かしたタブレット用アプリとしては、iPad版GarageBandがとてもよくできているのですが、欠点があります。フレット数が足りない。せいぜい12フレットくらいまで。12.9インチの初代iPad Proが出てからも、その状況は改善されませんでした。
そこからさらに11年。待てど暮らせどギターソロの高音部を弾けるだけの大きさのiPadは出てきませんし、この部分ではGarageBandもバージョンアップされません。
ならば作るしかない。ヴァイブコーディングできる今なら可能なのでは？ そう、ベッドの中で思いつきました。
前日に届いたAndroidタブレットで動かせるんじゃないかと考えたのです。
KTCという中国メーカーのAndroidタブレット。なんとサイズは24.5インチ。筆者は同じメーカーのAndroidタブレットを2台購入していて、これらは妻のAIアバター用に使っています。
先に購入した2台はそれぞれ27インチと32インチ。どちらもスタンドと一体化しているため、ギター的な楽器演奏には適しません。モジュラーシンセサイザーとかはいけるかもですが。
ところが、今回購入したAndroidタブレットはより小型サイズ。といっても24.5インチありますが、なんとか持てないこともない。
重量は5.5kgと、重めのレスポールくらい。ダブルネックよりは軽いからなんとかなるかも、ということで、これをターゲットデバイスにすることにしました。
といったことは全部ベッドの中で考えたのですが、すぐに開発に移ることができました。というのも、筆者はM4 Mac miniにCodexの環境を作っていて（OpenClawを試すため）、それとChatGPTのiPhoneアプリを連動させるところまでやっていたからです。
ベッドの中からiPhoneで開発する
やってみるかと思い付いたのはベッドに入ってこれから寝ようと思っていたとき。これから起きて階下のMac miniの前に行くのもかったるいし、やり始めたら徹夜コースになりそうだし。
そういえば、CodexのMacアプリとiPhone版ChatGPTアプリの連携をしてあったんだと思い出し、2階の寝室から1階リビングのMac miniにアクセスして開発できるかやってみることに。
最初のプロンプトは、こんな感じ。
24.5インチのAndroidタブレットKTC MegaPadで動作する、ギター系の楽器アプリを作ろうと考えている。ショルダーキーボードのように肩から下げて、ギターのように演奏するスタイル。最下部にはギターのネックとストラム用のブリッジを、その上部には各種コントロールボタン、シーケンサー、サンプラーなどを配置して、さまざまな演奏スタイルに対応できるもの。Chromeプラウザで動作させる、マルチタッチを活かした楽器アプリにしたい
階下のM4 Mac miniにインストールしたCodexがファイルを作り、ライブラリを入れ、ビルドし、Android実機に転送していきます。筆者はiPhone側から指示を出しているだけ。
私はコーディングしてます。ベッドの上で。
以前、iPhoneアプリをClaude CodeとXcodeの組み合わせで作ったとき、AIコーディングの実用性についてはかなり手応えを得ていました。XcodeプロジェクトはBuildボタンを押すだけで実機でテストできる。そこまでできたので、AIエージェントがすでに頼れる開発相棒になっていることがわかりました。
超巨大タブレットのための楽器アプリ
24.5インチのAndroidタブレット、KTC MegaPadを、肩から下げるショルダーキーボードのように使います。画面の最上段にギターのネックを配置し、その下にコードストリップ（コードを演奏するボタン）、オケ再生、録音、エフェクト、アーム操作を置く。Chrome/WebView上でマルチタッチを使い、ギターのように演奏できる楽器アプリにする、というわけです。
単なるアプリ開発というより、特定のデバイスの形状、重さ、画面サイズ、タッチ特性に強く依存した「楽器を作る」作業です。
画面が大きいからこそ24フレットまで出せる。横長に持つからギターネックを最上段に置ける。マルチタッチだから、コードを押さえながらストラムできる。巨大Androidタブレットだからこそ成立する演奏UIを、AIと一緒に作っていくわけです。
これまでiPad版GarageBandで感じていた不満を一気に解消できるかも、ということでワクワクしながら開発していましたが、しょせんAndroidだからうまくいかないかも、という不安もありました。いやー、以前はほんと使い物にならなかったんですよ。
ブラウザ楽器からAndroid実機へ
最初のバージョンでは、Tone.jsを使ってブラウザ上で音を出すところから始めました。ネック、ストラムエリア、コード演奏、シーケンサー、サンプラーといった要素を並べ、まずは「画面を触ると鳴る」状態を作ります。
途中でiPad版GarageBandのSmart Guitarのように、16個のコードを登録（GarageBandは最大で12個まで）し、それぞれをコードストリップとしてストラムできるようにしました。コード名を上下左右にスワイプすると、ストラムと同じように鳴る、タブレットの余裕ある面積を楽器の表現領域として使う発想です。
ブラウザでの表示は、iPhoneのChatGPTアプリでもある程度は確認できますが、なにせ領域が足りないので、やはり実機で試さないといけません。
ここでいったん寝て、起きたら活動再開ということにしました。
起きたら今度は長いUSB-CケーブルでMac miniとAndroidタブレットをつなげます。これで、ブラウザ表示の先に行けます。
Androidネイティブアプリ化にはCapacitorを使いました。
WebアプリをAndroidアプリとしてラップし、WebView内で動かします。JDKとAndroid Studio環境を入れ、USBケーブルでMegaPadを接続し、ADBでインストール。実機の画面で「動いた」と確認できた瞬間、これはただのWebデモではなく、抱え込んでタッチして音を鳴らすと、かなり楽器に近づいた感じがありました。しかし、5.5kgはやはり重いしかさばる（笑）
レイテンシー、発音数、ギターらしさ
もちろん、楽器アプリは動けば終わりではありません。むしろ、動いてからが本番です。
まず、レイアウト。最初はギターネックを最下部に置いていたのですが、これだと抱えて演奏するときに使いづらいので、一番上に移動させました。
最大の問題はレイテンシーでした。ブラウザ上のTone.jsだけでは、タッチしてから発音するまでのわずかな遅れが演奏感を損ないます。
ブラウザ表示でも、iOS、iPadOSであれば遅延は最小に抑えられますが、Androidだとそう簡単いはいきません。昔よりははるかにいいのですが。
そこで、Android側にネイティブ音源を追加しました。WebViewからJavaのネイティブAudioTrackベースの音源を呼び出し、より低レイテンシーで鳴らす仕組みです。
しばらく弾いていると音が濁ってノイズまみれになる問題も出ました。これは発音管理、同時発音数、リリース処理、ネイティブ側の音声ストリームの扱いを見直すことで改善していきました。
ギターとして考えれば、基本は6弦それぞれ1音ずつです。ならば同時発音数もむやみに増やすのではなく、ギターらしい制約に寄せたほうがいい。そういう判断も、実機で弾いて初めて見えてきます。
ハンマリング・オン、プリング・オフ、グリッサンド
ギターらしい演奏表現も足していきました。同じ弦で高いフレットを押したら前の音を止め、ハンマリング・オンのようにする。逆に低いフレットへ移ったらプリング・オフのようにする。横にスライドしたらグリッサンドとして経過音を小さく鳴らす。
上下にスライドしたときの扱いも、ギターらしさを基準にしました。本物のギターにはベンドアップはあっても、指板上でのベンドダウンは基本的にありません。そこで、指板上では下方向に動かしてもベンドアップにしました。
この辺の演奏技法については、ビートルズ「Let It Be」の、ジョージ・ハリソンによるギターソロがある程度再現できるかどうかを自分なりのベンチマークにしています。とりあえず合格レベルかな、というところまで来ました。
一方で、ギターのアームは上下両方に動くものです。そこで右下にアーム領域を作り、そこではベンドアップもベンドダウンもできるようにしました。このあたりは、画面楽器ならではの「本物らしさ」と「画面だからできること」の調整です。
指板、スケール、オケ録音
指板のデザインも変わっていきました。最初は単なるボタンの集合でしたが、24フレットまで使えるようにし、3、5、7、9、12、15、17、19フレットにポジションマークを付け、木目っぽい色合いにしました。
スケール表示も追加。キーとスケールを選ぶと、指板上の該当音が色分けされます。ブルーノート、ペンタトニック、メジャー、マイナーなどを切り替えられるようにし、キー設定もでき、不要なときはOFFにできます。
さらに、オケを鳴らすためのオーディオプレイヤーを置きました。最初はファイルを読み込んで再生するだけでしたが、あとから内蔵マイク録音も追加しました。録音したオケには名前を付けて保存し、削除もできます。
ここでも実機ならではの問題が出ます。Android WebView上のMediaRecorderがうまく動かず、録音できませんでした。そこで録音方式を変え、マイク入力をWebAudioで直接受け取り、停止時にWAVとして保存する方式にしました。これで録音、保存、削除まで実機で確認できました。
さらに細かい問題として、ファイル名入力時にソフトウェアキーボードが表示されると、テキストフィールドが隠れてしまうというものがありました。横画面Androidアプリではありがちな問題です。Android側にキーボード表示時のリサイズ指定を入れ、Web側でも入力中だけ録音パネルを画面上に固定表示するようにして解決しました。
実機を相手にした楽器調整
こうして振り返ると、やっていることはコード生成というより、実機を相手にした楽器調整です。
「ここを上に移動して」「右端が切れている」「ストラムは不要だからフレットを伸ばして」「本物のギターならベンドダウンはない」「同じ弦では高いフレットだけ鳴ってほしい」「入力欄がキーボードで隠れる」。こうした細かいフィードバックを、AIエージェントがコードに落とし込み、ビルドし、実機に入れ直す。
人間は実際に触って、違和感を言葉にする。AIはそれを次の実装に変える。この往復の繰り返しです。それでも基本的に半日である程度の完成までいけました。
iPhoneアプリをClaude CodeとXcodeで作ったときは、AIがアプリ開発の工程をかなり肩代わりできることがわかりました。今回のMegaPadギターでは、AIが「特定デバイス向けの道具作り」にまで踏み込んできたことを感じます。
アプリストアに並ぶ一般的なアプリを作るだけなら、AIコーディングはすでに十分便利です。しかし、特定の変なデバイス、ニッチな用途、自分だけの演奏スタイルに合わせたものを作るとなると、従来はかなりの根気と専門知識が必要でした。今は、そのハードルが大きく下がっています。
24.5インチのAndroidタブレットを肩から下げて、巨大なタッチギターとして使う。そんなかなり特殊なアイデアでも、深夜にiPhoneからCodexへ話しかけるだけで、実機で動くところまで持っていける。
これは、AIコーディングが「誰でもアプリを作れる」という段階から、「誰でも自分のデバイスを再発明できる」段階に入りつつある、ということなのかもしれません。
あとはひたすら練習あるのみ。年末の軽音サークルライブではこれを引っ提げて演奏しようかと考えています。
