超絶簡単！爆速でNanobanaアプリを作ってみた【実践編】

これまでで、バイブコーディングという手法を活用すれば、専門的なプログラミング経験がない、非エンジニアの方でも、意外なほどスムーズにアプリ開発へ踏み出せることをお伝えしてきました。

「本当に自分にもできるのだろうか？」

と半信半疑の方もいると思いますので、今回は実演形式で実際にアプリを形にしていく流れを、ひとつずつ分かりやすくご案内します。

作っていくのは、Google の Nanobana API を利用した画像生成のための Web アプリです。

作業にあたっては Gemini-CLI を用います。

今回は、すでに Gemini-CLI が利用できる状態である事を前提に進めていきます。
また、これから作成するアプリを動かすにはAPI キーが必要ですが、これは Google AI Studio から簡単に取得可能ですので、本稿では取得手順の詳細説明は省略します。

Gemini-CLIの導入方法やＡＰＩキーの取得方法については、機会があれば記事を書こうと思います。

完成イメージ

今回作るのは、初学者でも扱いやすい PHP 製（PHP 8 想定）の Web アプリです。
構成やふるまいのイメージを、あらかじめ整理しておきましょう。

ざっくりこんな感じですね。

それでは早速作っていきましょう！

Gemini-CLI を起動します。お使いの環境でターミナル（またはコマンドライン）を開き、起動コマンドを入力します。

gemini

チャットでの指示は、細かく指示すればするほど、作りたいアプリのイメージに近いものが出来ますが、今回はあえて抽象的な指示で作成してみます。

GoogleのNanoBananaのAPIを使って、画像が生成出来るWEBアプリをPHP8で作成して。
設定ページでは、使用するモデル、APIキーとデフォルトプロンプトが設定できるようにして。
生成された画像は、ダウンロードボタンでローカルにダウンロードできるようにして。

こんな感じですね。

入力したら「ENTER」キーを押す。

少し思考時間が入ったのち、参考イメージに近い提案やコード断片が順次返ってきます。

何度かこのようにレスポンスが返ってきますので、その都度、ENTERキーを押すだけです。

いちいちENTERを押すのがめんどくさい場合は、Shift＋Tab キーを押すか、返事する時に、十字キーで2番を選択してENTERするだけです。

待つこと5分くらい・・・・
完成したようです。

それでは実際にブラウザを使ってアクセスし、動作確認してみます。

トップページ

設定ページ

事前に取得したAPIキーを入力します。

NanobananaProを使うので、モデルは以下を設定。

gemini-3-pro-image-preview

想定外ですが、何故かAPIのエンドポイントの設定がありますので設定します。この部分は本来固定値なので、設定に不要なので、チャットで修正させることもできますが、今回はおとなしく入力します。

https://generativelanguage.googleapis.com/v1beta/models/

ここは設定しなくてもいいですが、毎回同じプロンプトを入力するのはめんどいので、使いまわせる部分を登録しておきます。

こんな感じですね。

それでは実際に画像を生成してみましょう！

プロンプトにタイトルとなる文字を入れて生成するだけで以下のような画像が生成されるようになりました。

いかがでしたか？

エンジニア要素０でこんなに簡単にWEBアプリが作成できます。

たった5分、プロンプトを1回入力しただけで、画像生成Webアプリが完成しました。

今回は簡単なアプリを作成してみましたが、慣れてくればもっと複雑なアプリも比較的簡単に作れてしまいます。

レンタルサーバーだけ借りてあれば、アップロードしてアクセスするだけで動作の確認が出来ますので、初めのうちは、PHPで作るのがお薦めです。
（PCにPHPをインストールしておけば、ビルトインサーバーをたてて動かすことも可能です。）

バイブコーディング、ぜひ試してみてください。