とある個人開発者が、「ブラウザのタブ」を大量に利用してゲームを実装した。240個ものタブを敷き詰めてゲーム画面と化すシステム「Faviconic」を構築し、ピンポンゲーム『Pong』風ゲームをmacOS上で動作させ、話題を呼んでいる。
今回「ブラウザタブ」で再現された『Pong』は、1972年に米アタリ社が展開したアーケードゲーム。パドル（白い棒）を上下に動かしてボールを跳ね返し合う、卓球やホッケーのようなルールをもつ。当時として非常に珍しいコンピューターゲームであり、そのシンプルなゲームプレイが評価されブームに。ビデオゲームを象徴するアイコニックな作品であり、シンプルな画面はゲーマー以外でも見た覚えがあるかもしれない。
アタリの『Pong』
今回、そんな『Pong』風ゲームをブラウザのタブ上で遊べるようにしたツールが「Faviconic」だ。開発したのは、個人開発者のNolen Royalty（eieio）氏。過去にも実験的なゲーム作品を多数手がけている人物だ。「Faviconic」はmacOS上で動作するよう作られており、実際に『Pong』をプレイする様子が同氏によって公開されている。
Nolen氏によるプレイ動画では、「Faviconic」のプログラムを起動すると、画面には大量のタブが出現。「favicon（ファビコン）」を敷き詰めるように整列されている。ファビコンとは、ウェブブラウザでウェブページを開いた際に、ページタイトルとともに表示されるアイコンのことである。敷き詰められたファビコンは全体で1つのスクリーンになっており、パドルの上下などをしっかり描画。『Pong』が見事に動作している。プレイヤーは矢印キーを使ってパドルを動かし、実際にコンピューターと対戦することができる。なんとも常軌を逸した実装だ。
Nolen氏がこの「Faviconic」を開発しようとした発端は、友人のTru氏が開発した『FlappyFavi』だという。こちらは、小さなファビコン上で『Flappy Bird』風のゲームが遊べる作品となっている。Nolen氏はこれに触発され、ファビコンを“並べる”という逸脱した発想に至ったようだ。ただ実装にも苦労があったようで、Nolen氏が「Faviconic」で『Pong』を完成させるまでに行なった工夫をいくつか紹介したい。
まずはタブの整列についてだ。240個のタブを手作業で綺麗に整列させるのはあまり現実的ではないため、「AppleScript」を用いることにしたそう。「AppleScript」はその名の通り、米Apple社が開発したスクリプト言語で、コンピューターの自動化などに用いられる。240個のタブが一斉に画面を埋め尽くしていく様子は見ていてとても気持ちがいい。
We want our tabs to be in a nice grid to draw to. To do this I use applescript to open up tons of windows with tons of tabs and position them to nicely stack the tabs on top of each other.
it’s kinda fun to watch it happen pic.twitter.com/46yPvUB8wm
— nolen (@itseieio) February 20, 2025
また、ファビコン1つ1つを切り替える処理にも苦戦した模様。WebページではしばしばJavaScriptというプログラミング言語が用いられる。障害となったのは、このJavaScriptにおける「繰り返し処理のクセ」のようだ。多くのブラウザにおいて、バックグラウンドにあるタブはリソースを節約する挙動をする。そのため、当初の実装ではファビコンの変更が正しい間隔で実行されなかったそうだ。
そのため、Nolen氏は、「Web Worker」という「重い処理を裏で実行」するための仕組みを試し、同手法ならば問題が起きないことを発見。無事に全てのファビコンが滑らかに切り替わるようになった。また、タブ間の連携・同期などの課題を解決するために、ブラウザのさまざまな機能・仕様を駆使。最適化なども含めほかにも数多の工夫がなされているため、興味がある方は同氏の「Faviconic」紹介ページを確認してみてほしい。
なお、Nolen氏のウェブサイトには、同氏の興味深い作品が多く掲載されている。過去には弊誌にて、同氏開発のウェブカメラにらめっこゲーム『stranger video』を取り上げた（関連記事）。ほかには、macOSのファイルマネージャー「Finder」で遊べる『Flappy Bird』風障害物避けゲーム『Flappy Dird』、テキストエディタ「Vim」を用いて「Bad Apple!!」を再生する「Regex Bad Apple」などがある。これらの作品に共通するのは、「本来の用途からの逸脱」という部分だろう。制約が多い環境で目的を実現するという、プログラミングの面白さも感じさせる作品群となっている。
「Regex Bad Apple」
Nolen氏はこれらの作品の多くをアメリカのニューヨークにあるRecurse Centerというプログラミングスクールで作ったという。Recurse Centerは無料で受講することができ、一定の期間自分のペースで自由にプログラミングを学ぶことができるそうだ。好きなことに集中して取り組める環境が、同氏の作るユニークな作品の源になっているのかもしれない。
「Faviconic」のソースコードはオープンソースとして配布されている。macOS向けであり、Pythonのローカルサーバーを立てる必要があるなど動作させるには技術が必要ながら、興味がある方はぜひチェックしていただきたい。