作った動機 — Colab Pro+ を契約してない人間にも夜は来る#

学習中、Colab Pro+ や Colab Enterprise を契約していれば「画面を閉じても回る」が成立する。 が、自分のような節約勢にとっては「ローカルで回す」「画面を開けたままにしておく」が日常で、そのまま深夜まで PC を起こしておきたい場面が多い。

このとき問題になるのが画面のまぶしさだ。深夜に煌々と光るモニターは普通に眩しいし、寝室と作業空間が一緒の人にとっては家族の問題にもなる。 かといって「ディスプレイの電源だけ切る」のは、OS のスリープ設定や電源管理プロファイルを丁寧に組まないとうまくいかない。Mac だと「ディスプレイをオフにする時間」と「コンピュータをスリープさせる時間」を別々に設定する必要があるし、Windows もこのへんは似たようなもの。 ちゃんと設定すればできる。が、それが面倒くさいときに開けばいい場所として、ブラウザのタブひとつで完結するアプリがあると便利だなと思った。それが tobari。

ターゲットは絞ってある：

• 学習を回している、けど Colab Pro+ を契約していない人
• 深夜作業で画面のまぶしさを抑えたい人
• スリープ設定をいじるのが面倒な人

思想 — 「触らせない」アプリ#

普通の Web サービスは、回遊してもらう、通知で呼び戻す、滞在時間を伸ばす、そういう方向で設計される。 tobari はその逆を狙っている。

• 開いた瞬間に始まる
• UI もボタンも設定もない
• 通知も音もない
• 離脱は歓迎する（むしろ離脱してこそ）

開いた人が「なるべく早くこのページに触らなくて済む」ように設計したい、というのが裏側の方針。 ただし完全に「触らせない」だけだと、こちらの収益経路（ブログの広告）と切り離されすぎる。なのでブログ側で導線と思想と使い方を語り、tobari 側はひたすら無言、というロール分担にしている。

3 つの帳#

現在は 3 種類を用意している。

screen を落とさない工夫を入れている#

このアプリで一番大事なところは、開いている間「画面が勝手にスリープしない」こと。 これは Screen Wake Lock API を使っていて、タブがアクティブな間は画面のスリープを抑止している^1。

実装の詳細は記事の主題ではないので深入りしないが、要点だけ書いておくと：

• 開いた瞬間に Wake Lock を取得する
• タブが裏に行くと OS が自動で解放する
• 戻ってきたら再取得する
• 非対応ブラウザ・OS による拒否はすべて無音で握りつぶす

注意点として、これはあくまで画面のスリープ抑止であって、OS 全体のシステムスリープとは別軸になる。 たとえば Mac で「ディスプレイをオフにしてから 5 分でスリープ」みたいな設定になっていると、画面が起きていても本体は落ちうる。Colab 放置のような通常用途ではまず引っかからない（画面が起きている＝アクティブ判定される）が、原理だけは念のため。

ホスティングは Cloudflare Pages#

Cloudflare Pages を試してみたかった、というのが正直なところ大きい。 Vercel・Netlify・Cloudflare Pages・その他、無料ホスティング各社の細かい比較は別記事に書いた：Webアプリを無料で公開したい、ホスティングサービスを商用利用と放置耐性で比較した。 このときの結論として、無料で帯域幅無制限、かつ商用利用 OK という条件で Cloudflare Pages が一番素直だった、というのが tobari の置き場所決定の理由。

ブログ側（このゆるディープ）で導線と説明、Cloudflare Pages 側でアプリ本体、というロール分担にしている。tobari 側は完全に無広告。

リポジトリは非公開にしている#

tobari は HTML + CSS + Vanilla JS だけで書いていて、フレームワークも使っていない。 真似ようと思えば誰でも真似られる構造で、それ自体は別にいい（むしろ似たような帳アプリは増えてほしい）。 が、せっかく作ったこだわりの部分は素直に持っておきたかったので、リポジトリは非公開にしてある。

盗まれて困るほどのものでもない、というのは自覚している。これは多分に気分の話。

使い方の提案 — /tobari/ をブクマしてもらえると嬉しい#

tobari の入り口ページ /tobari/ には 3 つの帳へのボタンを並べてある。 おすすめの運用は このページをブクマしておいて、その日の気分で帳を選ぶ こと。

直接 tobari-4qj.pages.dev/towa/ をブクマしてもらってもアプリ自体は動くのだが、こちらとしては入り口を経由してもらえると次のメリットがある：

• 今後、帳の種類を増やしたときに即座にラインナップを更新できる
• 「今日はちょっと気分を変えて深海にしよう」みたいな選び方が可能
• ブログ側で広告経路を残せる（こちら都合）

最後のひとつは率直に書いておく。すぐに透ける欺瞞は嫌いなので。 ブログを置いておくにはコストがかかるし、それを払えると今後も別のアプリが作れる、という循環で見てもらえると助かる。

今後の予定 — 帳の種類は増える#

仕様メモには次のラインナップが控えている：

• 雨夜の帳（薄暗い帳に雨）
• 水面の帳（水面にぽつぽつとランダム波紋）
• 雪明かりの帳（暗めだが白ベース。温かみのある灯りの明滅）
• 吹雪の帳（ホワイトアウト）
• 篝火の帳（焚き火系）
• 星空の帳（変化なし。満天の帳）
• 星巡りの帳（星空の変化あり）
• 宇宙の帳

どれも 1 ファイルで完結する小さなアプリとして、気が向いたタイミングで足していく予定。

おわりに#

視界に、帳を下ろす。

tobari はそれだけのアプリ。 深夜作業や学習中の PC 放置、ふと画面を暗くしておきたい瞬間に、ブラウザのタブひとつで開ける場所を用意した、という話でした。

入り口は /tobari/ です。お好きな帳を選んでいってください。

参考文献#

1. Screen Wake Lock API - MDN https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API