ギターチューナーアプリを自作したお話

たき火の前でギター ギア・道具

キャンプの夜といえば、焚き火とギター。

星空の下で弦をつまびく時間は最高なんですが、毎回ひとつ困ることがありました。

チューナーを忘れる。

クリップ式のチューナーはどこかのバッグの底に沈んでいて、スマホのチューナーアプリを探してもイマイチしっくりこないものばかり。「だったら自分で作ってしまおう」と思い立って、AIと一緒にチューナーアプリを作ってみました。

たき火の前でギター

きっかけは「どうせiPhoneあるし」

キャンプに行くとき、最近はできるだけ荷物を減らすようにしています。テント、シュラフ、クッカー……それだけで結構な重さになる。そこにギターケースが加わると、チューナーひとつのためにポーチを増やしたくない。

「iPhoneにマイクがついてるんだから、ブラウザで動くチューナーがあればいいじゃないか」

そう気づいてから、Claude(AIアシスタント)に相談してみました。


AIに「作って」と頼んでみた

最初はシンプルにお願いしました。

「スマホ(iPhone)を利用してギター・ウクレレのチューニングアプリを作成してください。440Hzを中心にピッチの調整などできればうれしいです。」

数分もかからず、HTMLファイルひとつで動くチューナーアプリが出来上がりました。デザインもかっこいい。ギターとウクレレの切り替え、基準音(A4)を430〜450Hzで調整するスライダーもついている。

でも、実際にiPhoneのSafariで開いてみると……マイクが音を拾わない。


ここからが本番、地道な改善の旅

ここから先は、AIと二人三脚でひとつずつ問題を潰していく作業になりました。

問題① マイクが反応しない

iPhoneのSafariはマイクまわりのセキュリティが独特で、普通の書き方では音を拾えないことがわかりました。

AIが教えてくれた原因:

  • エコーキャンセル・ノイズ抑制機能がオンになっていて、音程のある音をノイズと判断してカットしていた
  • ピッチ検出のアルゴリズムが精度不足だった

対策として、マイク取得の設定を変えて、検出アルゴリズムをYIN法という音楽向けの高精度なものに切り替えました。

問題② 低音弦の基準音が聞き取りにくい

各弦の横にある▶ボタンを押すと基準音が鳴る機能があるんですが、E2(82Hz)やA2(110Hz)などの低音弦はiPhoneのスピーカーがそもそも苦手な周波数なので、鳴らしても聞こえにくい。

解決策は「倍音を重ねる」こと。音楽的に言うと、1オクターブ・2オクターブ上の成分を足すことでスピーカーから聞こえやすくする方法です。これでE2弦でもはっきり聞こえるようになりました。さらに音の長さを5秒に延ばして、調弦しながら聴き比べできるようにしました。

問題③ デスクトップのChromeで反応しすぎる

iPhoneで感度を上げたら、今度はパソコンのChromeで部屋のノイズにまで反応してしまいました。そこでデバイスを自動判定して設定を切り替える仕組みを追加しました。

iPhoneデスクトップ
ノイズ閾値低め(感度高)高め(ノイズ無視)
表示の安定化即時表示連続4回一致で確定

問題④ ボタンを押しても反応しない・オフにならない

これが一番手こずりました。iPhoneのSafariでマイクボタンを押しても30秒くらい無反応で、しかも一度オンにするとオフにできない。

原因は複数あって:

  • タッチイベントとクリックイベントが両方反応して二重に処理されていた
  • async/await という書き方がiOSのAudioContextと相性が悪かった

最終的に、タップイベントの登録方法を根本から書き直して解決しました。今はボタンを押すと即座に「マイク起動中…」と表示されて、もう一度押せばちゃんとオフになります。

問題⑤ アプリを離れてもマイクがオンのまま

別のアプリに切り替えたり、Safariを閉じたりしたときに自動でマイクをオフにする処理も追加しました。バッテリーとプライバシーの両方に配慮した、地味だけど大事な機能です。


完成したアプリの機能

チューナーアプリ

やりとりを重ねて完成したチューナーアプリの機能一覧:

  • 🎸 ギター・ウクレレの切り替え(各弦の音名と周波数を表示)
  • 🎤 リアルタイムのピッチ検出(YINアルゴリズム採用)
  • 📊 セント表示(±50セントのメーター、針がリアルタイムで動く)
  • 🎵 基準音の再生(各弦の▶ボタンで5秒間鳴らせる)
  • 🎚️ A4基準音の調整(430〜450Hzのスライダー)
  • 📱 iPhone Safari対応(マイクのオン/オフがスムーズ)
  • 🌐 オフライン対応(一度開けばキャッシュされ、電波なしでも使える)

HTMLファイル1つで動く、というのが最高

このアプリ、基本的にはHTMLファイルをサーバーに置くだけで動きます。インストール不要、アプリストア不要。

GitHubに置いてiPhoneのSafariで開き、「ホーム画面に追加」すれば普通のアプリみたいに使えます。一度キャッシュされればオフラインでも起動します。

キャンプ場は電波が弱いことが多いので、このオフライン対応は地味に嬉しいポイントです。


AIと一緒に作ってみて思ったこと

今回の制作を通して感じたのは、AIは「一緒に考えてくれるパートナー」だということです。

「反応が悪い」「低音が聞こえにくい」「ボタンがオフにならない」——こちらが感じた問題をそのまま言葉にするだけで、原因を調べて修正してくれる。プログラミングの専門知識がなくても、使う側の視点で要望を伝えれば形にしてくれます。

もちろん一発で完璧にはならなくて、今回も10回近いやりとりを経てようやく実用レベルになりました。でもその過程が面白かったし、完成したときの達成感もひとしおでした。

次のキャンプでは……楽器禁止じゃないキャンプ場を探すところから始めないといけませんが 笑。完ソロの夜を夢見て、チューニングだけは完璧にしておきます。🔥🎸


実際に使ってみる

このアプリはGitHub Pagesで公開しています。iPhoneのSafariで開いて「ホーム画面に追加」すれば、アプリとしてオフラインでも使えます。

🎸 チューナーを使ってみる
👉 https://moreai23.github.io/tuner2/

ソースコードも公開中です。
👉 https://github.com/moreai23/tuner2

使ってみた感想や、「ウチのiPhoneでは動かない」などあればコメントで教えてもらえると助かります!🙏

実のところ

AIにアプリ生成と記事まで書いてもらいました。

実際のキャンプ場では、音楽禁止・楽器演奏禁止です。
他のキャンパーがいらっしゃるキャンプ場で音楽をならすのは迷惑行為となります。

貸切・完ソロもしくは妄想の中で音楽しましょう。
たき火の前でまだギターを弾いたことはありません🤭

コメント

タイトルとURLをコピーしました