動作確認
すべての実装が完了したら、各プラットフォームで動作を確認してみましょう。
APIサーバーの起動確認
まず、ImageGenerator.Webプロジェクトを起動します。ブラウザまたはcurlコマンドで https://localhost:7299/api/config（ポート番号は環境に合わせて変更）にアクセスし、APIキーがJSON形式で返されることを確認します。curlコマンドで確認する場合は、次のように実行します。
curl https://localhost:7299/api/config
正常に動作していれば、次のようなJSONが返されます。
{"apiKey":"sk-xxxxx..."}
MAUIアプリでの確認
まず、コマンドラインからWebプロジェクトを起動します。ImageGenerator.Webプロジェクトのフォルダで次のコマンドを実行してください。
dotnet run --launch-profile https
Webプロジェクトを起動したまま、Visual StudioでImageGeneratorプロジェクトをAndroidエミュレータで起動します。Visual Studioから起動することで、ブレークポイントやデバッグ出力を活用できます。
- アプリを起動し、画像生成ページを開く
- プロンプトを入力し、「画像を生成」ボタンをクリック
- APIキーがサーバーから取得されると、コマンドラインに「APIキーのリクエストを受信しました」と表示される
- 画像生成が実行されることを確認
- 2回目以降は、SecureStorageに保存されたキーが使用される
開発環境での補足
Android環境から開発サーバーへ接続する際に必要な設定や、デバッグ時に役立つ情報を補足しておきます。
HTTPS証明書のエラー
Android環境から開発サーバーへ接続すると、証明書エラーが発生します。開発環境で使われる自己署名証明書がAndroid側で信頼されていないことが原因です。
対処として、開発時のみ証明書検証をスキップするHttpClientを登録します。MauiProgram.csを次のように変更してください。
#if DEBUG
// 開発環境用：証明書検証をスキップするHttpClientを登録
builder.Services.AddHttpClient("DevClient", client =>
{
// 必要に応じてベースアドレスなどを設定
}).ConfigurePrimaryHttpMessageHandler(() => new HttpClientHandler
{
ServerCertificateCustomValidationCallback = (message, cert, chain, errors) => true
});
#else
builder.Services.AddHttpClient();
#endif
次に、MauiKeyStorageで名前付きClientを使用するように変更します。
// 名前付きHttpClientを取得
using var httpClient = httpClientFactory.CreateClient("DevClient");
この設定は開発環境専用です。本番環境では、サーバー側で信頼された認証局の証明書を設定すれば、プロジェクト内のコード変更は不要です。
SecureStorageのクリア
デバッグ中にSecureStorageに保存されたAPIキーをクリアしたい場合は、以下のコードを実行します。
SecureStorage.Remove("openai_api_key");
// または全てクリア
SecureStorage.RemoveAll();
実機でのテスト
Android実機でテストする場合、エミュレータとは異なる設定が必要です。実機からは10.0.2.2ではなく、開発PCのIPアドレス（ここでは、192.168.1.100とします）を使用してAPIサーバーに接続します。
MauiKeyStorage.csのGetApiServerUrlメソッドを修正して、実機用のIPアドレスを追加します。
#if ANDROID
// 実機の場合は開発PCのIPアドレスを指定
// エミュレータの場合は10.0.2.2を使用
return "https://192.168.1.100:7299";
Web側では、外部からの接続を許可するため、launchSettings.jsonを修正します。
"applicationUrl": "https://0.0.0.0:7299",
pplicationUrlを0.0.0.0に変更することで、すべてのネットワークインターフェースからの接続を受け付けるようになります。また、必要に応じてWindowsファイアウォールでポート（7299）を許可します。
最後に
今回は、セキュリティを考慮したAPIキー管理として、サーバー経由での取得方式を実装しました。モバイルアプリにAPIキーを埋め込まないことで、キー漏洩のリスクを低減できます。次回は、クライアントにAPIキーを渡さず、サーバーがOpenAI APIを呼ぶ方式を解説する予定です。
