@yohei1996/nanobanana 1.0.0 → 1.1.0

package/README.md

@@ -1,57 +1,70 @@
 # @yohei1996/nanobanana
 
-🍌 Nano Banana - Gemini Pro Image Generation CLI
+🍌 Nano Banana - Gemini Pro画像生成 CLI & Claude Codeスキル
 
-High-quality image generation powered by Google's Gemini Pro with 4K support.
+Gemini Proを使用した高品質画像生成（4K対応）
 
-## Installation
+## インストール
+
+### スキルとしてインストール（推奨）
 
 ```bash
-npm install -g @yohei1996/nanobanana
+# プロジェクトディレクトリで実行
+npx @yohei1996/nanobanana install
 ```
 
-Or use directly with npx:
+これで `.claude/skills/nanobanana/` にスキルがインストールされます。
+
+### グローバルインストール
 
 ```bash
-npx @yohei1996/nanobanana "A cat playing piano"
+npm install -g @yohei1996/nanobanana
 ```
 
-## Setup
+## セットアップ
 
-Set your Gemini API key:
+Gemini APIキーを設定:
 
 ```bash
 export GEMINI_API_KEY=your-api-key
 ```
 
-## Usage
+または VSCode/Cursor設定で `bizAgent-task-kanban.geminiApiKey` を設定。
 
-```bash
-# Basic usage
-nanobanana "A cat playing piano in watercolor style"
+## 使い方
+
+### Claude Codeスキルとして使用
 
-# With 4K resolution
-nanobanana "Landscape photo" --resolution 4k
+```
+/nanobanana 猫がピアノを弾いている水彩画
+```
+
+### CLIから直接実行
+
+```bash
+# 基本
+npx @yohei1996/nanobanana "A cat playing piano in watercolor style"
 
-# With aspect ratio
-nanobanana "Logo design" --aspect 1:1 --output ./logo.png
+# 4K解像度
+npx @yohei1996/nanobanana "Landscape photo" --resolution 4k
 
-# All options
-nanobanana "prompt" --aspect 16:9 --resolution 4k --output ./image.png
+# アスペクト比指定
+npx @yohei1996/nanobanana "Logo design" --aspect 1:1 --output ./logo.png
 ```
 
-## Options
+## オプション
 
-| Option | Description | Example |
-|--------|-------------|---------|
-| `--aspect <ratio>` | Aspect ratio | `1:1`, `16:9`, `9:16`, `4:3` |
-| `--resolution <r>` | Resolution | `4k`, `2k`, `1k` |
-| `--output <path>` | Output file path | `./image.png` |
-| `--api-key <key>` | Gemini API key | |
+| オプション | 説明 | 例 |
+|-----------|------|-----|
+| `install [dir]` | スキルをインストール | `install .` |
+| `--aspect <ratio>` | アスペクト比 | `1:1`, `16:9`, `9:16`, `4:3` |
+| `--resolution <r>` | 解像度 | `4k`, `2k`, `1k` |
+| `--output <path>` | 出力先パス | `./image.png` |
+| `--api-key <key>` | Gemini APIキー | |
 
-## Output
+## 出力先
 
-Images are saved to `~/nanobanana-images/` by default.
+デフォルト: `~/nanobanana-images/`
 
 ## License
 

package/bin/nanobanana.js

@@ -1,15 +1,38 @@
 #!/usr/bin/env node
-const { generateImage } = require('../src/index.js');
+const { generateImage, installSkills } = require('../src/index.js');
 
 const args = process.argv.slice(2);
 
+// Handle install command
+if (args[0] === 'install') {
+  const targetDir = args[1] || process.cwd();
+  const force = args.includes('--force') || args.includes('-f');
+
+  installSkills(targetDir, { force })
+    .then((installPath) => {
+      console.log('\n使用方法: Claude Codeでスキルを発火してください');
+      console.log('例: /nanobanana 猫がピアノを弾いている');
+    })
+    .catch((err) => {
+      console.error('Error:', err.message);
+      process.exit(1);
+    });
+  return;
+}
+
 if (args.length === 0 || args.includes('--help') || args.includes('-h')) {
   console.log(`
 🍌 Nano Banana - Gemini Pro Image Generator
 
-Usage: nanobanana <prompt> [options]
+Usage:
+  nanobanana install [dir]     Install skills to .claude/skills/
+  nanobanana <prompt>          Generate image directly
 
-Options:
+Install Options:
+  install [dir]    Install to specified directory (default: current dir)
+  --force, -f      Overwrite existing files
+
+Generate Options:
   --aspect <ratio>   Aspect ratio (1:1, 16:9, 9:16, 4:3, 3:4, etc.)
   --resolution <r>   Resolution (4k, 2k, 1k)
   --output <path>    Output file path
@@ -17,9 +40,12 @@ Options:
   --help, -h         Show this help message
 
 Examples:
-  nanobanana "A cat playing piano in watercolor style"
-  nanobanana "Landscape photo" --resolution 4k
-  nanobanana "Logo design" --aspect 1:1 --output ./logo.png
+  # Install skills
+  npx @yohei1996/nanobanana install
+
+  # Generate image directly
+  npx @yohei1996/nanobanana "A cat playing piano in watercolor style"
+  npx @yohei1996/nanobanana "Landscape photo" --resolution 4k
 
 Environment:
   GEMINI_API_KEY     Your Gemini API key

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yohei1996/nanobanana",
-  "version": "1.0.0",
-  "description": "Gemini Pro image generation CLI - High quality image generation with 4K support",
+  "version": "1.1.0",
+  "description": "Gemini Pro image generation CLI & Claude Code skill - High quality image generation with 4K support",
   "main": "src/index.js",
   "bin": {
     "nanobanana": "./bin/nanobanana.js"
@@ -15,7 +15,9 @@
     "image-generation",
     "ai",
     "cli",
-    "4k"
+    "4k",
+    "claude-code",
+    "skill"
   ],
   "author": "yohei1996",
   "license": "MIT",
@@ -26,5 +28,10 @@
   },
   "engines": {
     "node": ">=18.0.0"
-  }
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "skills/"
+  ]
 }

package/skills/nanobanana/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: nanobanana
+description: Gemini Pro画像生成（高品質・4K対応）。「画像生成」「画像作成」「イラスト作成」「〜の絵」と言われたら使用。
+argument-hint: [prompt]
+---
+
+# Nano Banana 画像生成
+
+Gemini Proを使用して高品質な画像を生成する。
+
+## 実行方法
+
+```bash
+node .claude/skills/nanobanana/scripts/generate-image.js "$ARGUMENTS"
+```
+
+APIキーはVSCode設定（`bizAgent-task-kanban.geminiApiKey`）または環境変数から自動取得。
+
+## オプション
+
+| オプション | 説明 | 例 |
+|-----------|------|-----|
+| --aspect | アスペクト比 | --aspect 16:9 |
+| --resolution | 解像度（4k,2k,1k） | --resolution 4k |
+| --output | 出力先パス | --output ./image.png |
+
+## 使用例
+
+```bash
+# 基本（Proモデル）
+node .claude/skills/nanobanana/scripts/generate-image.js "猫がピアノを弾いている水彩画"
+
+# 4K高解像度
+node .claude/skills/nanobanana/scripts/generate-image.js "風景写真" --resolution 4k
+
+# アスペクト比指定
+node .claude/skills/nanobanana/scripts/generate-image.js "ロゴデザイン" --aspect 1:1 --output ./logo.png
+```
+
+## 出力先
+
+デフォルト: `~/nanobanana-images/`

package/skills/nanobanana/scripts/generate-image.js

@@ -0,0 +1,197 @@
+#!/usr/bin/env node
+/**
+ * Gemini画像生成スクリプト
+ * - Flash: gemini-2.0-flash-exp-image-generation（高速）
+ * - Pro: gemini-2.0-flash-preview-image-generation（高品質・4K）
+ *
+ * 使用例:
+ *   node generate-image.js "猫" --output ./cat.png
+ *   node generate-image.js "風景" --pro --resolution 4k
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const MODELS = {
+  flash: "gemini-2.0-flash-exp-image-generation",
+  pro: "gemini-3-pro-image-preview",
+};
+
+function getGeminiApiKey() {
+  // 1. VSCode/Cursor設定から取得
+  const os = require("os");
+  const settingsPaths = [
+    path.join(os.homedir(), "Library/Application Support/Code/User/settings.json"),
+    path.join(os.homedir(), "Library/Application Support/Cursor/User/settings.json"),
+  ];
+
+  for (const settingsPath of settingsPaths) {
+    if (fs.existsSync(settingsPath)) {
+      try {
+        const settings = JSON.parse(fs.readFileSync(settingsPath, "utf-8"));
+        const apiKey = settings["bizAgent-task-kanban.geminiApiKey"];
+        if (apiKey) return apiKey;
+      } catch {}
+    }
+  }
+
+  // 2. 環境変数から取得
+  const envKey = process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY;
+  if (envKey) return envKey;
+
+  throw new Error("Gemini APIキーが見つかりません。VSCode設定またはGEMINI_API_KEY環境変数を設定してください。");
+}
+
+async function generateImage(options) {
+  const { prompt, aspectRatio, outputPath, model = "flash", resolution } = options;
+
+  const apiKey = getGeminiApiKey();
+
+  const modelId = MODELS[model] || MODELS.flash;
+  const modelLabel = model === "pro" ? "🚀 Pro" : "⚡ Flash";
+
+  console.log(`${modelLabel} 画像生成中: "${prompt.substring(0, 50)}..."`);
+  if (aspectRatio) console.log(`📐 アスペクト比: ${aspectRatio}`);
+  if (resolution) console.log(`📏 解像度: ${resolution}`);
+
+  const url = `https://generativelanguage.googleapis.com/v1beta/models/${modelId}:generateContent?key=${apiKey}`;
+
+  // プロンプトの強化（Proモデル用）
+  let enhancedPrompt = prompt;
+  if (model === "pro") {
+    if (prompt.length < 50) {
+      enhancedPrompt = `Create a high-quality, detailed image: ${prompt}. Pay attention to composition, lighting, and fine details.`;
+    }
+    if (resolution === "4k") {
+      enhancedPrompt += " Render at maximum 4K quality with exceptional detail.";
+    }
+  }
+
+  const requestBody = {
+    contents: [{ parts: [{ text: enhancedPrompt }] }],
+    generationConfig: {
+      responseModalities: ["TEXT", "IMAGE"],
+    },
+  };
+
+  // アスペクト比とimageConfigの設定
+  if (aspectRatio || resolution) {
+    requestBody.generationConfig.imageConfig = {};
+    if (aspectRatio) {
+      requestBody.generationConfig.imageConfig.aspectRatio = aspectRatio;
+    }
+    if (resolution) {
+      const sizeMap = { "4k": "4K", "2k": "2K", "1k": "1K", high: "1K" };
+      requestBody.generationConfig.imageConfig.imageSize = sizeMap[resolution.toLowerCase()] || "1K";
+    }
+  }
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(requestBody),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`API Error: ${response.status} - ${errorText}`);
+  }
+
+  const result = await response.json();
+
+  if (!result.candidates || !result.candidates[0]?.content?.parts) {
+    console.error("APIレスポンス:", JSON.stringify(result, null, 2));
+    throw new Error("画像が生成されませんでした");
+  }
+
+  const images = [];
+  for (const part of result.candidates[0].content.parts) {
+    if (part.inlineData && part.inlineData.mimeType?.startsWith("image/")) {
+      images.push({
+        data: Buffer.from(part.inlineData.data, "base64"),
+        mimeType: part.inlineData.mimeType,
+      });
+    }
+  }
+
+  if (images.length === 0) {
+    console.error("パーツ:", JSON.stringify(result.candidates[0].content.parts, null, 2));
+    throw new Error("画像が生成されませんでした（画像パーツなし）");
+  }
+
+  // 出力先ディレクトリの決定
+  const outputDir =
+    outputPath && fs.statSync(outputPath, { throwIfNoEntry: false })?.isDirectory()
+      ? outputPath
+      : outputPath
+        ? path.dirname(outputPath)
+        : path.join(process.env.HOME, "nanobanana-images");
+
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  const savedPaths = [];
+  const timestamp = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
+  const prefix = model === "pro" ? "pro_" : "";
+
+  for (let i = 0; i < images.length; i++) {
+    const ext = images[i].mimeType === "image/png" ? "png" : "jpg";
+    const filename =
+      outputPath && !fs.statSync(outputPath, { throwIfNoEntry: false })?.isDirectory()
+        ? path.basename(outputPath)
+        : `${prefix}image_${timestamp}_${i + 1}.${ext}`;
+    const fullPath = path.join(outputDir, filename);
+
+    fs.writeFileSync(fullPath, images[i].data);
+    savedPaths.push(fullPath);
+    console.log(`✅ 保存: ${fullPath}`);
+  }
+
+  return savedPaths;
+}
+
+// CLI実行
+if (require.main === module) {
+  const args = process.argv.slice(2);
+  if (args.length === 0) {
+    console.log(`使用法: node generate-image.js <prompt> [options]
+
+オプション:
+  --pro            Proモデル使用（高品質・4K対応）
+  --aspect <ratio> アスペクト比（1:1, 16:9, 9:16, 4:3, 3:4など）
+  --resolution <r> 解像度（4k, 2k, 1k, high）※Proモデル推奨
+  --output <path>  出力先パス
+
+例:
+  node generate-image.js "猫がピアノを弾いている"
+  node generate-image.js "風景写真" --pro --resolution 4k
+  node generate-image.js "ロゴ" --aspect 1:1 --output ./logo.png
+`);
+    process.exit(1);
+  }
+
+  const options = { prompt: "", model: "pro" }; // デフォルトでProモデルを使用
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--pro") {
+      options.model = "pro";
+    } else if (args[i] === "--aspect" && args[i + 1]) {
+      options.aspectRatio = args[++i];
+    } else if (args[i] === "--resolution" && args[i + 1]) {
+      options.resolution = args[++i];
+    } else if (args[i] === "--output" && args[i + 1]) {
+      options.outputPath = args[++i];
+    } else if (!args[i].startsWith("--")) {
+      options.prompt = args[i];
+    }
+  }
+
+  generateImage(options)
+    .then((paths) => console.log("\n生成完了:", paths.join(", ")))
+    .catch((err) => {
+      console.error("エラー:", err.message);
+      process.exit(1);
+    });
+}
+
+module.exports = { generateImage };

package/src/index.js

@@ -142,4 +142,60 @@ async function generateImage(options) {
   return savedPaths;
 }
 
-module.exports = { generateImage, getGeminiApiKey, MODELS };
+/**
+ * Install nanobanana skills to target directory
+ * @param {string} targetDir - Target directory (default: current working directory)
+ * @param {object} options - Installation options
+ * @param {boolean} options.force - Overwrite existing files
+ * @param {boolean} options.silent - Suppress output
+ */
+async function installSkills(targetDir = process.cwd(), options = {}) {
+  const { force = false, silent = false } = options;
+
+  const skillsSourceDir = path.join(__dirname, '..', 'skills', 'nanobanana');
+  const skillsTargetDir = path.join(targetDir, '.claude', 'skills', 'nanobanana');
+
+  // Check if source exists
+  if (!fs.existsSync(skillsSourceDir)) {
+    throw new Error(`Skills source not found: ${skillsSourceDir}`);
+  }
+
+  // Create target directory
+  if (!fs.existsSync(skillsTargetDir)) {
+    fs.mkdirSync(skillsTargetDir, { recursive: true });
+  }
+
+  // Copy files recursively
+  const copyDir = (src, dest) => {
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry.name);
+      const destPath = path.join(dest, entry.name);
+
+      if (entry.isDirectory()) {
+        if (!fs.existsSync(destPath)) {
+          fs.mkdirSync(destPath, { recursive: true });
+        }
+        copyDir(srcPath, destPath);
+      } else {
+        if (!force && fs.existsSync(destPath)) {
+          if (!silent) console.log(`⏭️  Skipping (exists): ${destPath}`);
+          continue;
+        }
+        fs.copyFileSync(srcPath, destPath);
+        if (!silent) console.log(`✅ Installed: ${destPath}`);
+      }
+    }
+  };
+
+  copyDir(skillsSourceDir, skillsTargetDir);
+
+  if (!silent) {
+    console.log(`\n🍌 nanobanana skills installed to: ${skillsTargetDir}`);
+  }
+
+  return skillsTargetDir;
+}
+
+module.exports = { generateImage, getGeminiApiKey, MODELS, installSkills };