ワダチを作る #4：坐禅のタイマーを、iPad の実機で試して、作り方を変えた

前回（#3）で、習慣の登録と毎日の記録を作りました。今回は、ワダチで一番欲しい機能、坐禅のタイマーです。

• iPad mini の実機で、まず試作して確かめた
• 試作の結果で、音の作り方を変えた（Web Audio → 音声ファイル）
• 習慣ごとのタイマーの設定と、本物のタイマーの画面
• 時計で数える作りが、実機でずれた
• まだ直せていない不具合

なぜ、最初に試作したのか

Notion の企画で、「最初に iPad mini の実機で試作して確かめる。動かなければ、そこで考え直す」と決めていました。ブラウザで動くタイマーには、癖があるためです。

• 音は、押した操作の中から鳴らし始めないと、再生できない
• 画面がロックされると、ブラウザの処理が止まる・遅れることがある
• 画面を暗くしないために、Wake Lock を使う必要がある

毎朝使うものなので、「作ってから動かない」とわかるのが、一番困ります。そこで、習慣とは結びつけない、確かめるためだけの画面を先に作りました。

試作：Web Audio で鳴らした

最初の試作は、鐘と環境音（雨・波）を、ファイルを使わずに Web Audio で作りました。素材の利用条件を確かめる前の、仮の音です。

• 終わりの鐘は、開始のときに、音の時計に予約する（画面の処理が止まっても、音のほうが鳴らす）
• 残り時間は、時計の差（終わる時刻 − 今）で出す
• 画面は、Wake Lock で点けたままにする
• 画面に「診断の記録」（折りたたみ）を付けた。再生の状態の変化や、予定とのずれを残して、実機の結果を、貼って持ち帰れるようにした

実機で何を確かめるかは、チェックリストにして docs/timer-prototype.md に書きました。

iPad mini の実機の結果

画面をロックして試すと、2つのことが起きました。

• ロックしているあいだ、環境音が聞こえない
• 終わりの鐘が、ロックしていた時間ぶん、あとにずれて鳴る（残り時間の表示は、正しかった）

iOS は、画面のロックで、Web Audio の音の時計を止めるようです。「終わりの鐘を、音の時計に予約する」という作りが、ちょうど、止まる側に乗っていました。

音声ファイル（<audio>）に変えた

そこで、もう1つの出し方と比べました。開始の鐘・環境音・終わりの鐘を、1本の音声（WAV）にして、ブラウザの中で作り、<audio> で流す方法です。終わりの鐘は、音声の「設定の時間」の位置に入れておきます。

結果は、ロック中も環境音が流れ、終わりの鐘が、終わった瞬間に鳴りました（Safari でも、ホーム画面に追加した PWA でも）。

音声を作るのは重そうですが、11,025Hz・16bit・モノラルにすれば、30分でも約40MBで、作るのに約1秒でした。画面は、区切って作るので止まりません。

この結果から、本物のタイマーは、音声ファイルだけにすると決めました。Web Audio は、コードごと消しました（実機の結果を残すため、手順の文書だけ残しました）。

鐘が「かか〜ん」と重なった

比べているあいだ、Web Audio のほうで、鐘が重なって聞こえる不具合も出ました。診断の記録を見ると、原因がわかりました。

ロックから戻って、鐘の予約を組み直したあと、「音の時計が 0.9 秒遅れている」と判断して、組み直した鐘を、鳴っている最中に取り消して、もう一度鳴らしていたのです。遅れを、最初の開始を基準に測っていたので、ロックしていた 0.9 秒が、組み直したあとも「遅れ」に数えられていました。基準を、組み直した時点に変えて直りましたが、そのあとで Web Audio をやめたので、この直しは、使わなくなりました。

本物のタイマー

習慣ごとの設定

習慣に、タイマーの設定を持たせました。「タイマーを使う」のチェックと、時間（1〜30分）・環境音（なし・雨・波）です。使わないときも、時間と環境音は残します。時間の上限が30分なのは、音声を作る重さのためです。

設定を足すと、習慣が100個を超えたとき、一覧が開かなくなる不具合も見つかりました。D1 は、1つの SQL 文に渡せる値が100個までです。id の一覧を、小分けにして問い合わせるようにしました。手元の E2E のデータがたまって、はじめて気づきました。

記録の画面から開く

タイマーを使う習慣には、記録の画面に「▶ 10分」のリンクが出ます。

タイマーの画面

全画面で、残り時間を大きく出します。坐禅のあいだ、画面はほぼ見ないので、必要なのは、残り時間と、一時停止・止めるだけです。

一時停止と再開も作りました。電話の着信のような中断も、同じ一時停止になります。

開始は、押した操作の中で、まず無音を再生して、<audio> を「使える」状態にしてから、音声を作ります。音声を作り終えてからでは、iOS は再生を許してくれません。

時計で数える作りは、実機でずれた

本物の最初の版は、座った時間と残り時間を、時計（再生している時間の合計）で数えました。画面の一時停止は問題なかったのですが、実機で、次のことが起きました。

• ロック画面で一時停止して再開すると、環境音が消える（画面の時間だけが進んでいた）
• 一時停止があると、終わりの鐘が、タイマーの完了より、一時停止したぶんあとに鳴る

音が出ていないのに時間が進む、という、音と時間のずれです。直し方は、「音と時間を、同じもので決める」ことでした。

• 座った時間・残り時間・一時停止か再生中かを、音声の再生位置と、pause・play の合図で決める
• 残りは、「設定の時間 − 再生位置」
• 再生位置が設定の時間になったときが、終わりの鐘が鳴るとき
• 一時停止は、音声を止めるだけ。再開は、続きから流す

画面のボタンも、ロック画面のボタンも、電話による中断も、音声の合図を受けて、画面に映すだけにしました。音が止まれば時間も止まるので、ずれようがありません。

まだ直せていない不具合：iPad の PWA だけ

この版でも、1つだけ、直っていないことがあります。

• iPad の、ホーム画面に追加した PWA だけ、ロック画面で一時停止 → 再生すると、環境音が鳴らず、経過時間も戻る
• iPad の Safari と、iPhone（PWA でも Safari でも）は、問題なし

見立ては、iPadOS の PWA が、一時停止のあいだにページを止めて、読み直していることです。診断の記録を貼って調べましたが、原因を確かめきれませんでした。

本番は Access の後ろで、使うのは自分だけです。公開の前に直すと決めて、Issue（#42）にして、いったん保留にしました。

---

おわりに

タイマーで決めたことを並べます。

• 音は、音声ファイルだけにする（Web Audio は、画面のロックで止まる）
• 開始は、押した操作の中で、無音を再生して、<audio> を使える状態にする
• 座った時間・残り時間・一時停止かは、音声の再生位置で決める（時計で数えない）
• 試作を実機で確かめたので、本物を作る前に、作り方を変えられた

次は、タイマーの記録です。開始で「やった」が付き、座った時間を残します。それを本番に出すところまでを、次回に書きます。