探偵事務所、開業しました

はい、どーも！名探偵Bit太郎にゃんです。

ブログの記念すべき1記事目です。何から書こうかなと思ったんですが、やっぱりこのブログの母屋にあたるポートフォリオサイトの話からかなと。

先に言っておくと、あれは普通のポートフォリオサイトのつもりで作り始めて、気づいたら探偵事務所になっていました。どうしてこうなった😅

事務所の間取り#

サイトを開くと、ランプの灯った書斎が出てきます。暖炉があって、柱時計があって、ソファには白猫の探偵(僕のアバターです)が座っています。

ポートフォリオって「作った物のリンク集」になりがちで、それだと見に来た人が3分で帰っちゃうんですよね。だったら部屋そのものを触って遊べるようにすれば、もうちょっと長居してもらえるんじゃないかと。そう考えて、書斎のあちこちをクリックで調べられる作りにしました。

で、ここからが本題なんですが。この事務所、ただの飾りではなくて謎解きが隠してあります。いわゆる隠し謎解きというやつです。

言っていいのはこのくらいでしょうか。

謎解きは完全におまけなので、作品だけ見て帰るのももちろん歓迎です。ただ、来訪記録のカウンターとか、机の上の虫眼鏡とか、気になったものがあったら……まぁ、触ってみてください🤔

中身はエンジニアらしく少しだけ。

書斎は React + Three.js で、1枚の絵の上にWebGLの光や炎のパーティクルを重ねています。ホスティングは Cloudflare Workers で、来訪記録のカウンターだけ Durable Object という仕組みで数えています。ほぼ無料枠で動いているのがえらい。

絵は全部、生成AIへの「発注書」を書いて作りました。世界観を大正モダン(黒漆+真鍮+朱)で統一して、プロンプトのシートを育てながら数十枚。切り抜きや合成はスクリプトでやっています。

実装はAIコーディング(Claude Code)との二人三脚です。僕が仕様と駄目出しを担当して、実装と検証はエージェントにやってもらう体制。「窓を覗きにいくアニメーションがまだ覗いている感じがない」みたいな雑な駄目出しにも付き合ってくれました。このブログ(Astro製)も同じ体制で建てた離れです。

このあたりの細かい話は、それぞれ1本の記事になるボリュームがあるので、追々書いていこうかなと。

というわけで、開業のご挨拶でした。事務所、ぜひ遊びに来てください。感想は X (@BitCoinTarou) か、この下のコメント欄へどうぞ。謎の答えだけは、これから遊ぶ人のために伏せてもらえると嬉しいです。

では、ここで一句。

白猫と
謎を仕込んだ
夏の夜

お後がよろしいようで。