Code Wave というWebページを公開しました

概要

Netflixでマトリックスを観たのですが「黒背景に緑の文字が降り注ぐ」所謂マトリックス・コードがカッコよかったので、モチーフにしたWebページをAIと作ってみました。

👇️ URLはこちらです。
Code Wave - Message Generator

機能

利用者が入力したテキストがマトリックス風の文字列の中に徐々に現れてきます。
長い文章については徐々に表示されるようになっています。
投稿してタイムラインを汚すのはアレだけどちょっと言っておきたいことをSNSに投稿する時にご利用いただけます。

※投稿内容はDBには保存していません。

使用したAI

最初はGemini のCanvas機能でざっくりと画面を作り、Claude Code で細かい機能追加やレイアウト修正を行いました。
AIを変えた理由はClaude Code のProプランが登場し、20ドルでAIエージェントを使い放題になったためです。

能力の比較はできないけど、リポジトリ全体をチェックした上で勝手に修正してくれるのは便利ですね。

技術スタック

Vueなどのフレームワークは使わず、ピュアなJavaScriptです。

入力されたメッセージをBase64エンコードして共有用URLのパラメータに付与しています。
共有URLアクセス時にブラウザ上でデコードして実際の文字を表示しています。
バックエンド・データベースは一切不要、全てJavaScriptで完結しています。
プライバシー保護の観点からもサーバーに投稿内容は送信されません。

ビルド不要なシステムなので、Githubにプッシュした内容をそのままNetlifyで公開するようにしています。

リポジトリも公開しているので興味ある方はぜひご覧ください。
foresukecom/code_wave

願望

生成AIが登場し、性能や新機能に驚愕し、生産性の向上を謳う投稿がSNSに流れていますが、もっと成果物を公開してほしい。
個人で作るWebページぐらいならGithub Pages とかNetlify を使えば無料でも公開できます。

今はAIを使ったクソみたいな広告や、中身のない記事で溢れてしまいました…
AIによってWebページの作成ハードルがかなり下がったので、ぜひ個々人が考えている面白いWebページ、実験的ゲームを作ってほしい。
Flashゲーム全盛期のような玉石混交なWebページが溢れる時代になってほしい。

おまけ

マトリックスに影響を受けたWebサービスを生成AIの力で作るのは皮肉なものです ┐(´～｀)┌