Claude Codeだけで、ここまでのWebアプリが作れました。
地図上から好きな場所を選んで、花火大会が味わえます。
映像のリアルさ・花火の種類・音にもこだわってみました。
実際にCodeとのやり取り、制作風景も紹介。
リンク先
リンク先、画像出典元はこちらから
https://mogeringo.com/fireworks/
使い方
トップ画面「ハナビノミエルバショ」。地図をクリックするか、住所・地名で検索して観覧地点を選択します。
世界中どこでも好きな場所で見ることができます。
山の近くでは花火が隠れて見えないこともあるので、平野部が良いと思います。
とにかくリアルにこだわって、地図はOSM、標高などは国土地理院地図からデータを取得しています。
地図上で任意の地点を選択した状態で
「この場所から花火を見る」ボタンで次のステップへ進みます。
花火大会をデザインする設定画面。
観る場所（窓・観覧席・公園）で環境音が変わります。公園の場合は虫の鳴き声が聞こえてきます。
開始時刻は花火大会の時刻を設定できます。19時ぐらいがベストだと思います。
ショーの長さは花火大会の時間を設定できます。実際には45分とか1時間ぐらいかな？と思います。
地図の読み込みで、高精細や軽量などを選択できます。
標高や道路の街灯など細かな生成をしますが、時間が長くなります。
軽量でも十分にキレイですが、好みに合わせて設定してみてください。
詳細設定では更に細かく設定が可能で、花火の種類なども好みに合わせて設定可能です。
設定が出来たら「打ち上げ開始」ボタンを押してください。
こちらが鑑賞画面となります。
画面下部にはBGMも視聴可能にしてみました。Lofi音楽を生成させ視聴可能です。
右下のボタンは環境音や花火、BGMのボリュームを調整可能です。
終盤になるにつれどんどんと盛り上がるようにしてみました。
私の地元ではPL花火大会があり、よく見ていましたが終盤のあの盛り上がりはゾクゾクします。
そんな体験ができるように作ってみました。
またこのWebアプリを作るにあたってこだわったのが、音です。
リアルな音を目指してClaudeと何度も改良を加えていきました。
最初は花火が上る音、ピョーーーーという音があり、これはリアルじゃないなぁ～と思い
もっと遠くで聞こえるあの、ドン！という音を再現してみました。
ちょっといいスピーカーなどで聞いてみてください。
スマホでもしっかりと見れるように作ってみました。
ぼーっと眺めれる、遠くで聞こえる花火の音、ちょっと懐かしい寂しいような感覚になります。
勉強やBGMとしても使えると思うので、ぜひ夏の夜に使ってもらえればと思います。
開発にあたって
最近はClaudeというAIを使って色々と開発をしております。
そんな中、こういうWebアプリがあったら良いのに～と探していたんですが、結局見つからず・・・・
このClaudeで自分で作ってみました。
流れとしてはClaudeのチャットで、こういうアプリを作りたい。ここはこうで、街並みを再現したい。
著作権に問題ないように地図を取得したり、Lofi音楽も生成させたい。
とまずは設計書を作りました。
次にClaudeのCodeで、NotebookLMというGoogleのAIを活用して、幅広く花火の種類を資料化していきました。
同時に花火の音、環境音も調査していきます。
これらの資料はObsidianという場所に貯めていきます。
設計や資料を基にWebアプリの実装をCodeで作ってもらいました。
最後に実際に出来上がったアプリを何度も視聴して、花火の音、不自然な音、
街並みの再現など細かく指示を出していき完成に至りました。
このWebアプリで実際に私が書いたプログラミングは0行。
すごい時代になったものです。
AIにご興味ある方にもぜひ見てもらいたいアプリ、ご参考になればと思います。
コメント