皆さん、ストレスの多い社会で頑張って疲れていませんか。今回は、バイブコーディングで癒やし系の環境アプリを作ってみましょう。この手のアプリでは、開発者の「感性」が問われます。それでは、水槽を魚が泳ぐだけの環境アプリを作って、AIに癒やしてもらいましょう。

  • 水槽を魚が泳ぐだけの環境アプリを作ってみよう

    水槽を魚が泳ぐだけの環境アプリを作ってみよう

今回バイブコーディングで作成した環境アプリは、次の画面のようなものです。こちらからブラウザで試すことができます。

  • 水槽を魚が泳ぐだけの環境アプリを作ったところ

    水槽を魚が泳ぐだけの環境アプリを作ったところ

眺めているだけで癒やされるアプリはどう設計する？

人は何に癒やされるのでしょうか。世の中には、癒やしをテーマにしたアプリがいろいろあります。調べてみると、動物や魚を眺める系、森林の中の様子、川の流れや滝が落ちるなど自然を眺める系、キャンプのたき火やロウソクを眺める系など、いろいろあります。

そこで、そんな癒やし系の中から、今回は、水槽を泳ぐ魚の様子をバイブコーディングで再現してもらおうと思います。そこで、気になるのは、どのように癒やしを設計するのかという点です。

せっかくなので、どう設計すると良いのか考えてみました。参考になるように、「眺めているだけで癒やされる水槽を泳ぐ魚の環境アプリはどう設計する？」と生成AIに尋ねてみます。すると、次のようなポイントを挙げてくれました。

- 自然界の「ゆらぎ」を再現すること - 完全なランダムではなく、完全な規則でもない「1/fゆらぎ」を再現すること
- 空間に奥行きを再現すること - 前景や背景を用意して、背景にはぼやけた水草、前景には気泡や泡、水の粒子を再現すること
- 自然な魚の動きを再現すること - 魚はゆっくり動くようにし、時々向きを変えるようにする
- その他、低頻度の小さなイベント、控えめな環境音、落ち着いた自然色が大切

こうした点をAIに与える指示書「プロンプト」に反映させてみましょう。

Codex appで水槽を泳ぐ癒やし系アプリを作ろう

今回もCodexを使ってみましょう。Codexのセットアップについては、15回目で解説しています。ようやく、Windows版もリリースされました。Windowsユーザーもターミナル上ではなく「Codex app」を使ってバイブコーディングを楽しむことができるようになりました。Windows版のCodex appはこちらのWindows Storeからインストールできます。

  • Windows Storeに登場したCodex

    Windows Storeに登場したCodex

Codexを起動したら、アプリを作成するフォルダを選択しましょう。前回の続きの画面が出た場合には、画面左側にあるスレッド一覧のすぐ上にあるアイコンをクリックして、新規フォルダを選択しましょう。筆者は、今回は「env-fish」というフォルダを作成し、そこをCodexで選択しました。

  • env-fishというフォルダを作りプロジェクトに追加したところ

    env-fishというフォルダを作りプロジェクトに追加したところ

水槽を泳ぐ癒やし系アプリのプロンプト

今回、アプリを作るためにCodexに与えたプロンプトは、次のようなものです。

# 指示

眺めているだけで癒やされる水槽を泳ぐ魚の環境アプリを作ってください。

## 使う技術

- HTML/CSS/JavaScript
- Rust + WebAssembly

## 実装したい機能

- 水槽の背景と魚の画像を表示する
- 魚が水槽の中をランダムに泳ぐ
- 魚の動きをRustで制御し、WebAssemblyを通じてJavaScriptに反映させる
- ホワイトノイズを生成して、自然な水の音を再現する
- 水槽の中に気泡や水の粒子を追加して、よりリアルな水の環境を再現する

## 実装のポイント

- 自然界の「ゆらぎ」を再現すること - 完全なランダムではなく、完全な規則でもない「1/fゆらぎ」を再現すること
- 空間に奥行きを再現すること - 前景や背景を用意して、背景にはぼやけた水草、前景には気泡や泡、水の粒子を再現すること
- 自然な魚の動きを再現すること - 魚はゆっくり動くようにして、時々向きを変えるようにして
- その他、低頻度の小さなイベント、控えめな環境音、落ち着いた自然色が大切

一般的には、HTML/CSS/JavaScriptだけで作る方が手軽に実行できるのですが、せっかくなので、RustとWebAssemblyも使うように指示してみました。

プログラミング言語Rustのセットアップは意外と大変なので、もし面倒であれば、上記プロンプトからRustとWebAssemblyの部分を削除して試してみてください。Rustを使わなくても、それなりのプログラムを完成させることが可能です。

なお、Rustのセットアップは、姉妹連載のこちらで解説していますので、参考にしてください。

Codexに指示したところ

上記のプロンプトをCodexのモデル「GPT-5.3-Codex」に与えると、次のようにプログラムの設計と実装を始めました。

  • Codexがプログラムを設計し実装をはじめたところ

    Codexがプログラムを設計し実装をはじめたところ

なお、Rustのビルドやライブラリの取得などを、実行して良いか何度か尋ねられました。ここで「はい」を選択すると、面倒なRustの設定やビルドをCodexが肩代わりしてくれます。

プログラムを実行しよう

実際にRust+WebAssemblyで開発する際には、PythonでローカルWebサーバーを実行する必要があります。Codexが作成したREADME.mdを見てみると、実行方法のメモが書かれていました。

Pythonをインストールした状態で、ターミナル(WindowsならPowerShell、macOSならターミナル.app)を開いて、以下のコマンドを実行します。

python3 -m http.server 8080

そして、ブラウザを開いて「http://localhost:8080」にアクセスします。うまくいけば、これで動きます。

試しても最初は動かなかった件

ただし、上記の手順通りにブラウザを開いてもエラーが出て動きませんでした。この時、チェックするのは、ブラウザの開発者ツール（デベロッパーツール）のコンソールです。Chromeであれば、ブラウザ画面を右クリックして、「検証」をクリックして、コンソールのタブを開きます。

それで、ブラウザの開発者ツールを開いて、コンソールのエラーをコピーして、下記のようなメッセージをCodexに修正を依頼しました。例えば、以下のようなプロンプトです。

実行した後ブラウザのコンソールで次のようなエラーがでました:
env_fish.js:28 Uncaught (in promise) TypeError: Cannot convert 1773024250447 to a BigInt
    at new AquariumSim (env_fish.js:28:26)
    at boot (main.js:198:15)

特に、直して欲しいと書かなくても「エラーが出た」旨を伝えるだけで修正してくれます。ブラウザ上で動くプログラムを作る場合、エラーが表示されるのがブラウザ上なので、こうした面倒な手戻りがあります。その点、以前、連載で紹介したGoogleのAntigravityを使えば、コンソールログを取得してくれるので、もっと楽にWebアプリのデバッグができることでしょう。

とは言え、二度ほどエラーをコピー＆ペーストして、Codexに貼り付けるだけで動くようになりました。以下のような癒やしの水槽が表示されました。

  • 魚が水槽を動き回るアプリが実行できた

    魚が水槽を動き回るアプリが実行できた

改良してみよう - 背景の水草を改良

Codexが作成した最初のアプリでは、魚こそ動くものの、背景の水草が動いていませんでした。そこで追加指示として、水草も動くように依頼しました。

背景の水草もゆるやかに動くようにして

すると、水草が動くようになりました。次の画像ではあまり分からないかもしれませんが、水草がゆらゆらと動きます。

  • 改善された水槽アプリ - ここまでの修正で背景の水草が動くようになった

    改善された水槽アプリ - ここまでの修正で背景の水草が動くようになった

さらに改良してみよう - 魚の動きを改良

また、魚が左右に動くだけで、魚自身に変化がなくて、面白くありませんでした。そこで、下記のような指示も行いました。

魚自体がもう少し動くと楽しいと思います。
魚の尾ひれや体が自然に動くように修正してください。

すると、魚の尾ひれが動くようになりました。魚釣りに使うルアーのような感じで、尻尾がくねくねと動くようになりました。

  • 改善された水槽アプリ - 魚の尾ひれが動くように修正した

    改善された水槽アプリ - 魚の尾ひれが動くように修正した

魚のバリエーションを増やそう

既に良い感じになったのですが、ずっと見ていたら、ちょっと飽きてきました。もう少し、魚のバリエーションを増やしたいと思います。下記のようなプロンプトをCodexに与えました。

魚のバリエーションを増やしてください。
- 現在の丸いルアーっぽい魚
- サメっぽい角張った魚 --- 他の魚より早く動かして
- エイのように尻尾の尖った魚
- 群れる小魚

すると、次の画面のように、魚の種類が増えた水槽が表示されました。いろいろな魚がいるので、飽きることはありません。

  • 改善された水槽アプリ - 魚のバリエーションが増えた

    改善された水槽アプリ - 魚のバリエーションが増えた

設定ファイルでカスタマイズを容易にしよう

とは言え、以上の修正で水槽がずいぶん賑やかになってしまいました。癒やし要素が薄まってしまいました。設定ファイルで、いろいろなパラメータを指定できるようにしたいと思います。また、気になっていた点を修正します。

次の点を改良してください:
- 水槽の下にある円二つが美しくないので削除してください。
- 水草がもっとダイナミックに動くようにしてください。
- 魚(SVGファイル)をもっと美しく複雑なものにしてください。
- 画面にボタンやメッセージが書かれていますが、消してください。
- 設定ファイル「config.json」を導入してカスタマイズできるようにしてください。
  - 魚の数、環境音のオンオフ、魚の速度などを設定できるようにして

すると、下記のような画面が表示されます。

  • 改善された水槽アプリ - 設定ファイルを導入してみた

    改善された水槽アプリ - 設定ファイルを導入してみた

ライフゲームの要素を追加しよう

この時点で、もう完成と言っても良いのですが、遊び心を入れたくなりました。面白い機能として、生物シミュレーションとして有名な「ライフゲーム」の要素を追加してみようと思います。

水草の後ろに、ライフゲームの要素を入れてください。
ライフゲームのルールに沿って、青の生物がゆるやかに生まれたり死んだりします。
指定ステップ毎にランダムに新しいセルを配置してゲームが止まらないようにしてください。
生物は丸にしてください。
背景の方に出して、癒やし要素が出るようなデザインにしてください。
設定ファイルで表示のオンオフができるようにしてください。

また、魚の尾ひれの向きがおかしいのでその点も修正してもらいました。

魚の尾ひれが不自然です。
尾ひれの三角形の細い頂点が魚の本体と繋がるように修正してください。
また、魚と尾ひれの間に空白が入っているので詰めてください。

すると、次の画面のように、ライフゲームの要素が追加されました。背景に動きが出て、面白い感じになりました。

なお、ここまで作成したプログラムは、こちらからダウンロードできるようにしました。Rustのインストールが面倒という方のために、実際に動くデモも用意してみました。

ブラウザ上で動く環境アプリのため、iPhone/iPadでも動かすことができました。ただ、画面サイズがPCを対象にしているので、魚が大渋滞でした。スマートフォン対応する場合は、魚の数やサイズを指定できるように、さらに改良すると良いでしょう。

まとめ

以上、今回はバイブコーディングで癒やし系アプリを作ってみました。この手の環境アプリを作るのは、機能が満たされれば良いだけという訳ではなく、どちらかというと絵画を描くとか、音楽を作るというクリエイティブ要素の方が大切になります。

そのため、プログラムを書いてデザインやタイミングを直して、実行して動作を確認してから、さらにプログラムを書いて…という繰り返しを経て開発を行うことになります。そのため、従来であれば、とてつもなく開発に時間がかかるものでした。しかし、バイブコーディングで、どういう風に直したいかを自然言語で伝えることで、あっという間にプログラムが修正されるので、とても快適に環境アプリが開発できました。

今回は、筆者の好みの水槽を目指して、いろいろな要素をたくさん詰め込んだため、癒やされるかどうかというと、ちょっと微妙なところではありますが、皆さんの感性を最大限発揮して、理想の癒やし系アプリを目指してみてください。

こうした、機能ではなく感性が重視されるアプリは、AIだけでは完成度を高めるのが難しい分野です。ぜひ、皆さんも開発に挑戦してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。これまで50冊以上の技術書を執筆した。直近では、「大規模言語モデルを使いこなすためのプロンプトエンジニアリングの教科書(マイナビ出版)」「Pythonでつくるデスクトップアプリ(ソシム)」「実践力を身につける Pythonの教科書 第2版」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」など。