クイックスタート

AI画像説明APIを数分で始めましょう。このガイドでは、AI駆動の画像説明をアプリケーションに統合するための重要な手順をご案内します。

前提条件

開始する前に、以下を確認してください：

アカウント: aidescribepicture.comで登録
APIキー: 設定でAPIキーを作成
クレジット: 画像説明クレジットを購入
画像URL: テスト用の公開アクセス可能な画像URL

ステップ1: APIキーを取得

aidescribepicture.comにアクセス
Googleアカウントでサインイン
設定 > APIキーに移動
「新しいAPIキーを作成」ボタンをクリック
キー名を入力（例：「マイアプリ」）
キー作成後、完全なキー値をコピー（安全に保管してください！）

APIキーフォーマット

sk-で始まる
ランダムに生成された文字を含む
例：sk-abc123def456ghi789...

ステップ2: 最初のAPI呼び出し

cURLを使用

curl -X POST https://aidescribepicture.com/api/api-call/describe-picture \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{
    "imageUrl": "https://example.com/image.jpg",
    "prompt": "この画像を詳しく説明してください"
  }'

JavaScriptを使用

async function describeImage(imageUrl, apiKey, prompt = null) {
  try {
    const response = await fetch('https://aidescribepicture.com/api/api-call/describe-picture', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        imageUrl: imageUrl,
        prompt: prompt
      })
    });
 
    if (!response.ok) {
      const error = await response.text();
      throw new Error(`APIエラー: ${response.status} - ${error}`);
    }
 
    const result = await response.json();
    
    // 説明内容を抽出
    const description = result.choices[0].message.content;
    return description;
  } catch (error) {
    console.error('画像説明エラー:', error);
    throw error;
  }
}
 
// 使用例
const description = await describeImage(
  'https://example.com/image.jpg',
  'your-api-key-here',
  'この画像を詳しく説明してください'
);
console.log('画像説明:', description);

ステップ3: レスポンスの処理

APIは画像説明を含むJSONレスポンスを返します：

{
  "choices": [
    {
      "message": {
        "content": "この画像は、カメラに向かって正面を向いた赤いキツネのクローズアップを示しています。キツネはふわふわしたオレンジと白の毛皮を持ち、立ち上がった耳と明るい茶色の目があります。背景はぼやけており、雪の環境や明るい設定の可能性があります。"
      }
    }
  ]
}

choices[0].message.contentフィールドに実際の画像説明テキストが含まれています。

ステップ4: 結果の表示

HTMLで

<div id="description">
  <p id="image-description"></p>
</div>

JavaScriptで

// 説明を表示
const descriptionElement = document.getElementById('image-description');
descriptionElement.textContent = description;

ステップ5: エラーハンドリング

適切なエラーハンドリングを常に実装してください：

try {
  const description = await describeImage(imageUrl, apiKey, prompt);
  // 成功を処理
  console.log('説明:', description);
} catch (error) {
  if (error.message.includes('401')) {
    console.error('無効なAPIキー');
  } else if (error.message.includes('402')) {
    console.error('クレジット不足');
  } else if (error.message.includes('429')) {
    console.error('レート制限超過');
  } else {
    console.error('APIエラー:', error.message);
  }
}

APIキー管理

設定でのキー管理

すべてのAPIキーリストを表示
キー使用統計を表示
未使用のキーを無効化または削除
キーの最終使用時間を表示

セキュリティのベストプラクティス

クライアントサイドコードでAPIキーをハードコーディングしない
環境変数を使用してキーを保存
APIキーを定期的にローテーション
異なる環境で異なるキーを使用

環境変数の例

# .envファイル
IMAGE_DESCRIPTION_API_KEY=sk-your-api-key-here

// コードで使用
const apiKey = process.env.IMAGE_DESCRIPTION_API_KEY;

クイックスタート

On this page