ノスタルジックカウンター！ あえて最新技術で1990年代の無料アクセスカウンターサービスを作った
追記:
このプロダクトは、いまはカウンター以外に
スター、ランキング、BBSなどもサポートしてて
ノスタルジックという名前にリブランド中です。
Vercelが自前のKVをやめてしまったので
Cloudflare D1で実現するよう改造もしてます。
過渡期なので、登録を受け付けていません。
どうせカウンターが消えちゃうので、リブランド完了まで、ガチャンキィでも読んでお待ちください。
kako-junです。
好きな柱は不死川です。
ノスタルジックカウンターをリリースしました。
デモページをレトロなデザインにしたくて
参考に阿部寛のホームページを左目で見ながら、右目で作りました。
再現度を楽しんでもらえると嬉しいです。
（廃止されたHTMLのタグなども、無理やり再現させてます）
なぜ作ったか？
いまレトロ・フューチャーが熱いらしい。
レトロ・フューチャーって、昔の人が考えた未来の想像図とか。
のび太の結婚するプリンスメロンホテル前の、チューブ状の高速道路に車が飛んでる的な。
ドット絵のゲームは、いつでも古びず熱い。
PS1世代のローポリも、懐かしく感じる人が出始めてるみたい。
いっぽう、本当のレトロは熱くない気がする。
物理的なデバイスなら、リバイバルしてるそうだけど。（カセットテープとか）
古くてだっさいホームページを、敢えて作ろうというブームが起きない。
きっと敬遠されるからだ。
徒然草の「狂人の真似とて大路を走らば即ち狂人なり」で説明つく。
（よしだはいつも正しい）
つまり、古臭いイメージのサイトをあえて真似して再現しても
見る人にとっては、ただの古臭いサイトなのだから、人が来ない。
4/1に消化される用のネタサイトならイイけど
自身の気合い入れた集客サイトで、そんなリスクを許容する人は
アマチュアであっても、誰もいないんだ。
サイトそのものを、古くてだっさいデザインにするのは需要がなくても
カウンターだけなら、ありじゃないか……？
……という発想から、このプロジェクトは始まりました。
というか、自分のサイトにカウンターを表示したかったので！
自己満足したかったので！
こち亀100巻『インターネットで逢いましょうの巻』の回に出てくるような
レガシーなサイトを作ってみたかったので！
何をどう作ったか？
当時の技術用語を調べてみると、
CGI、ActiveX、Java Applet、Flashなどがあり
CGI以外は全部滅んで、今のブラウザでは動かないらしい。
CGIはサーバーサイドで .exe とか .pl とかを実行してたそうだから
2025年にNode.jsでSSRしてるのと考え方は似てて
アクセスのたびにプロセスを起動してる無駄さ以外は、違和感なくて
そんな昔にけっこう人類は頑張ってたんだ、ってビビった。
数字を麻雀牌で表現したり、カラフルな猫耳が付いてたり
当時のインターネットには、個人の裁量で遊びを入れる余裕があったらしい。
キリ番、踏み逃げ！
誰かのサイトにアクセスするたびに、自動販売機の抽選みたいな楽しみがあったんだろう。
（金沢の四高記念公園には、まだその自販機がある）
４４４３で外れる炭酸水！
当時の画像はGIF形式で軽い。
いまならWebP……？ いや、どうせなら最速を追求するためにSVGにした。
せっかく作るなら、過去には作りようがなかったものを。
SVGに画像を埋め込むのでなく、「このフォントで、この数字を、この座標に描画しろ」という情報のみ。
フォントの解決はユーザーのブラウザ内。
なので、超軽い。
バック・トゥ・ザ・フューチャーのデジタル時計みたいな7セグとか
麻雀牌とかも、そのうちSVGで描くと思う。
設置方法や更新方法も、これ以上無理なくらい楽な手順にした。
当時はサーバー領域を無料レンタルして、FTPでアップロードしてたらしい。
SSHは1995年には使えたそうだけど、GUIのツールがなかったし
プロ以外にはセキュリティ意識そのものがなかったそうで
セキュリティを高めるために、Windowsに管理者権限を求めるポップアップを追加したら
世界中からクソ機能扱いされたらしい。
（Linuxと同じことをやっただけなのに……？）
ハンチョウのこれを思い出した。
カウントを記録するサーバーは、今ならクラウドにアカウントを作ってデプロイ？
いや、それすらめんどい。
アカウントなんて、もう作りたくない。
ユーザーIDもパスワードも、管理されたくないし、管理したくない。
……と考えた結果、私の構築済みのクラウド上サービスを、みんなで自由に使ってもらう発想にした。
ブラウザのURL欄に、ただ1回、カウンター名と合言葉を打ち込むだけで、カウンターの作成が完了する。
合言葉は、すぐ非可逆のハッシュにしちゃうので、私にもわからない。
カウンター作成の瞬間にたまたま盗聴してた別人がいたとしても、たかがカウンターなので、大丈夫だ問題ない。
気持ち悪かったら、作り直すのも簡単。
それまでのカウントも引き継げる。
90日間放置すると、自動的に消滅する。
ゴミができては自動的に消されること前提の、ゆるいサービス。
カウンターの設置は、HTMLとJavaScriptの手書きサイトだろうと
Reactで作ったTypeScriptなコンポーネントだろうと
Nextだろうと
3行くらいで可能。
<iframe> などの、ヤバそうなタグは使ってない。
カウンターを表示するだけなら <img> タグだけ。
<img> タグだけだと、カウントアップができないので
カウントアップしたい場合は（ほとんどの場合、したいだろうけど）
<script> タグで count.js を呼んでもらう1行が必要。
Webコンポーネント（Web Components）を使える場合は
カウンターの表示ついでにカウントアップもできるので、コードはもっと短くなる。
Web Componentsって、カウンターのためにある仕組みすぎだろ
って思うくらいしっくり来た。
答えだねー。
昔のカウンターサービスでは、それを作る社員とか
社員のペットの猫とかを食べさせないと持続できないので
広告や課金要素があったらしい。
ほか、訪問者のリファラー情報を読み取ることで
どこのリンクから飛んで来たのか？
どこの国からのアクセスなのか？
などを、設置者は見れたし
カウンターの真横に、IPアドレスをテーブルで表示して
それを見た訪問者も、自分がカウントされてる！って喜んでたらしい。
平和か！
昔のインターネットは、エデンの園か！
防御力0の裸で、寝ながらブドウとか食べてそう。
そーゆーアクセス情報は
ちょっと前ならGoogle Analyticsで調べるのが主流だったそうだし
いまはクラウドのアクセスログとか、Cloudflareの管理画面で
見たくなくても自動的に表示されてる。
それらアメリカの巨大サービスたちが
あえて昔ながらのカウンターとして表示できるような、画像だけ返すWeb APIを
お金を持て余した神々の遊びでもいいから作ってくれれば
これは面白い！懐かしい！となって
世の中に、アクセスカウンターブームが再来するかもしれない。
けど、あの日見たアクセスカウンターの魅力をAWSはまだ知らない。
なので、彼ら巨大サービスが興味ない
アクセスカウンターの魅力だけを補完できれば、私は嬉しくて
アクセス解析などのデリケートな要素は、彼らの管理画面に任せるのが美しいと思った。
予想外だったこと
開発は、Claude Codeと一緒に
平成のインターネットについてレクチャーしてもらいながら
そのアナーキーで骨太なエピソード、仕様にドン引きしながら
1週間で完成したのだけど
枯れた技術の水平思考で作ったおかげで
技術的に詰まることはなかった。
なにィ！って予想外なことは3つあった。
1つ目は、Claude Codeが
オススメ！って（勝手に）呼び出し部分を実装したVercel KVが
今ではサービス終了してたこと。
Redisに乗り換えてね！
みたいな表示に変わってるんだけど、RedisとUpstash Redisの2択があって
前者で充分、って納得するまでの勉強で、完成が1日延びた。
2つ目は、最初カウンター表示用のエンドポイントを
counter.js って名前にしてたのだけど、なぜか画像が表示されず
Claude Codeに聞いたら、ブラウザの広告ブロックChrome拡張のせいだった。
counterという名前は、デフォルトでブロックする傾向があるそうな。
サブドメインにcounterという言葉が入ってるのに、めんどくせーって思ったけど
counter.js を display.js にリネームするだけで行けた。
3つ目は結局、解決しなかった。
「キリ番の報告」を現代に再現させたくて
「ようこそ！あなたは ○○○○○ 人目の訪問者です！」って表示に、最初はしてたのです。
でも、何も考えずアクセスカウンターを実装すると
訪問者のトータル数を表示するわけで……
仮に自分が9999人目だったとして、Bさんが10000人目としてやってくると
Bさんのブラウザには10000と表示されるけど
自分のブラウザにだって、リロードすれば10000が表示される。
全員が同じ数字を見る。
全員がキリ番。
カウンターなんだもの。それが自然な動作。
それとも、Bさん登場後も、私のブラウザには9999と表示すべきなの？
そーゆー仕様も可能だけど、24時間はダブルカウントしない仕組みを入れた場合
それまでは何回リロードしても9999が表示され、
24時間経過後にリロードしたら、10042とかが表示されることになる。
！？ってなるだろう。
10041までの増えてく様子を見られないなら、それってアクセスカウンターと呼べるのか！？
常に最新のカウントを表示すべきじゃん？
って考えた結果、「全員に同じ数字が見える」を仕様にしたの。
俺が！ 俺たちが！ キリ番だ！
余談
ノスタルジックカウンターを作る前は、ネタのつもりだったけど
作り終わってみると、Web ComponentsとかRedisとか、21世紀の産物との親和性が高くて
あえて再発明するのは楽しかったし、勉強になった。
今回のコード資産で、そのままノスタルジック○○シリーズを量産できそうなので
いまは掲示板を作ってる。
掲示板からタイトル表示を省けば、コメントと入力欄が残るわけで、
サイトの下部など、好きな場所にコメント欄をつけるためにも使える。
サイトへの感想は、外部のSNSとかに書け
という今の主流も、分離の美しさでは正解ではあるのだけど
そのサイトへの感想なのだから、そのサイトに表示されるべきだろ
というアプローチも正解だと思う。
どっちかしか選べないのは、バランス悪い。
いまのトレンドは、前者に偏り過ぎだと思う。
なので、どこにでもコメント欄を設置できる、無料サービスを作ったら面白いと思った。
もちろん広告とか、アカウント登録なしの、ノスタルジックカウンターと同じ仕組みで。
Switch 2を持ってないので
私はいま2週に1個くらいペースで、ツール、ゲーム、サービスを作ってて
作るたびに、公式サイトに載せてるのだけど
バグ報告などのサポート窓口をGitHub Issuesに丸投げすると
GitHubアカウントを持ってない人を、斬り捨て御免することになるのよね。
プロダクト1つに対して、サポート掲示板を1つ設置！
を実現できれば、超便利なはずで、モデルケースとして提示してみたいと思ったの。
ついでにトップページに設置すれば、足あと帳にもなるんよ。
2週間後くらいに、ノスタルジックBBSを公開できたらいいな。
（Switch 2次第）
具体的な設置方法は
Discussion