ワダチを作る #30：「タイマーだけ」の習慣と、Safari でだけ出ていた線
前回（#29）は、シーンの曲を作った話でした。同じ日に、ほかにもいくつか直したので、今回はそちらをまとめます。
- 記録しない「タイマーだけ」の習慣を足した
- ランダムを、使うたびに選び直す形にした
- Safari でだけ、シーンに線が出ていた
- 本番に出した
記録しない「タイマーだけ」の習慣
ワダチのタイマーは、もともと瞑想のための機能です。タイマーを始めると、その日の習慣に「やった」が付きます。
使っているうちに、仕事の集中の時間にも、このタイマーを使いたいと思うようになりました。シーンや環境音、ポモドーロがあるので、作業の時間にもちょうどいいのです。ただ、仕事は「習慣」として記録したいものではありません。記録の画面に並ぶと、毎日の習慣の数え方が変わってしまいます。
そこで、記録しない習慣を登録できるようにしました。
- 習慣の登録の画面の最初で、「記録する」か「記録しない（タイマーだけ使う）」かを選ぶ。登録したあとは変えられない
- 記録しないを選ぶと、名前・アイコン・タイマーの欄だけになる
- トップページとメニューに「タイマー」を足して、そこに一覧を出す。▶ でタイマーを始められる
- 記録の画面・積み上がりには出さない。タイマーを使っても、「やった」は付かない
左から、習慣の登録（記録しない）／タイマーの一覧／タイマーの画面（ランダムで、今回の音が出る）
作りで迷ったのは、データの持ち方です。ワダチは、朝活のような習慣も、固定の習慣も、同じ「習慣」として持つ決まりにしています（種類の列を作らない）。それに合わせて、タイマーだけのものも「習慣」の 1 つにして、「記録するか」の印を 1 つ足すだけにしました。タイマーの設定（時間・音量・シーン・ポモドーロ）は、今の習慣のものがそのまま使えます。
開発環境で使ってみると、タイマーだけの習慣のタイマーを開いたとき、ヘッダーのメニューの印が「タイマー」ではなく「習慣」に付いていました。印は画面の URL で決めていて、URL だけでは、タイマーだけの習慣かどうかが分からなかったためです。画面のデータで「タイマー」を渡せるようにして直しました。
ランダムを、使うたびに選び直す
環境音やシーンには「ランダム」があります。これまでは日替わりで、同じ日なら、何回タイマーを始めても同じ音・同じシーンでした。
瞑想は 1 日 1 回なので、それで困りませんでした。ところが、タイマーだけの習慣で仕事に使うと、1 日に何回も始めます。毎回同じでは、ランダムの楽しさがありません。
そこで、タイマーを始めるたびに選び直す形に変えました。
- 開始の前に「ランダム（今回は、焚き火）」のように、次に流れるものを出す
- 止めてもう一度始めると、選び直す
- ポモドーロは、集中と休憩をくり返すあいだは同じまま
- 前回と同じものは、続けて選ばない
前回に何を選んだかは、データベースには持たず、ブラウザに習慣ごとに覚えておくだけにしました。別の端末で使った分は見ませんが、そこまでそろえなくても困らないと考えました。
シーンの「時間に合わせる」「季節に合わせる」は、ランダムではないので、今までどおりです。
Safari でだけ、シーンに線が出ていた
12 のシーンを iPad で見ていて、気づいたことがありました。
- 清流の上のほうに、まっすぐな横線が見える。線より下だけ光が差していて、上には差していない
- 雨の池の右上に、縦の線と、そこから右に伸びる薄い横線が見える
- 夏の田園の雲の左側で、色がくっきり分かれている
どれも、パソコンの Chrome では出ていませんでした。
シーンの動きは、絵の上で「ここは光を揺らす」「ここは霧を流す」という範囲を決めて、その中だけを動かしています。範囲の形は多角形なので、そのままだと境目がくっきりします。そこで、範囲をぼかして、境目をなめらかにしていました。
このぼかしに使っていたのが、canvas（ブラウザの中で絵を描く仕組み）の filter です。調べてみると、Safari は、canvas の filter に対応していません（設定で有効にしないと使えず、iPhone・iPad・Mac の Safari では、ふだんは効きません）。指定しても、黙って無視されます。
つまり Safari では、範囲がぼけずに、多角形の辺がそのまま見えていたわけです。清流の横線は、光の範囲の上の辺でした。パソコンの Chrome ではちゃんとぼけるので、手元の確認でも、自動テストでも気づけませんでした。
直したあとの清流。光の範囲の上のほうも、なめらかに消える
直し方は、ぼかしを自分で計算することにしました。画像の画素を読み出して、まわりの画素と平均する処理（箱型のぼかし）を 3 回かけると、filter のぼかしとほぼ同じになります。これを全部のシーンで使うようにしました。どのブラウザでも同じ計算なので、Chrome で見た目を確かめれば、Safari でも同じになります。
ぼかすのは、シーンを開いたときに 1 回だけなので、重さも気になりませんでした。
ブラウザの機能は、黙って効かないことがある。今回の教訓です。iPhone・iPad で使う人が多いサービスなので、Safari で見て確かめることを、もっと早くにしておけばよかったと思います。
本番に出した
今回の分（タイマーだけの習慣、ランダム、シーンの曲、鐘の音、Safari の線の直し）を、まとめて本番に出しました。
お知らせは、無料で使える 2 つ（タイマーだけの習慣と、ランダムと鐘の音）だけを出しています。シーンは有料の機能なので、有料版を始めるときに、まとめて知らせるつもりです。
次は
有料版の中心になるシーンが、絵・動き・曲までそろったので、いよいよ有料版の公開です。特定商取引法に基づく表記のページ、本番の Stripe の設定、テスタへのお礼のコードを用意します。