ClaudeCodeでさくっと、レンタルサーバでGemini APIアプリ開発こと始め

この記事は、Google Gemini APIを使った簡単なWebアプリを作成して、レンタルサーバ(ConoHa WING)上で動作させる手順を書いたメモです。

どういうアプリか？

Googleが提供しているLLMとの通信が確認できればいい、という目的のアプリです。
チャットができればよく、また、今後いろんなLLMアプリを作る時に雛形として使えるように、できるだけシンプルな構成にしました。

実行画面

ソフト構成と作り方

Claude Codeに丸投げしました。ただし、事前に色々試していて、うまく行った構成と技術要素を書いたポンチ絵を与えました。

Claude Codeに与えたポンチ絵

指示プロンプト：「添付した構成図に従って、LLMを使ったシンプルなチャットアプリを作成してください」

＊なお、一発では動作してなくて、2~3回エラーログを食わせて修正した後に完成しています。（とはいえ、バグ修正のために他には調査せずにClaude Code単独で完成しました）

完成後にClaude Codeに書かせた設計図

Claude Codeの素晴らしい点のひとつに、ドキュメント作成能力があります。ソースコードを解析させてドキュメントを書かせると、読解力がとても優れているのがわかります。
特にシーケンス図に書く処理の粒度のさじ加減がえぐい！簡単にいうと解像度がちょうど良くて分かりやすい。正直、さじ加減のちょうどいいシーケンス図を書くのは難しいので、これを見たときに、もう人間がドキュメントを書く必要はないと思いました。（後から設計資料を起こすような場合の話です）

指示プロンプト：「mermaidでソフトウェアのモジュール図、シーケンス図を書いてmarkdownファイル(design-doc.md)に保存してください。」

ソースコード

フォルダー構成

.
├── api.php
├── .htaccess *レンタルサーバでは必要
├── index.html
└── script.js

PCで動作確認する方法（Macでの話）

サーバーにアップする前にローカルで動作確認をする必要があります。
通常のWebアプリは、ソフトウェアのフォルダーで下記のようにhttpサーバを立ち上げて、ブラウザでlocalhost:8000を指定すればよかったのですが、

$ python -m http.server

今回はCGI（php）を使う構成にしたので、上記の方法ではCGIの実行ができませんでした。
Apacheを立ち上げる方法もあるようですが、結論をいうと、代わりに下記コマンドを実行することで可能になります。

$ export GEMENI_API_KEY=xxxXxxx
$ php -S localhost:8000

phpがインストールされていない場合は、brew install phpを行う必要があります。

上記のexport GEMENI_API_KEY=xxxXxxxについて、続けて説明します。

API Keyの設定

このチャットアプリでは、Google Gemini APIを使っています。その際にはAPIキーが必要です。

APIキー発行方法

Google AI Studioでキーを生成します。

環境変数GEMINI_API_KEY

phpプログラムの下記の部分で、環境変数GENEMI_API_KEYからキー文字列を取得して、メッセージを投げる際に使っています。なお、この変数の名前はこのプロググラムで勝手に決めたもので任意に変更可能です。

・・・
$apiKey = getenv('GEMINI_API_KEY');
if (!$apiKey) {
    http_response_code(500);
    echo json_encode(['error' => 'API key not configured']);
    exit;
}

$url = 'https://generativelanguage.googleapis.com/v1/models/gemini-2.5-flash:generateContent?key=' . $apiKey;
・・・

なので、実行前にAPIキーのための環境変数の設定が必要です。

$ export GEMENI_API_KEY=xxxXxxx

レンタルサーバ(ConoHa WING)で動作させるには

ConoHa WINGのサーバ上のホームページの公開フォルダーは、ざっくりと以下のような構成になっています。

+jxxx_xxxxxxlocalhost
 ...
 +- public_html/
    +- xxxx.tech/　*ドメイン名フォルダー
       +- index.htmlなど公開物を入れる
    +- xxxx.com/   *ドメイン名フォルダー

基本的には、公開物をpublic_html/の下の「ドメイン名フォルダー」に入れれば終わりです。
あとは、ブラウザからhttp://xxxx.tech/などにアクセスすれば画面は表示されます。
ただし、これだけではGemini APIと通信に失敗します。APIキーの設定をしていないからです。

環境変数GEMINI_API_KEYの設定

サーバー側でCGI実行時に参照する環境変数（APIキー）は、.htaccessファイルを作成して、下記のように設定します。

.htaccess

SetEnv GEMINI_API_KEY xxxXxxx

以上。設定メモとしては終わりです。
以下余談です。

余談

ConoHa WINGだとできないこと

ConoHaでは、VPSとWINGと大きく２種類のサービスがあって、WINGの場合はデフォルトでWord Pressをインストール可能なのが売りで、代わりに使用できるツールが制限されています。
VPSの方は自分専用のOSを動かせるより上級者向けのもので、好きなツールを入れられます。

WINGではサーバサイドでできることの自由度は高くなく、フロントエンドとサーバサイドの間の通信はCGIのみのようです。チャットで出力文字をリアルタイムに流してレンダリングさせるようなストリーム通信などは無理っぽそうです。

無料枠でどこまで使えるか

Open AIを皮切りに、中国勢も含めると今やかなり多くのLLM APIプロバイダーが存在します。LLMに限らず、text2speech, 画像生成、動画生成などもあります。

自分は割とすぐにChat GPT Plusユーザに入っていて、しばらくは他の課金に入るモチベーションはありませんでした。しかし、最近はClaude Codeの登場によって、2つ目の課金に入っています。Googleに関しても、最近は非常に魅力的でGeiminもチャットはよく使うようになっています。

Googleの場合は、Gemini 2.5 Flashで自分の用途と用量としても十分で、課金する必要性は感じていません。しかもAPI使用もある一定量までは無料という太っ腹ぶりなので、APIに関してはGeminiを中心に使っていこうかと思っています。

過当競争のいまだからこそ、こんなに安く使えるんじゃないかと思っていますが、ただ将来はデバイス側にAIの実行が移っていくと思われるので、クラウドでLLMを叩くなんというのは、そもそも黎明期の今だけの話かもしれません。
とはいえ、かなり面白い時代だと思うので、引き続き楽しんでいきたいと思います。