古いiPadで使えるピアノの練習記録アプリを作りました

子どもがピアノを習っていると、今日は練習したのかしていないのかが、毎日あいまいになるんですよね。やった、やってない、で言い合いになるのもお互い疲れますし、そもそも一週間でどれくらい弾いているのかが、親の私にもまったく見えていませんでした。

練習時間を記録するアプリを探してはみたんですけど、家族の何人ぶんかをまとめて管理できるものが、なかなか見つからないんですよね。それなら作ってもらおう、と軽い気持ちでClaudeに頼んだら、完成までに思っていた何倍もまわり道をすることになりました。

先に結果だけ言うと、これはAIに作ってもらったものの中で、いちばん役に立っています。だから、途中でつまずいたところも含めて書き残しておきます。

まず「どこで作るか」でつまずきました

最初は、Claudeの中でそのまま動くUI（アーティファクト）で作ればいいかなと思っていました。でも聞いてみたら、その中ではブラウザにデータを保存する仕組みが使えないので、記録が消えてしまうとのことでした。毎日つけるものなので、それでは意味がありません。

それで、HTMLファイルを1枚だけ作って、ブラウザで開く形にしました。サーバーもアカウントも要らず、データはそのブラウザの中に貯まっていきます。ここまでは、正直あっという間でした。ホーム画面、レポート、記録一覧、設定と、思っていたより本格的なものが数分で出てきて、感心してしまったくらいです。

問題はこのあとでした。

置きたかったのは、家に転がっていた古いiPadでした

せっかく作るなら、ピアノの横に古いiPadを置いて、そこで押せるようにしたいと思っていました。使わなくなって引き出しに入っていたものです。

ところが、そのiPadが古すぎて「ファイル」アプリが入っていませんでした。HTMLファイルを送っても、開く手段がないんです。

ここから延々と、「Safariで開く」が出てこない、との戦いが始まりました。メールに添付しても出てこない。AirDropで送ったら受け取れたのに、そこから先に進めない。Chromeならどうかと聞いてみたら、ブラウザの問題ではなくiOSの仕組みの問題なので同じです、と言われました。

無料のはずが有料で、無料のほうは真っ白でした

では一度インターネット上に置いてしまえばいい、ということで、HTMLファイルをドラッグするだけでURLが発行できるサービスを教えてもらいました。開いてみたら、お金を払ってくださいという画面でした。

次に、無料で使える別のサービスを試しました。今度はちゃんとURLが発行できたので、これで終わったと思ったんです。iPadでそのURLを開いたら、何も動きませんでした。真っ白でした。

このあたりで、正直けっこう心が折れかけていました。

原因は「コードが新しすぎたこと」でした

動かない理由を聞いたら、原因はiPadではなく、作ってもらったコードのほうにありました。今どきの書き方で作られていたので、古いiOSのブラウザが理解できなかったんです。

具体的には、色の指定に使っていた新しい書き方、グラフを描くライブラリの新しいバージョン、それから最近のJavaScriptの構文。このあたりが全部、古い端末では読めなかったそうです。全部、古い端末でも動く書き方に置き換えて書き直してもらいました。

ここで学んだのは、使う端末が古いなら、それを最初に伝えないといけないということでした。AIは何も言わなければ、いちばん新しくてきれいな書き方で作ってくれます。それが仇になることがあるんですね。

結局、家のWiFiの中だけで動かすことにしました

書き直してもらったファイルを、またサービスにアップロードし直すのも面倒だなと思って、ほかに方法はないか聞いてみました。

出てきたのが、Macの中でごく小さなサーバーを立てて、同じWiFiにつながっているiPadからそこを見る、という方法でした。アカウントもURLの発行も要りません。かわりに、MacとiPadが同じWiFiにいて、Macがついている間しか使えません。

うちの場合、ピアノを弾く時間はだいたい家にいる時間なので、これで十分でした。毎回ターミナルを開くのは面倒なので、ダブルクリックすれば起動するファイルも一緒に作ってもらいました。

遠回りしたわりに、いちばんシンプルなところに落ち着いた感じです。

入れてみたら、想像以上でした

古いiPadに無事収まって、今も毎日きちんと動いています。動作もずっと安定していて、いまのところ止まったことがありません。

いちばん驚いたのは、子どもたちが自分から使ってくれることでした。グラフが伸びるのが見えるからだと思います。押せば棒が伸びる、目標の線に近づく、というのがわかりやすいんでしょうね。今日はあと何分、みたいなことを自分で言うようになりました。

結果として、家族全員の練習量が目に見えて増えました。そして私が「練習しなさい」と言わなくてよくなりました。これが本当に大きいです。言わなくて済むというのは、言う側にとってもかなり楽なんだなと実感しています。

AIに作ってもらったものはいくつかありますが、いちばん有用だったのはこれかもしれません。

同じことをやってみたい方へ

もし同じように作ってみたい方がいたら、この順番で頼むと、私がやったまわり道をだいぶ省けると思います。まず、アプリそのものをお願いするプロンプトです。

家族でピアノの練習時間を記録するアプリを作ってください。

【使い方】
・ピアノの横に置いた古いiPadで、家族それぞれが自分のボタンを押して使います
・「練習はじめ」「練習おわり」を押すだけで時間が記録されるようにしてください
・1日・1週間・1か月の目標時間を人ごとに設定でき、達成度がグラフで見えるようにしてください
・あとから手入力・修正・削除もできるようにしてください

【条件】
・サーバーもアカウントも使わず、HTMLファイル1枚で完結させてください
・データはブラウザのlocalStorageに保存してください
・端末が数年前の古いものなので、古いブラウザでも動く書き方にしてください
　（CSS変数を使わない／新しいJavaScript構文を使わない／グラフのライブラリも古い版を指定する）

まず、この作り方で問題がないか確認してから作り始めてください。

古い端末で使うことを最初に書いておくのが、いちばんのポイントです。私はこれを言わなかったせいで、作り直しになりました。

そのあと、端末から開けるようにする部分はこう頼みました。

作ってもらったHTMLファイルを、同じWiFiにいるiPadから開けるようにしたいです。
アカウント登録や有料サービスは使いたくありません。
Macでローカルサーバーを立てる方法にして、毎回コマンドを打たなくていいように、
ダブルクリックするだけで起動できるファイルも一緒に作ってください。

作る過程そのものも、思ったより面白かったです。うまくいかないたびに理由を説明してもらえるので、なぜ古い端末では動かないのか、みたいなことが自然とわかってきます。

家に使っていない古い端末が眠っている方は、こういう用途に回してみると、意外といい仕事をしてくれるかもしれません。