「ブログに動く水族館を置きたい」——そんな思いつきから始まったプロジェクト。最初はプログラミング言語の王道で行こうとしましたが、理想と現実のギャップに直面しました。
紆余曲折を経て、最新のPythonライブラリ「Streamlit」と動画生成AIを組み合わせることで、ついに納得のいく「デボン紀の海」を再現することに成功しました。今回はその開発秘話をお届けします。
前回記事は、こちら
最初の挑戦：Javaによる「デジタル水族館」の限界
当初、描画の自由度が高いJava（Processing等）を使って水族館を作ろうと考えました。（もちろん考えるのはGoogleGemini先生です）
１から魚の動きを計算し、ヒレの揺れや泳ぎをコードで制御する……まさにプログラマーらしいアプローチです。（さすがGemini先生）
しかし、結果は意外なものでした。
- 見た目のチープさ: コードで描く魚は、どうしても「記号的」（というか記号そのもの）な図形になりがちでした。
- 開発コスト: リアルな質感を出すには膨大な計算式が必要で、ブログに置く気軽なシミュレーターとしては重すぎる結果に。
- 読者体験: 動きは正確でも、古代の海の「重厚な空気感」や「水の濁り」までは再現しきれませんでした。
結果は、こちら
転換点：Python × 映像美の融合
Javaでは全然うまくいきません…
そこで発想を180度転換しました。「計算で描く」のではなく、「AIが生成した最高画質の映像をプログラムで制御する」。この魔法を実現したのが、Pythonのフレームワーク「Streamlit」です。（これは、わたくしが少し提案しました！）
最新の動画生成AIで、デボン紀の王者ダンクルオステウスが泳ぐ実写クオリティのループ動画を作成。これをPythonコードでWebサイトの背景として全画面に固定しました。
最終結果：命が吹き込まれた古代のアクアリウム
最終的に完成したアクアリウムは、Javaでの挑戦とは比較にならないほどのクオリティに到達しました。
- 圧倒的な映像美: 背景にはAI生成によるリアルな古代の海が流れ続けます。
- インタラクティブな演出: 画面中央の「🐟 魚群 & 泡」ボタンを押すと、100匹近い魚の群れが右から左へ横切り、同時に美しい泡が下から上へと昇っていきます。
- 洗練されたUI: ボタンはグラスモーフィズム（半透明）デザインを採用。動画の美しさを邪魔せず、かつスマホでもPCでも操作しやすい中央配置を実現しました。
結果は、こちら
もし、アプリが寝ている際は「Yes, get this app back up!」で起こしてあげてください。
おわりに
「プログラミングで全部書く」ことに固執せず、最新のAI技術とPythonの柔軟なレイアウト機能を掛け合わせることで、まさに命が宿ったようなアクアリウムが完成しました。
この水槽は、単なる背景ではなく、読者が触れて楽しめる「生きたコンテンツ」です。
3億8千万年前の鼓動を、あなたのブラウザでもぜひ体験してみてください。でわっ！！
コメント