schroneko Gemini 画像生成（chrome-devtools MCP）
chrome-devtools MCP の autoConnect で既存の Chrome セッションに接続し、Gemini で画像を生成する。
前提条件
- Chrome で
chrome://settings/content/all#devtools-remote-debuggingでリモートデバッグが許可されている - Chrome で Google アカウントにログイン済み
ワークフロー
Step 1: chrome-devtools MCP を確認
claude mcp list
chrome-devtools が表示されていれば Step 2 へ。表示されなければ追加する:
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --autoConnect
追加後はセッションの再起動が必要。ユーザーに /exit で退出して再起動するよう案内する。
Step 2: 既存セッション確認
mcp__chrome-devtools__list_pages()
Step 3: Gemini ページを開く
mcp__chrome-devtools__navigate_page(type="url", url="https://gemini.google.com/")
Step 4: スナップショット取得
mcp__chrome-devtools__take_snapshot()
textbox "ここにプロンプトを入力してください" の uid を確認する。
Step 5: プロンプト入力
mcp__chrome-devtools__fill(uid="<textbox_uid>", value="<prompt>")
uid はスナップショットから取得した値を使用。
Step 6: 送信
mcp__chrome-devtools__press_key(key="Enter")
Step 7: 生成完了待機
画像生成には 30-60 秒かかる。スナップショットで進捗を確認:
mcp__chrome-devtools__take_snapshot()
「生成中」などの表示が消えるまで待つ。
Step 8: 結果確認
スクリーンショットで生成結果を確認:
mcp__chrome-devtools__take_screenshot()
Step 9: 画像をダウンロード
スナップショットで button "フルサイズの画像をダウンロード" の uid を取得し、クリック:
mcp__chrome-devtools__click(uid="<download_button_uid>")
ダウンロード先は ~/Downloads/GeminiGenerated_Image*.png。
ファイルの検索:
mdfind "kMDItemDisplayName == 'Gemini_Generated_'" -onlyin ~/Downloads
サイズの確認:
sips -g pixelWidth -g pixelHeight <file>
アスペクト比の指定
Gemini ウェブ版はデフォルトで横長（約 16:9）の画像を生成する。 プロンプト末尾にアスペクト比を明記することで制御可能:
| 指定方法 | 結果 |
|---|---|
square format, 1:1 aspect ratio |
2048x2048 (正確に 1:1) |
16:9 aspect ratio, widescreen format |
2752x1536 (ほぼ 16:9) |
9:16 aspect ratio, portrait format, vertical |
1536x2752 (ほぼ 9:16) |
| 指定なし | 2816x1536 (約 1.83:1) |
プロンプトのコツ
- 「no text」を含めると画像内にテキストが生成されにくい
- スタイル指定: "flat illustration style", "anime style", "photorealistic" など
- 背景色指定: "blue background", "transparent background" など
- アスペクト比はプロンプト末尾に付ける
プロンプト例
正方形のイラスト風猫画像:
flat illustration style, a fluffy cute cat with soft fur, gentle expression, pastel pink background, simple and iconic design, no text, square format, 1:1 aspect ratio
スタイル指定:
Nano Banana Pro で夕焼けの海辺の風景画を生成してください。油絵風でお願いします
詳細指定:
Nano Banana Pro でサイバーパンク風の東京の街並みを生成してください。ネオンライト、雨、夜景
トラブルシューティング
接続エラー
「No inspectable pages found」または「Could not find DevToolsActivePort」の場合:
- Chrome が起動しているか確認
chrome://settings/content/all#devtools-remote-debuggingでリモートデバッグを許可- Chrome を再起動
DevToolsActivePort ファイルが古くなっている場合の修復手順は chrome-devtools-mcp スキルを参照。
Chrome 144+ での注意
Chrome 144+ では --remote-debugging-port にデフォルトのユーザーデータディレクトリを使えない。autoConnect モードを使うこと。autoConnect なら通常のプロファイルでログイン状態が維持される。
ログイン要求
Gemini にログインが必要な場合:
- Chrome で手動で gemini.google.com にアクセス
- Google アカウントでログイン
- 再度スキルを実行
fill が効かない場合
Gemini の入力欄が DIV 要素の場合、evaluate_script で JavaScript 操作:
mcp__chrome-devtools__evaluate_script(function="() => {
const input = document.querySelector('[aria-label=\"ここにプロンプトを入力してください\"]');
input.focus();
input.textContent = 'プロンプト';
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
}")
画像生成が失敗する
Gemini の制限（不適切なコンテンツなど）に引っかかっている可能性。プロンプトを修正して再試行。