ワダチを作る #24:有料プランの中身を考え、タイマーに「途中の鐘」と「夜の町のシーン」を試した

前回(#23)の終わりに、タイマーの「背景+BGM」を考えた話を書きました。今回は、その続きです。

  • カレンダーを、日曜始まりにした
  • 有料プランの中身を考え、途中の鐘と 60 分のタイマーを作った
  • 夜の町のシーン(絵+動き+BGM)を試作し、iPad と iPhone で確かめた
  • 編集の画面で、最初の入力が元に戻る不具合を直した

カレンダーを、日曜始まりにした

前回、日付を選ぶ欄とやった日のカレンダーを、月曜始まりにしていました。ワダチの「週○回」は、月曜から日曜で数えるからです。

ですが、ハコヅミ(1 つ目のサービス)のカレンダーは日曜始まりです。Claude Code に「カレンダーの最初って、普通はどちらが多い?」と聞くと、日本では日曜始まりが多いそうです。壁掛けや手帳のカレンダー、iPhone や Google カレンダーの日本の既定も、日曜始まりです。月曜始まりは、ヨーロッパや国際的な日付の決まりの考え方とのことでした。

そこで、カレンダーの並びは日曜始まりにしました。「週○回」の数え方は、月曜から日曜のままです。数え方を変えると、積み上がりの数字が変わってしまうからです。

有料プランの中身を考えた

ここまで作って、ワダチは自分が欲しかった機能がほぼそろいました。毎日実際に使っていて、前の Calm と Notion の組み合わせより、ずっと使いやすくなりました(自分で作ったので、当たり前ですが)。

そこで、有料プランの中身を考えました。前に決めた方針は、「数ではなく、機能で差を付ける」です。習慣の数や記録の年数に上限を付けると、続けている人ほど困る形になるからです。

Claude Code にも案を出してもらいました。

  • タイマーまわり:シーン(背景+BGM)・途中の鐘・30 分より長いタイマー・音の組み合わせ
  • 振り返り:1 年の積み上がりを 1 枚の画像にまとめる「今年の轍」
  • 見た目:テーマの色・ホーム画面のアイコン
  • 応援プラン:機能の差はほとんど付けない

逆に、通知(リマインダー)やひとことメモは、続けるための基本の機能なので、無料のままがよい、という意見でした。私もそう思います。

まずは、作りやすい「途中の鐘」と「60 分のタイマー」から作りました。課金の仕組み(Stripe・規約・特定商取引法の表記)は作るのが重いので、後回しです。それまでは、管理者と、データベースで「有料」にした人だけが使えます。無料の人には、欄も出しません。

途中の鐘

瞑想のアプリによくある機能です。「5 分ごと」のように、タイマーの途中で小さな鐘を鳴らします。

習慣の設定のタイマーの欄。「タイマーを使う」にチェック、時間 20 分、その下に「途中の鐘 5 分ごとに、小さな鐘を鳴らす(空なら鳴らさない)」の欄、環境音の選択肢

「途中の鐘」は、分の数を自由に入れる

ワダチのタイマーは、開始の鐘・環境音・終わりの鐘を、1 本の音声にまとめて流しています(#4)。途中の鐘も、同じ鐘の音を小さくして、その中に入れました。音声の中の決まった位置にあるので、一時停止してもずれず、画面をロックしていても鳴ります。

60 分のタイマー

今のタイマーは 30 分までです。音声をブラウザの中で作っているので、長いほど重くなるからです(30 分で約 80MB)。有料の人だけ、60 分まで設定できるようにしました。

ただ、60 分だと音声は約 160MB になります。iPad でこの大きさの音声を作って、最後まで流せるかは、まだ試していません。これから実機で確かめて、足りなければ、音声の作り方を変えるつもりです。

夜の町のシーンを試作した

いちばん作ってみたかったのが、シーンです。YouTube の作業用・瞑想用の BGM 動画のように、タイマーの後ろに風景を出し、音楽を流します。

絵は ChatGPT、動きはブラウザで

前回書いたとおり、背景は動画ではなく、静止画の上に、ブラウザで小さな動きを重ねる作り方にしました。

絵は ChatGPT で作りました。プロンプトでは、あえて「星は描かない(後から星のエフェクトを追加するため)」と頼んでいます。動く星を重ねたときに、絵の中の止まった星と混ざらないようにするためです。

その絵に、次の動きを重ねました。

  • 星のまたたきと、ときどき流れ星(空の部分だけ。地平線に近いほど少なく、暗く)
  • 町の明かりのゆらぎ(絵の中の、明るく暖かい色の点を自動で見つけて揺らす)
  • 手前の草原の、風に揺れる草
タイマーの全画面。夜空に星が光り、遠くの山と、明かりの灯った町、手前の草原の絵。まん中に「瞑想(10:00)」と残り時間「9:58」、一時停止と止めるのボタン

タイマーの後ろに、夜の町。星・町の明かり・草が、少しずつ動く

最初は、草原に風が通るとき、明るい帯がふわっと横切るようにしていました。ですが、見てみると不自然だったので、やめました。また、手前に 1 本だけ妙に明るい草が出ていました。草の色を、根元の絵の色から作っていたので、黄色い花の上に生えた草だけ明るくなっていたのです。色を草原の暗い緑の範囲に収めて直しました。

音楽:Suno の利用条件を調べた

曲は、AI で作ることを考えています。Suno で作ってみたところ、無料プランでは、曲をダウンロードできませんでした。

そこで、「1 か月だけ有料プランにして曲を作り、そのあと無料に戻したら、その曲は使い続けてよいのか」を Claude Code に調べてもらいました。Suno の規約は 2026 年 9 月 3 日に変わっていて、今の規約では、有料プランのあいだに正式にダウンロードした曲は、解約しても商用で使い続けられることになっていました。一方、無料プランで作った曲は、あとで有料にしても使えるようにはなりません。

(規約は変わることがあるので、実際に作るときに、もう一度確かめるつもりです。)

今回は試作なので、曲は試しに使ってよいことを確かめたフリー素材にしました。

音質:聞き比べると、差が大きかった

ワダチのタイマーの音声は、22,050Hz・モノラルで作っています。環境音(雨や波)には、これで十分でした。

試作の見本に、元の曲(44.1kHz・ステレオ)と、アプリと同じ形(22,050Hz・モノラル)を切り替えるボタンを付けて、聞き比べました。曲だと、差は結構ありました。有料の機能なので、44.1kHz・ステレオを使いたいところです。

ただ、今のように 1 本の音声にまとめると、44.1kHz・ステレオでは 30 分で約 320MB になり、iPad では作れません。そこで、曲は別の音声として、くり返し流すことにしました。

iPad でロックしたら、音が止まった

ここが一番の心配でした。ワダチのタイマーは、iPad の画面をロックしても音が鳴り続けるように、苦労して作っています。音声が 2 つになっても、大丈夫か。試作を開発環境に出して、iPad と iPhone で試しました。

最初に iPad の Chrome で試したところ、うまくいきました。次に Safari で試すと、ロックした瞬間に、曲も鐘も止まりました。

診断の記録を見ると、Safari が 2 つの音声をまとめて止めていました。音声が 1 つなら止まらないので、2 つあることが原因と見ました。そこで、念のため「ブラウザの中で、音声を AAC に圧縮できるか」を調べる行を足しました。圧縮できれば、曲と鐘を 1 本の音声にまとめても、軽くできます。iPad も iPhone も、圧縮できました。

ところが、そのあと何度試しても、Safari で止まらないのです。iPhone の Safari、iPad の Safari、ホーム画面に追加したアプリ(PWA)、どれもロック中に途中の鐘・終わりの鐘・曲が鳴り続けました。1 回目と同じく、1 分半たってからロックして最後まで置いても、全部鳴りました。

最初の 1 回だけ止まった理由は、わかっていません。ひとまず、2 つの音声のまま進めることにしました。もしまた止まるようなら、AAC の 1 本にまとめる作り方に切り替えます。準備はできています。

試作で確かめていなければ、このあたりの癖はわかりませんでした。実機で試すのは大事です。

最初に変えた設定が、元に戻る不具合

60 分のタイマーのテストを書いていて、気になることがありました。習慣の編集の画面で、最初にタイマーの時間を変えると、入れた値が元に戻ってしまうのです。2 回目からは戻りません。

調べてみると、タイマーの時間だけでなく、頻度(毎日・曜日・週○回)と「タイマーを使う」のチェックも、最初に変えると戻っていました。変えたつもりの設定が保存されない、困る不具合です。

原因は、画面を作っている Svelte の仕組みにありました。編集の画面では、何か変えると「まだ保存していない変更があります」と出して、保存のボタンを画面の下に貼り付けます。この表示と、欄の値を入れる処理が、たまたま同じ 1 つの更新の処理にまとまっていました。Svelte は、画面を読み込んだあと、欄の初めの値を整理するときに、「最後に入れた値」の覚えも消してしまいます。そのため、最初の変更で表示が切り替わると、欄に初めの値を入れ直していたのです。

保存の段を別の部品に分けて、直しました。直す前のコードではテストが 3 件とも落ち、直したあとは通ることを確かめています。テスタの方にも、お知らせで知らせました。

そのほか

使い方のページの「積み上がり」の絵が、前の画面のままでした。1 枚に撮ると縦に長くなりすぎるので、積み上がりの一覧・習慣化の目安・やった日のカレンダーの 3 枚に分けて撮り直しました。

次は

次は、シーンの素材づくりです。曲を、商用で使える形で作ります。絵も、夜の町のほかに 1〜2 セット作るつもりです。そのあと、タイマーの設定でシーンを選べるようにします。

← トップページに戻る