ワダチを作る #25：シーンを 4 つにしてタイマーで選べるようにし、習慣ごとに音量を決められるようにした

前回（#24）は、夜の町のシーン（絵＋動き＋BGM）を試作して、iPad と iPhone で確かめたところまででした。今回は、その続きです。

• シーンの絵を 4 つにした（清流・夏の田園・夕暮れの海・夜の町）
• 絵を動かすと、歪んで見える問題と付き合った
• タイマーで、シーンを選べるようにした
• 習慣ごとに、タイマーの音量を決められるようにした
• シーンを「シリーズ」にまとめ、曲は最後にまとめて作ることにした

シーンの絵を 4 つにした

夜の町に加えて、ChatGPT で絵を作り、動きを付けました。清流・夏の田園・夕暮れの海の 3 つです。

動きの付け方は、夜の町と同じです。動画ではなく、静止画の上に、ブラウザで小さな動きを重ねます。絵ごとに、見本のページを作って、私が見て「ここが不自然」と言い、Claude Code が直す、を何度もくり返しました。

• 清流：水の流れと、木の葉のちらつき
• 夏の田園：入道雲の形がゆっくり変わる・雲の影が手前から奥へ通っていく・遠くの陽炎
• 夕暮れの海：海面のきらめき・遠くの町の灯り

もう 1 つ、夕焼けの浜辺も作りました。ですが、波打ち際の波を自然に動かせず、やめました。波打ち際が写っていると、動いていないのがどうしても不自然です。そこで、波打ち際の入らない構図で絵を作り直したのが、夕暮れの海です。

絵を動かすと、歪んで見える

今回いちばん苦労したのは、これです。

清流の木の葉を「風で揺れているように」動かしてもらったら、葉が揺れているのではなく、蜃気楼のように歪んで見えました。夏の田園の稲穂を揺らしたときも、「稲穂が揺れているというより、画像全体が歪んでいる」ように見えました。

絵の一部を少しずつずらして動かすと、写っている形そのものが波打ちます。実際の葉や稲穂は、1 枚 1 枚が形を保ったまま動くので、これでは揺れて見えないのです。

くり返すうちに、自然に見える動かし方が分かってきました。

• 明るさを変える（葉のちらつき・町の灯り・海のきらめき）
• 上に描き足す（星・流れ星・雲の影）
• もともと形の定まらないものだけをずらす（水・雲・霞・陽炎）

逆に、動かしたくないもの（手前の草・岩・電柱・電線）は、色で見分けたり、範囲を描いたりして、止めておきます。夏の田園では、入道雲を動かしたら、手前の電柱まで一緒に動いてしまいました。電柱の暗い部分が青っぽい色で、空と見分けられなかったのです。電柱の場所を、四角で指定して止めました。

雲の影も、最初はまだらな灰色の影が出て不自然でした。青みのある 1 つの大きな楕円にして、遠近に合わせて手前から奥へ通すと、夏の田んぼらしくなりました。

タイマーで、シーンを選べるようにした

見本で決めた 4 つのシーンを、アプリに入れました。習慣の設定のタイマーの欄で、環境音と並べて選びます。

• 環境音とシーンは、どちらか 1 つです。シーンを選ぶと、環境音の代わりに曲が流れ、タイマーの後ろに動く絵が出ます。雨の音と曲が同時に鳴ると、ごちゃごちゃするからです
• シーンは、有料の機能です（途中の鐘・60 分のタイマーと同じく、今は管理者と、データベースで「有料」にした人だけ）
• 曲は、今は 4 つとも、夜の町の試作で使ったフリー素材の曲です。あとで、シーンごとの曲に差し替えます

動きは、夜の町が canvas、ほかの 3 つは WebGL のシェーダーで描いています。見本のページのシェーダーを、そのまま写しました。1 秒に 30 回まで、画面が見えないときや一時停止のあいだは描かない、端末の「動きを減らす」設定では絵だけ、にしています。

前回、「60 分のタイマーを iPad で最後まで流せるかは、まだ試していない」と書きました。シーンと曲を付けて iPad で 60 分流し続けてみたところ、最後まで問題なく動きました。

習慣ごとに、タイマーの音量を決められるようにした

朝、静かな時間に瞑想のタイマーを流すと、音が少し大きすぎます。昼に流すときは、ちょうどよいこともあります。そこで、習慣ごとに音量を決められるようにしました。こちらは、無料の機能です。

上の画像のとおり、横のスライダー 1 本（10〜100%、10% 刻み）と、「試しに鳴らす」のボタンです。1 本で、鐘・環境音・シーンの曲の全部に効きます。

iPhone と iPad では、アプリから音量を変えられない

作り始めて、ひっかかりました。iPhone と iPad の Safari では、<audio> の音量（volume）を、アプリの中から変えられないのです。音量は、端末の音量ボタンでしか変えられません。

そこで、流すときに音量を変えるのではなく、音を作るときに、音そのものを小さくすることにしました。

• 鐘と環境音は、もともとブラウザの中で 1 本の音声に組み立てているので（#4）、組み立てるときに小さくする
• シーンの曲は mp3 なので、いったんほどいて、小さくしてから、音声のファイル（WAV）に作り直して流す

端末を問わず同じように効くので、パソコンでも同じ作りにしました。

10% 刻みの、1 段ごとの差をそろえる

もう 1 つ、Claude Code から教わったことがあります。音の強さをそのまま割合にすると（50% なら半分の強さ）、耳には、小さい側で急に小さくなり、大きい側の差は分かりにくく聞こえるそうです。

そこで、100% から 10% までを、音の大きさの単位（dB）で等しく分けました。10% は、100% より 30dB 小さい音です。これで、スライダーの 1 段ごとの差が、同じくらいに聞こえます。

シーンを「シリーズ」にまとめる

シーンが増えると、選ぶのが大変になります。そこで、シリーズにまとめることにしました。

• 一日：朝・昼・夕・夜
• 季節：春・夏・秋・冬
• 自然：渓流・海など

1 つの絵は、1 つのシリーズだけに入れます。今の 4 つだと、夜の町が「一日」の夜、夏の田園が「季節」の夏、清流と夕暮れの海が「自然」です。

「一日」は、同じ場所・同じ構図で、時間帯だけを変えて描くことにしました。夜の町の絵をもとに、朝・昼・夕の絵を ChatGPT で作りました。

構図がそろっていると、動かす範囲（空・霧・湖・町・手前の草）を、4 枚で使い回せます。今は、朝は谷の霧と朝日の光の筋、昼は雲の影、夕は町の灯りと一番星、という動きを付けて、見ているところです。

曲は、最後にまとめて作る

曲は、Suno の有料版で作るつもりです（前回書いたとおり、今の規約では、有料プランのあいだにダウンロードした曲は、解約しても使い続けられます）。

ここで、進め方を変えました。シーンを 1 つ作るたびに曲を作るのではなく、

1. 絵と動きを先にそろえる。シーンごとに「曲のメモ」（雰囲気・速さ・合いそうな楽器）を残しておく
2. アプリには、できたシーンから、仮の曲のまま入れていく
3. シリーズがそろったら、曲の系統とキーワードを Claude Code と一緒に決めて、Suno の有料版を 1 か月だけ使って、まとめて作る

という流れです。絵がそろってから考えたほうが、シリーズの中で曲の雰囲気をそろえやすく、有料にする期間も 1 か月で済みます。

次は

「一日」の朝・昼・夕の動きを決めて、アプリに入れます。

もう 1 つ、勉強のような習慣のために、ポモドーロのタイマー（集中と休憩のくり返し）も作る予定です。集中 25 分・休憩 5 分のように決めて、止めるまでくり返します。休憩のあいだは曲を止めて、集中の時間だけを記録します。