この記事についてClaude（Anthropic）との共同編集により作成されました。
要約
- 視界遮断 Web アプリ tobari の 波紋の帳 と 花火の帳 に、クリック/タップした位置に対して反応する隠し挙動を追加した
- 波紋の帳は触れた位置から波紋が広がる。花火の帳は触れた位置を炸裂点として下から打ち上がる
- UI なし・ボタンなし・説明なし。触ってみて初めて気付く形で「触らせない」原則は維持
- 入力は
pointerdown統一で、マウス・タッチ・ペンを同じ扱い。モバイルの既定動作（スクロール・ピンチ）は抑止- 宵蛍の帳は今回見送り。蛍にクリックで反応させると「観察」ではなく「いじる対象」に変質してしまうため
夏シリーズ3作のリリース記事を出してから少し経った。 深夜作業中に自分でも開きっぱなしにしているのだが、何度か眺めているうちに、ふと指が動いた。 波紋の帳を見ながら、画面のどこかをポンと押してみたくなる。
tobari は本来 触らせない アプリだ。UI もボタンも出さず、視界に帳を下ろすだけのもの。 ただ、波紋とか花火という題材は、そもそもが「外の干渉に水面・空が応える」現象でもある。触られないことを前提にしていたら、題材のほうが少し物足りなさを抱えていた、というのが正直なところ。
そこで、UI は一切足さず、無言で応える隠し挙動として「クリック/タップ位置に反応する」だけを仕込んでみた。今回はその追加分の話。
公開先は前回と同じ：
入り口ページは /tobari/。
波紋の帳 — 触れたところから水面が応える
これまでの波紋の帳は、夜の池に数十秒のランダム間隔で水滴が落ちて、同心円の波紋が広がっては消える、というものだった。自動で勝手に進む情景。
そこに、こちらが触れた位置から波紋が広がる、という反応を足した。
動作
- クリック/タップした位置を中心に、自動の水滴とまったく同じ 3 本リング構成（主波 + 後続 2 本）で波紋が広がる
- 自動の水滴には同時上限が掛かっているが、クリックは上限を無視して常に発火する。連打すれば多数の波紋が同時に重なって走る
prefers-reduced-motionのときは、自動と同じく主波のみの控えめな振る舞いになる- 自動の水滴は今までどおり、勝手にぽつぽつ落ちる
見た目を自動と完全に同じにしたのは意図で、これは「触ったとき用の特別な演出」ではないほうが、隠し挙動として馴染む。自動で広がっていた波紋と区別がつかない波紋が、自分の触れた位置にも生まれる、というのがちょうどよい距離感だった。
連打で上限を無視するようにしたのは、深夜に行き詰まったときに画面をぽつぽつ叩いて、暗い水面に波紋を撒き散らせる用途を、わりと真面目に考えてのこと。触らせない アプリだとしても、撒き散らさせるくらいは許容しておきたい。
花火の帳 — 触れた先に向かって打ち上がる
これまでの花火の帳は、数十秒のランダム間隔で、画面上の方のランダムな位置に向かって、しだれ系の余韻花火が打ち上がるものだった。
今回はその炸裂点を、こちらが指で示せるようにした。
動作
- クリック/タップした位置を炸裂点として、ロケットが画面下からその位置に向かって打ち上がる
- 画面のかなり下のほうをクリックした場合でも、最低限の上昇距離は確保される（炸裂点に下限を入れた）
- 粒子・色パレット・しだれ性・残像など、見た目はすべて自動打ち上げと同じ。
prefers-reduced-motionのときも自動と同じ抑制が掛かる - 連打クールダウンはない。間隔を空けずに何度も打ち上げられる
クリック位置を炸裂点に取った設計判断は、「位置を指で示す」という感覚を残したかったからで、ロケットの軌道に違和感を出さないために、横方向はわずかにジッタを入れている。指で押したきっかり真上から上がる、という機械的な動きにはしていない。
下端クリックで炸裂点を下げすぎないクランプは、これがないと「下のほうを押した瞬間に画面の下で勝手に弾けて、上がる前に終わる」という間の抜けた挙動になってしまったので、最低限の上昇距離だけ強制で確保した。下のほうを押しても、ちゃんと上がってから散る。
公開 URL: https://tobari-4qj.pages.dev/hanabi/
「触らせない」原則との関係
tobari のキャッチコピーは 初回リリース記事 のときから変わっていない。視界に帳を下ろす、それだけのアプリ。回遊させない、通知で呼び戻さない、滞在時間も伸ばさない。触らせない設計を一貫させている。
この姿勢のまま、今回のような「触ったときの応答」を入れて矛盾しないのか、というのは作りながらしばらく考えた。
行き着いたのは、UI を出さないことが守れるなら矛盾しない、という整理。
- ボタンも、説明文も、ヘルプも、何も置かない
- 触れる前の見た目は今までと完全に同じ
- 試しに押してみた人だけが、無言で水紋や花火が応えるのに気付く
触らせないというのは「触ってはいけない」ではなく、「触らせるための導線を引かない」ということで、こっそり押してみた人に対して画面が応えること自体は、原則と矛盾しない、と判断した。むしろ、ボタンを置いて「ここを押すと反応します」と説明したほうが、tobari の世界観は壊れる。
「触ってもいいよ」と言わない代わりに、触ってしまった人に対しては、ちゃんと応えるようにはしておく。それくらいの距離感。
宵蛍の帳は今回見送った
夏シリーズ 3 作のうち、宵蛍の帳（hotaru）にはクリック反応を入れていない。
理由は単純で、蛍を指で押して反応させると、夜の野に偶然居合わせた個体を眺めている、という最初の意味付けが壊れるから。蛍に対するクリックの自然な解釈は「捕まえる」「追い払う」「光らせる」あたりになるが、どれも tobari の宵蛍の帳が狙っている距離感とは合わない。
波紋と花火はそもそも「外の干渉に応える」現象なので隠し挙動を載せやすかったが、蛍は「観察する」現象だ。観察対象は触らないほうがいい。
将来、季節モチーフをさらに増やしたときに、雪・焚き火・雨あたりは触る/触らないのどちら側に倒すか、また考えることになりそう。
共通実装メモ
実装側は短く。
- 入力は
pointerdownで統一して、マウス・タッチ・ペンを同じ経路で扱う - CSS に
touch-action: noneを入れて、モバイルの既定動作（スクロール・ピンチズーム・選択）を抑止 - 自動の水滴／ロケットの発火経路は完全に従来通り。クリック経路だけが新規で、内部の
spawnDroplet/spawnRocketに座標を渡せるオプションを足しただけ
1 ファイル完結（HTML + CSS + Vanilla JS、外部依存なし）の方針は今回も維持している。差分は各ファイル内で完結していて、新しいファイルもライブラリも増やしていない。
おわりに
触らせないアプリに、触ったときの応答だけそっと足した。
それくらいの追加です。普段どおり開いて眺めていてもいいし、深夜に手持ち無沙汰になったら画面のどこかをポンと押してみてください。何かが起きると思います（書いてしまうと隠し挙動じゃなくなるので、ここまで）。
入り口は /tobari/ です。お好きな帳を選んでいってください。