🎄クリスマス太り解消！アブローラーの「音」を拾ってカウントする自分専用Webアプリを、AIと2時間で爆速開発した話🎁

まえおき（by 人間）

アドベントカレンダー初投稿です。内容はタイトル通り、小さなWebAppをGeminiPro3.0の助けを借りて、というかほとんどGeminiに書いてもらって作成したものです。思ったより簡単にできてしまったので、せっかくだからQiitaに投稿しようと思い、Geminiに相談したら、原稿も書いてくれました（笑）。
クリスマスっぽくハッピーな感じでと依頼したので、ちょっと恥ずかしくなるような文章になっていますが、修正するより、Geminiの実力を飾らず見せておこうと思い、そのままコピペします。実際はこの内容よりしょぼいやりとりもあったりするので、ご興味とお暇があるかたは、 GitHubリポジトリ の　docs のなかに、chatの内容をすべてコピーしておきましたので、見比べてみるのも一興かと思います。
出来上がったアプリはこちらです。

実際にご自分のスマホで動作を試してみたい方へ：

2時間でつくった簡易的なアプリなのですべてのスマホで動く保証などありません。私の手持ちの2台のスマホのうち1台ではちゃんと動いて使えますが、もう1台では、権限がどうのとエラーが出て使えませんでした。
もし、それでも動かしてみたいという奇特な方がいらっしゃったらぜひご自分のGithubにクローンして、それを今どきの生成AIに見せて、「自分のところではこんなエラーがでるんだけど」と相談すればよしなにしてくれると思います（たぶん。むしろGemini以外のAIで試してみてほしいｗ）

githubのリポジトリはこちらです。chatで作成されたソースもすべて保存済です。

それでは、以下にGemini Pro 3.0が作成したままをコピペします。（スクショなどはGeminiの指示通りに自分が作成したものを挿入してあります。）

本文（by Gemini Pro 3.0)

メリークリスマス！🎅 そして、筋肉痛のみなさんこんにちは。
美味しいものが溢れる12月、どうしても気になるのが　「カロリー」　ですよね。

食べた分は動かねばなりません。私にとっての相棒は　「アブローラー（腹筋ローラー）」　です。
でも、アブローラーって回数を数えるのが地味に面倒くさくないですか？ 床に顔を近づけて必死に耐えているときに「いま何回だっけ...？」となるとテンションが下がります。

「アブローラーが床を転がる『ゴロゴロ』という音を聞き取って、勝手にカウントしてくれるアプリがあればいいのに！」

そう思い立ったが吉日。
生成AI（Gemini）をパートナーに、「自分専用アブローラーカウンター」　をゼロから作り上げました。
思いつきからスマホでの実戦投入まで、かかった時間はなんと　2時間弱。

自分への最高のクリスマスプレゼントになったこの開発ログを、技術的なポイントと共に共有します。

💡 アイデア：音で回数は数えられるのか？

既存のフィットネスアプリは加速度センサーやカメラを使うものが多いですが、もっと手軽に「床にスマホを置くだけ」で実現したい。
アブローラー特有の　「シャー……（往路）」「グッ（一瞬停止）」「シャー……（復路）」　という摩擦音を解析すればいけるのでは？と考えました。

1. まずはデータ取り

論より証拠。スマホのボイスメモで、実際にトレーニング中の音を録音し、Pythonで波形を見てみました。

# 実際に使用した解析コードの一部（AIに書いてもらいました）
import librosa
import matplotlib.pyplot as plt
# ... (中略) ...
peaks, _ = find_peaks(rms_train, height=threshold, distance=min_distance_frames)

その結果がこちら！

(↑ 見事に10回のトレーニングが、10個の「山」として検出されています)

このグラフを見た瞬間、　「いける！」　と確信しました。
ノイズ（環境音）とシグナル（摩擦音）のエネルギー差が明確だったため、複雑な機械学習モデルを使わずとも、　「音量（RMS）のしきい値判定」　というシンプルなロジックで実装できそうです。

🚀 爆速開発：PythonからWebアプリへ

最初はPC上で動くPythonスクリプトを作りましたが、トレーニング中にPCを床に置くのは邪魔です。
「やっぱりスマホで使いたい。しかもアプリインストールとか面倒なことはしたくない」

そこで、Pythonで作ったロジックをHTML + JavaScriptに移植し、ブラウザだけで動く**Webアプリ（PWA的なもの）**にする方針に転換しました。

技術スタック

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Audio Processing: Web Audio API ( AudioContext, AnalyserNode )
• Visualization: Chart.js (モチベアップ用のグラフ)
• Hosting: GitHub Pages

これならサーバーサイドの処理が不要なので、GitHub Pagesに置くだけで無料で公開でき、誰でも（といっても私しか使いませんが）アクセスできます。

✨ こだわりの「ニヤニヤ」機能

ただ数えるだけでは面白くありません。トレーニング後に　「ふふっ、今日もやったぜ」とニヤニヤするための機能　をAIと相談しながら盛り込みました。

1. 誤検知を防ぐ「クールダウン」機能

アブローラーは「行って・戻る」動作ですが、感度が良すぎると「往路で1回、復路で1回」とダブルカウントされてしまいます。
そこで、「一度カウントしたら、その後3秒間はカウントしない（入力を無視する）」　というクールダウンロジックを実装。
Web画面上のスライダーで、自分のトレーニングペースに合わせて秒数を調整できるようにしました。

2. LocalStorageで「努力の可視化」

サーバーがないので、データはブラウザの localStorage に保存します。
Chart.jsを使って、直近1週間の回数を棒グラフで表示。
「Total: 150 reps」　のように累計が表示されると、自己肯定感が爆上がりします。💪

3. "FINISH" ボタンのUX

トレーニングが終わった後、生活音を拾って勝手にカウントが増えるのを防ぐため、「FINISH」ボタンを作りました。
これを押すとマイク入力が物理的に（ソフトウェア的に）遮断され、グラフが固定されます。これで安心して結果を眺められます。

📱 完成したもの

完成したWebアプリのインターフェースはこんな感じです。

(↑ 緑色のネオンカラーで、某マトリックスのようなサイバー感を演出)

使い方は超シンプル。

1. URLを開く。
2. 「START」を押す（3秒間のキャリブレーションで環境ノイズを測定）。
3. Go! ゴロゴロするだけ。
4. 終わったら「FINISH」で記録確定。

🔒 セキュリティについて（自分専用ツールの強み）

このアプリをGitHub Pagesで公開していますが、セキュリティリスクはほぼありません。

• 音声データはサーバーに送られない: マイクで拾った音はブラウザ内（JavaScript）で解析され、その瞬間に破棄されます。録音データがどこかに送信されることはありません。
• データは個人の端末内: トレーニング記録は localStorage（あなたのスマホの中）に保存されるだけです。

🎁 まとめ：AIとのペアプログラミングは最高

今回、「思いつき」から「実用」まで2時間で駆け抜けることができました。
もし一人でやっていたら、Web Audio APIの仕様調査や、Chart.jsの実装あたりで挫折してクリスマスを終えていたかもしれません。

• 「こういうことしたい」と伝える → ロジックが返ってくる
• 「ダブルカウントしちゃう」と相談する → 「クールダウン入れましょう」と提案される
• 「ニヤニヤしたい」と言う → 「グラフつけましょう」とコードが出てくる

この　「わがままを全部コードにしてくれるサンタクロース」　のようなAIとの開発体験こそが、一番のプレゼントでした。

みなさんも、年末年始の休暇に「自分専用の小さなツール」を作ってみてはいかがでしょうか？
それでは、良いお年を！そして良い筋肉ライフを！🎄✨

---

あとがき（by 人間）

Geminiが私になりすまして書いているようで、そこにはGeminiと私の２つの人格が混ざっています。
いやいや、俺そんなこと言っていないよと思うところも何箇所もあります。人間は
「アブローラーの音をカウントするスマホアプリがほしい」
と望んだだけで、あとは全部Geminiがやってくれたのです。それを適当に役割分担して人間のせいにしてます。
生成AI怖いです。むちゃくちゃ便利ですけど。