ワダチを作る #26：ポモドーロのタイマーを作り、受入で見つけた音とiPadの不具合を直した

前回（#25）の最後に、「ポモドーロのタイマーも作る予定」と書きました。今回は、それを作って、本番に出したところまでです。

• ポモドーロのタイマーを作った
• 休憩の鐘に混ざる「パフ」という音を消した
• iPad で、一時停止と再開をくり返すと止まる不具合を直した
• シーンの曲を、鐘のあとから鳴らすようにした
• iPad のステータスバーを消そうとして、透明にした
• 「一日」のシーンの動きを決めた

ポモドーロのタイマーを作った

勉強のような習慣のために、集中と休憩をくり返すタイマーを作りました。いわゆるポモドーロです。

• 習慣の設定で、タイマーを「ポモドーロ」にすると、集中と休憩の時間（既定は 25 分と 5 分）と、回数（1〜8 回か、止めるまで）を決められる
• 集中が終わると、小さな鐘が 2 回鳴って休憩になる。休憩のあいだは、環境音やシーンの曲を止める
• 継続時間には、集中の時間だけを記録する。休憩と一時停止は数えない
• 有料の機能です（途中の鐘やシーンと同じく、今は管理者と、データベースで「有料」にした人だけ）

作りで面白かったのは、音です。ワダチのタイマーは、鐘や環境音を、ブラウザの中で 1 本の音声に組み立ててから流しています（#4）。iPad の画面をロックしても、音と時間がずれないようにするためです。

25 分 × 4 回分を全部つなぐと、音声が大きくなりすぎます。そこで、集中＋休憩の 1 回分だけを作り、休憩の終わりで頭に戻して、回を進めるようにしました。最後の回だけは、集中が終わる少し前に、音声の後ろに付けておいた「終わりの鐘」の部分へ飛びます。

休憩の鐘に混ざる「パフ」という音

開発環境で試すと、休憩に入るときの 2 回の鐘が、なんだか変でした。2 回の間に、余計な音が混ざるのです。

鐘の音は、10 秒ほど響きます。2 回目は 1 回目の 2.5 秒後に鳴らしていたので、1 回目がまだ大きく響いているところに 2 回目が重なり、うなりのような音が出ていました。

そこで、2 回目を鳴らす直前に、1 回目を 0.4 秒で消すようにしました。すると、今度は 2 回目の直前に「パフ！」という音が入るようになりました。大きく響いている音を短い時間で切ると、その切れ目が音として聞こえるのです。

こういう音の加減は、文字で説明されても決められません。そこで、Claude Code に ffmpeg で案の音を作ってもらい、聞き比べました。

• 2 回目までの間（2.5 秒・3.5 秒・4 秒）
• 1 回目を消し始める時刻と、かける時間（1.5 秒〜3 秒）

を組み合わせて、いくつか作ってもらいました。聞き比べて、1 回目を 1.5 秒かけてなめらかに消し、2 秒後に 2 回目を鳴らす形に決めました。音量も、途中の鐘より少し小さくしています。

iPad で、一時停止と再開をくり返すと止まる

iPad のホーム画面に追加したアプリで、こんなことが起きました。

一時停止して再開すると、ちゃんと再開する。ところが、一時停止と再開を何度かくり返すと、「再開」を押しても動かなくなる。Safari では起きず、ホーム画面のアプリだけで起きる。

テスト用のブラウザでは、何度くり返しても再現しませんでした。こういうときのために、タイマーの画面には「診断の記録」を付けてあります（#18）。見出しを 5 回続けて押すと、音声の動きを 1 つずつ記録したものが出て、写して持ち帰れます。

記録を貼ると、原因はすぐに分かりました。

16:30:46  やわらかく一時停止した（止めた位置 3.3 秒）
16:30:47  音声：seeking（再生位置 1801.0 秒）
16:30:48  やわらかい一時停止から再開した（位置 3.3 秒）
16:30:48  音声：seeking（再生位置 3.3 秒）
          （このあと、音声は止まったまま）

iPad のホーム画面のアプリでは、一時停止のときに、音声を本当には止めません。止めた音声を、もう一度鳴らせないことがあるからです。代わりに、音声の最後に付けた無音の部分（30 分のタイマーなら 1800 秒あたり）に飛んで、流し続けます。再開では、止めた位置に戻ります。

30 分の音声は 80MB ほどあるので、この行き来（seeking）に時間がかかります。前の移動が終わる（seeked）前に、次の移動を頼むと、そこで音声が止まったまま戻らなくなっていました。

直し方は素直で、前の移動が終わってから、次の移動をするようにしました。移動の途中に頼まれた位置は覚えておいて、終わってから動かします。何度も頼まれたら、最後の位置だけに動かします。

実機の不具合を、記録 1 枚で直せたのは、診断の記録を付けておいたおかげです。

シーンの曲は、鐘のあとから

シーン（動く絵と曲）を選んだタイマーでは、開始と同時に曲が鳴り始め、そこに開始の鐘が続けて鳴っていました。これが、少し気になりました。

iPhone と iPad では、音は「押した操作の中」で鳴らし始めないと、鳴らせません。そこで、「開始」を押したときに、曲を音を消した状態で流し始めておきます。そして、開始の鐘が鳴ってから 4 秒たったところで、曲を頭に戻して、音を出します。

ポモドーロの 2 回目以降の集中も、同じように、鐘のあとから曲が始まります。

スマホで、ボタンが大きすぎた

記録の画面では、タイマーを使う習慣の右端に「▶ 10分」のボタンがあります。ポモドーロでは、これを「▶ ポモドーロ 25分」にしていました。

ところが、スマホの幅では、このボタンが大きすぎて、習慣の名前や継続時間の欄が押しつぶされ、改行されてしまいました。

Claude Code が出した案の中から、「ポモドーロ」の文字を、くり返しの印（⟳）に替える形を選びました。ボタンの幅は、ふつうのタイマーとほぼ同じになります。画面の読み上げでは、今までどおり「勉強のタイマー（ポモドーロ 25分・休憩 5分・4回）」と伝えます。

iPad のステータスバーを消したかった

iPad でタイマーを使うとき、画面の一番上に、時刻や電池のステータスバーが出ています。シーンの絵を見ながら瞑想するなら、これも消して、画面いっぱいにしたいところです。

まず、ブラウザの全画面表示の仕組み（Fullscreen API）で、「全画面」のボタンを試しに作りました。結果は、

• Safari：全画面にはなるが、ステータスバーは消えず、黒い帯になった。絵が上にずれて、下に黒い余白もできた
• ホーム画面のアプリ：全画面の仕組みが使えず、ボタンそのものが出なかった

いちばん使うのはホーム画面のアプリなので、この方法はやめました。

代わりにしたのが、ステータスバーを透明にして、その下まで描く形です（apple-mobile-web-app-status-bar-style を black-translucent に）。時刻や電池は消えませんが、シーンの絵が画面の一番上まで広がり、時刻と電池は絵の上に白い文字で重なります。ふつうの画面では、ヘッダーの茶色がステータスバーの下まで続きます。

消せないなら、なじませる。実機で見て、これで十分だと思いました。

「一日」のシーンの動きを決めた

前回、同じ丘から同じ町を見下ろす、朝・昼・夕・夜の 4 枚の絵（シリーズ「一日」）を作りました。今回は、朝・昼・夕の動きを決めました。

• どの時間帯も、手前の草原に、風の波でなびく草の葉を描き足した（夜の町と同じ形）。もとの、ごく小さな揺れだけでは、動いているのが分かりませんでした
• 朝：谷の朝霧の流れを、前の倍くらいの速さにした
• 昼：手前の木の揺れを、少し大きくした
• 夕：一番星を、1 つだけまたたかせた

夕の一番星には、おかしなことが起きていました。絵に描いてある星は 1 つなのに、画面では 3 つ並んで見えたのです。

原因は、雲を流す動きでした。雲は、空の部分を少しずつ横にずらした写しを 2 枚重ねて、流れているように見せています。その写しに、星まで入っていました。もとの星と、ずらした 2 つで、3 つです。星のまわりだけ、雲を流さないようにしたら、1 つに戻りました。

次は

「一日」の朝・昼・夕を、アプリのシーンに入れます。タイマーを開いた時刻で、朝・昼・夕・夜を選ぶ形にするかどうかも、考えるところです。