クイックスタート

Qwen Image Editを数分で始める方法を学びましょう。このガイドでは、初期設定から最初の画像編集まで、ステップバイステップで説明します。

🚀 初期設定

1. APIキーの取得

Qwen Dashboardにアクセス
アカウントを作成またはログイン
「APIキー」セクションに移動
新しいAPIキーを生成
APIキーを安全な場所に保存

2. 環境変数の設定

# .env ファイルを作成
echo "QWEN_API_KEY=your_api_key_here" > .env
echo "QWEN_REGION=ap-northeast-1" >> .env

📦 インストール

JavaScript/TypeScript

# npm を使用
npm install qwen-image-edit

# yarn を使用
yarn add qwen-image-edit

# pnpm を使用
pnpm add qwen-image-edit

Python

# pip を使用
pip install qwen-image-edit

# poetry を使用
poetry add qwen-image-edit

PHP

# composer を使用
composer require qwen/image-edit

Java

<!-- Maven -->
<dependency>
    <groupId>com.qwen</groupId>
    <artifactId>image-edit</artifactId>
    <version>1.0.0</version>
</dependency>

// Gradle
implementation 'com.qwen:image-edit:1.0.0'

Go

go get github.com/qwen/image-edit-go

Ruby

# gem を使用
gem install qwen-image-edit

# Bundler を使用
bundle add qwen-image-edit

⚙️ 基本設定

JavaScript/TypeScript

import { QwenImageEdit } from 'qwen-image-edit';

// 環境変数から設定
const editor = new QwenImageEdit({
  apiKey: process.env.QWEN_API_KEY,
  region: process.env.QWEN_REGION || 'ap-northeast-1'
});

// または直接指定
const editor = new QwenImageEdit({
  apiKey: 'qwen_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  region: 'ap-northeast-1'
});

Python

from qwen_image_edit import QwenImageEdit
import os

# 環境変数から設定
editor = QwenImageEdit(
    api_key=os.getenv('QWEN_API_KEY'),
    region=os.getenv('QWEN_REGION', 'ap-northeast-1')
)

# または直接指定
editor = QwenImageEdit(
    api_key='qwen_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    region='ap-northeast-1'
)

PHP

<?php
require_once 'vendor/autoload.php';

use Qwen\ImageEdit\QwenImageEdit;

// 環境変数から設定
$editor = new QwenImageEdit([
    'apiKey' => $_ENV['QWEN_API_KEY'],
    'region' => $_ENV['QWEN_REGION'] ?? 'ap-northeast-1'
]);

// または直接指定
$editor = new QwenImageEdit([
    'apiKey' => 'qwen_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    'region' => 'ap-northeast-1'
]);
?>

🎯 最初の編集

シンプルなテキスト編集

// JavaScript
const result = await editor.editText({
  image: './product-image.jpg',
  prompt: '価格を「¥2,980」から「¥1,980」に変更してください'
});

console.log('編集完了:', result.imageUrl);
console.log('使用クレジット:', result.credits);

# Python
result = await editor.edit_text(
    image='./product-image.jpg',
    prompt='価格を「¥2,980」から「¥1,980」に変更してください'
)

print(f'編集完了: {result.image_url}')
print(f'使用クレジット: {result.credits}')

要素の追加

// ロゴの追加
const result = await editor.editElement({
  image: './banner.jpg',
  prompt: '右下角に会社のロゴを小さく追加してください'
});

// 透かしの追加
const result = await editor.editElement({
  image: './photo.jpg',
  prompt: '中央に半透明の「サンプル」という透かしを追加してください'
});

🔧 主な機能

1. テキスト編集

画像内のテキストを自然言語で編集できます：

// テキストの変更
const result = await editor.editText({
  image: './advertisement.jpg',
  prompt: '「セール中」を「大特価」に変更してください'
});

// 翻訳
const result = await editor.editText({
  image: './english-poster.jpg',
  prompt: 'すべての英語テキストを日本語に翻訳してください'
});

// スタイル変更
const result = await editor.editText({
  image: './title.jpg',
  prompt: 'タイトルを太字にして、色を赤に変更してください'
});

2. 要素操作

ロゴ、透かし、装飾要素の追加や削除：

// ロゴの追加
const result = await editor.editElement({
  image: './product.jpg',
  prompt: '左上角に会社のロゴを追加してください'
});

// 透かしの追加
const result = await editor.editElement({
  image: './photo.jpg',
  prompt: '右下に「© 2024 会社名」という透かしを追加してください'
});

// 要素の削除
const result = await editor.editElement({
  image: './image-with-watermark.jpg',
  prompt: '透かしを削除してください'
});

3. スタイル転送

画像のスタイルを別の画像のスタイルに変換：

const result = await editor.transferStyle({
  image: './photo.jpg',
  styleImage: './artwork.jpg',
  intensity: 0.8 // 0.0-1.0の範囲
});

// 特定のスタイルを指定
const result = await editor.transferStyle({
  image: './portrait.jpg',
  style: 'oil-painting',
  intensity: 0.6
});

💡 ベストプラクティス

効果的なプロンプトの書き方

// ❌ 曖昧なプロンプト
const result = await editor.editText({
  image: './image.jpg',
  prompt: 'テキストを変更'
});

// ✅ 具体的なプロンプト
const result = await editor.editText({
  image: './image.jpg',
  prompt: '左上の「Hello」を「こんにちは」に変更してください'
});

// ✅ 詳細な指示
const result = await editor.editElement({
  image: './banner.jpg',
  prompt: '右下角に透明度50%の小さな会社ロゴを追加し、既存のテキストと重ならないようにしてください'
});

パフォーマンス最適化

// 画像サイズの最適化
const optimizedResult = await editor.editText({
  image: './large-image.jpg',
  prompt: 'タイトルを変更してください',
  maxWidth: 1024, // 最大幅を制限
  quality: 'medium' // 品質を調整
});

// バッチ処理
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
const results = await Promise.all(
  images.map(image => 
    editor.editText({
      image,
      prompt: 'ブランドロゴを追加してください'
    })
  )
);

🚨 エラーハンドリング

try {
  const result = await editor.editText({
    image: './image.jpg',
    prompt: 'テキストを編集してください'
  });
  
  console.log('成功:', result.imageUrl);
} catch (error) {
  switch (error.code) {
    case 'INVALID_API_KEY':
      console.error('APIキーが無効です');
      break;
    case 'INSUFFICIENT_CREDITS':
      console.error('クレジットが不足しています');
      break;
    case 'IMAGE_TOO_LARGE':
      console.error('画像サイズが大きすぎます');
      break;
    case 'UNSUPPORTED_FORMAT':
      console.error('サポートされていない画像形式です');
      break;
    default:
      console.error('エラーが発生しました:', error.message);
  }
}

📝 実践例

マーケティング用画像のローカライゼーション

async function localizeMarketingImage(imagePath, targetLanguage) {
  try {
    // まず画像を分析
    const analysis = await editor.analyzeImage({
      image: imagePath,
      analysisTypes: ['text']
    });
    
    if (analysis.analysis.text?.content) {
      // テキストが見つかった場合、翻訳
      const result = await editor.editText({
        image: imagePath,
        prompt: `すべてのテキストを${targetLanguage}に翻訳してください`
      });
      
      return result;
    } else {
      console.log('テキストが見つかりませんでした');
      return null;
    }
  } catch (error) {
    console.error('ローカライゼーションエラー:', error);
    throw error;
  }
}

// 使用例
const localizedImage = await localizeMarketingImage(
  './english-ad.jpg',
  '日本語'
);

Eコマース商品画像の更新

async function updateProductPrice(imagePath, oldPrice, newPrice) {
  const result = await editor.editText({
    image: imagePath,
    prompt: `価格を「${oldPrice}」から「${newPrice}」に変更してください`
  });
  
  return result;
}

// バッチ処理で複数商品を更新
const products = [
  { image: './product1.jpg', oldPrice: '¥1,000', newPrice: '¥800' },
  { image: './product2.jpg', oldPrice: '¥2,000', newPrice: '¥1,600' },
  { image: './product3.jpg', oldPrice: '¥3,000', newPrice: '¥2,400' }
];

const updatedProducts = await Promise.all(
  products.map(product => 
    updateProductPrice(product.image, product.oldPrice, product.newPrice)
  )
);

console.log('すべての商品価格を更新しました');

コンテンツ制作の自動化

async function createSocialMediaVariants(basePath) {
  const variants = [
    {
      platform: 'Instagram',
      prompt: 'Instagram用に正方形にトリミングし、「#インスタ映え」ハッシュタグを追加してください',
      size: { width: 1080, height: 1080 }
    },
    {
      platform: 'Twitter',
      prompt: 'Twitter用に横長にトリミングし、簡潔なメッセージに変更してください',
      size: { width: 1200, height: 675 }
    },
    {
      platform: 'Facebook',
      prompt: 'Facebook用に最適化し、「詳細はこちら」のCTAボタンを追加してください',
      size: { width: 1200, height: 630 }
    }
  ];
  
  const results = [];
  
  for (const variant of variants) {
    // まず要素を編集
    const editedResult = await editor.editElement({
      image: basePath,
      prompt: variant.prompt
    });
    
    // 次にサイズを調整
    const resizedResult = await editor.resizeImage({
      image: editedResult.imageUrl,
      width: variant.size.width,
      height: variant.size.height,
      mode: 'fit'
    });
    
    results.push({
      platform: variant.platform,
      imageUrl: resizedResult.imageUrl
    });
  }
  
  return results;
}

// 使用例
const socialVariants = await createSocialMediaVariants('./base-content.jpg');
socialVariants.forEach(variant => {
  console.log(`${variant.platform}: ${variant.imageUrl}`);
});

🔍 画像解析

// 包括的な画像解析
const analysis = await editor.analyzeImage({
  image: './complex-image.jpg',
  analysisTypes: ['text', 'objects', 'faces', 'quality', 'colors']
});

console.log('検出されたテキスト:', analysis.analysis.text?.content);
console.log('検出されたオブジェクト:', analysis.analysis.objects?.map(o => o.name));
console.log('画質スコア:', analysis.analysis.quality?.overall);
console.log('主要な色:', analysis.analysis.colors?.dominant);

// 解析結果に基づく条件付き編集
if (analysis.analysis.quality?.overall < 0.7) {
  console.log('画質が低いため、画質向上を実行します');
  
  const enhanced = await editor.enhanceImage({
    image: './complex-image.jpg',
    enhancements: ['quality', 'sharpness']
  });
  
  console.log('画質向上完了:', enhanced.imageUrl);
}

📦 バッチ処理

import pLimit from 'p-limit';

// 同時実行数を制限
const limit = pLimit(3);

const images = [
  './image1.jpg',
  './image2.jpg',
  './image3.jpg',
  './image4.jpg',
  './image5.jpg'
];

const results = await Promise.all(
  images.map(image => 
    limit(async () => {
      try {
        return await editor.editText({
          image,
          prompt: 'ブランドロゴを追加してください'
        });
      } catch (error) {
        console.error(`${image}の処理でエラー:`, error.message);
        return null;
      }
    })
  )
);

const successful = results.filter(result => result !== null);
console.log(`${successful.length}/${images.length} 枚の画像を正常に処理しました`);