こちらから試せます。
アプリについて
映画「マトリックス」でお馴染みの緑の文字が降ってくる画面「デジタルレイン」を再現できるアプリです。
好きな文字を落とすことができます。
猫語もOK
二郎系の店で注文をうまく言えない時、この画面を見せて注文する事もできます
硬派な方は、上手く告白できない時の為に、この画面を見せて気持ちをそれとなく伝える事もできます。
技術スタック
GitHubリポジトリ :
本アプリは、React や Vue などのフレームワークを使わず、HTML / CSS / Vanilla JavaScript のみで実装した静的Webアプリです。
描画には Canvas API を使用し、requestAnimationFrame によってマトリックス風の文字雨アニメーションを更新しています。
PNG出力は Canvas の toBlob() を使い、動画出力は canvas.captureStream() と MediaRecorder API を組み合わせて MP4 / WebM として保存できるようにしています。
また、設定内容は JSON としてダウンロード・アップロードできるようにし、ブラウザだけで完結するツールとして実装しました。
cloudflareで取得しているドメインからサブドメインを作成してURL公開しています。
codex を使用
ChatGPT & claude + codexを用いてバイブコーディングしています。
chatGPTで要件定義を壁打ちし、codexへ投げるプロンプト文を出力し、それをcodexに読み込ませます。
どんなプロンプトを使用したかが埋もれやすいので、docs/ ディレクトリにてprompt.mdで保存しております。
作業の進め方
Github flowやイシュー管理で進めても良かったのですが、
この規模の静的アプリかつ個人開発なら
codexに指示
↓
mainにpush
↓
github pagesで動作確認
↓
改善点を探してcodexに指示
を繰り返して一気にアプリ化するのがベストかなと思いました。
ひと段落した時点でchatGPTやclaude に品質やセキュリティリスクなどを評価してもらったりしています。
とはいえ、改善していった履歴ややり取りも資産として残したいので、docs/にrefactoring-plan.mdとして書き残すようにcodexに指示しています。
これは自分が設計を追うためでもありますが、claude codeなどに引継ぎさせる時用でもあります。
個人開発で雑に作る時でも、設計やコードの補足資料はあった方が何かと便利だと感じました。
作ってよかったこと
ささいな思いつきから開発したネタアプリですが、一度作ってみると不思議なことに、
使用技術をヒントに別のアプリのアイデアが浮かんだり、応用したアプリのアイデアが浮かんできたりしたのが良かったです。
一見くだらないと思ったアプリでも一旦形にしてみると、意外といいなと思えたり、逆に、絶対良い！と思ってたアイデアがいざアプリにしてみると微妙だったりしました。
しかし、AIの力を借りてでもとにかく色々アプリを作ってみることで、GitHub上にソースとしてノウハウがたまっていったり、実験材料が溜まっていくので、「AIに頼り過ぎて何も身につかない！」状態にはあまりなっていない気がします。
むしろ自身の理解も進めていかないと的確な指示が出せず、同じ不具合を出し続けたりデグレーションを起こしたりするため、安定しません。
AIへの指示は人間と同じように、組織づくりや工程管理で再現性を持たしていくべきなのだといういい経験になりました。
大変だったこと
意外と本家マトリックスのデジタルレインの再現が難しかったことです。
初期版は文字がそのままスライドしていきながらランダムに変化していくだけの描写でしたが、どうも本家と似ても似つかない雰囲気でした。
そこらへんの再現はAIはうまくやってはくれず、結局は私が画面を何度も確認して、画面再現のための正確な挙動についての解像度を上げていきました。
なので、ここら辺は目コピ能力（観察力）とか、それを言葉で指示するための言語化能力が問われる気がします。
最終版でも本家と微妙に違う点などもあり、不満は残りますが、おおむね満足のいく仕上がりとなりました。
最後に
無料・登録不要・認証不要・すぐ遊べるので、是非触ってみてください！
ここまでお読みいただきありがとうございました。