Overgrown、植物が放置したタブを侵食する
Overgrown, when plants invade your abandoned tabs (charliegerard.dev)
要約
開発者が作成したChrome拡張機能「Overgrown」は、長期間放置されたブラウザタブを植物が侵食する様子を視覚化します。タブが neglect clock（無視時間計）で一定時間放置されると、植物が成長して表示を覆い隠し、操作を制限します。マウスで植物を「切り裂く」ことでタブを解放でき、タブへのアクセスをよりインタラクティブで楽しい体験に変えることを目的としています。
全文翻訳
Overgrown、植物が放置したタブを侵食する
先日、「Overgrowth」（過剰成長）という言葉について、ちょっとした創作活動をしていました。最初に思い浮かんだのは、植物が放棄された建物を覆い尽くすような、終末的なシーンでした。例えば、「ウォーキング・デッド」や「The Last of Us」のような世界です。
次に、このアイデアをデジタル世界に応用したいと考えました。「放棄された」という言葉から、私のブラウザタブのことを思い浮かべました…もし、私がタブを読みもせずに放置する時間が長くなるにつれて、植物がゆっくりとそれらを乗っ取っていくとしたらどうなるでしょう？まるで、植物に覆われたドアを開けようとするかのように、タブにアクセスするためにこれらの侵略的な植物を片付けなければならないとしたら？
そこで、まさにその機能を持つ、楽しくて小さなChrome拡張機能を作りました。これでタブをもっと読むようになるわけではありませんが、まあいいでしょう。
デモ
［画像: Overgrownのデモ］
アイデア
- 各タブには無視時間計（neglect clock）があります。これは、タブが表示されていない間は実行され、タブを見ている間は停止します。
- タブが無視される時間が長くなるほど、植物は端から中央に向かってより多く成長します。
- タブが5%以上植物に覆われると、ツタの裏にあるページは壁で囲まれます。スクロールはできますが、クリックしたり、選択したり、ドラッグしたりすることはできません。
- 解放するには、マウスをツタにドラッグして切り裂く必要があります。5%まで減らせば、最後のツタが落ちます。もしタブを再び放置すると、ジャングルが再び成長し始めます。
- ただ楽しむために、錆びたマチェット、チェーンソー、火炎放射器の中から好きな武器を選ぶことができます。
- タブが完全に植物に覆われるまでの時間を変更することもできます。
当初は、植物をすべて切り裂くまで、過剰成長したタブを閉じられないようにすることも考えていましたが、それはあまりにも煩わしいだろうと思いました…😅
拡張機能
コードは主に3つの部分に分かれています。バックグラウンドのロジック、タブ上に植物とアニメーションを表示するコンテンツスクリプト、そして拡張機能自体のUIを処理するポップアップフォルダーです。
バックグラウンドワーカー
background.jsファイルは、開かれた各タブでジャングルを開始し、タブが閉じられたらそれを忘れます。
ポップアップ
このフォルダーは、時間設定、武器選択、タブのリストとその現在の状態のための小さなコンポーネントを含む、拡張機能のUIを処理します。
オーバーレイ
contentフォルダーには、植物と武器のSVG、クラスターの位置決めと成長のロジック、neglect clock、そしてサウンドが含まれています。
しばらくぶりに物作りを再開したいと思っていて、このプロジェクトは始めるのに小さくて楽しい方法だと感じました。新しいコンピューターでこれを書いていますが、現在「わずか」22個のタブが開いていますが、そのうち14個はすでに完全に植物に覆われています…😂これでタブをもっと読むようになるわけではありませんが、ツタを切り裂くことで、タブに戻るのがより楽しくなります！🪚🌿