ByteDanceのSeedance 2.5がApiframeで正式提供開始。

n8nでApiframeを活用する方法【ステップバイステップ解説】

このガイドでは、n8nとApiframeを連携して、コンテンツ制作を自動化する方法をわかりやすく解説します。ApiframeのAPIキー取得から、AI画像（動画・音楽など）を生成するワークフロー構築まで、実践的な手順を順番に学べます。

Renaud 2025年11月30日公開 2025年11月30日 · 5分で読めます 初級
n8nでApiframeを活用する方法【ステップバイステップ解説】
目次

このガイドでは、あらゆるワークフローからApiframeをn8nに接続して、AI画像（あるいは動画、音楽など）を生成する方法を解説します。

💡
以下のスクリーンショットは旧バージョンのAPIを使用していた際に撮影されたものです。そのため、画面内の一部フィールド名が本文の記載と異なる場合がありますが、n8n側の操作手順自体に変更はありません。実際に設定を行う際は、現在のv2 API（X-API-Keyによる認証、POST /v2/images/generate、jobId、webhookUrl / webhookEvents）に対応した本文の説明に従ってください。

このガイドで扱う内容：

  1. 作成するものの概要
  2. 事前準備
  3. n8nでのApiframe認証情報の作成
  4. ワークフロー1 - シンプルな画像生成（/v2/images/generate
  5. ワークフロー2 - /v2/jobs/{jobId}
  6. ワークフロー3 - 推奨：Webhookを使ったリアルタイム取得
  7. 他のApiframeエンドポイントへのパターンの拡張

すべてのサンプルでは Midjourney のPOST /v2/images/generate エンドポイントを使用しますが、同じパターンはほとんどの他のエンドポイントやモデルでも利用できます。

I. これから作るもの

ここでは、小さなn8n連携を2つ作成します：

  1. オンデマンドで画像を生成する
    • トリガー： 手動、Webhook、Googleスプレッドシートなど、何でもOK
    • HTTP Request: POST https://api.apiframe.ai/v2/images/generate
    • レスポンスとしてjobId が返ってくるので、保存したりログ出力したりできます（レスポンスには status: "QUEUED" も含まれます）
  2. 最終的な画像を自動で取得する
    • GET /v2/jobs/{jobId} を使って、タスク完了までApiframeをポーリングする
    • または（推奨）タスク完了時にApiframeからn8nのWebhookを呼び出してもらう

画像URLがn8nに届いたら、その後は自由に処理できます。たとえばSlack に送る、Airtable に保存する、Google Driveなど。

II. 前提条件

必要なもの：

  • Apiframe のアカウントと、APIキーが必要です。これは Apiframe のダッシュボードから取得できます（またはこちらをクリック）。この API キーは、X-API-Key ヘッダーを通じてリクエストを認証するために使用します（APIキーは afk_ から始まります）。
Apiframe API key
Apiframe API key
  • n8n のインスタンス（セルフホストまたはクラウド版）
  • n8n の各種ノード（HTTP Request、Webhook、Set、IF など）に関する基本的な知識。HTTP Request ノードは、n8n で任意の REST API を呼び出すための汎用ノードです。

III. n8n に Apiframe 用の認証情報を作成する

一度だけ認証情報を設定し、その後はすべての HTTP Request ノードで再利用します。

  • ステップ1：n8n で「Credentials → Create credential」に進みます。
Create credential
Create credential
  • ステップ2：Header Auth（バージョンによっては「HTTP Header Auth」「API Key in Header」など）を選択します。
Header Auth
Header Auth
  • ステップ3：次のように設定します：
    • ヘッダー名：X-API-Key
    • 値：Apiframe の API キー（afk_ から始まる、ダッシュボードに表示されているものをそのまま使用）
Apiframe header auth
Apiframe header auth
  • ステップ4：Apiframe Auth のような名前を付けて保存します。

Apiframe は以下の形式を想定しています：

text
X-API-Key: afk_your_api_key_here
Content-Type: application/json

IV. ワークフロー1 - POST /v2/images/generate を使った基本的な画像生成

次のようなシンプルなワークフローを作成します：

💡
Manual Trigger → プロンプトを Set → HTTP Request → jobId をログ出力

1. ワークフローを作成する

    1. n8n で新しいワークフロー（New workflow）を作成します。
    2. 次に、Manual Trigger ノード。
manual trigger
manual trigger

2. プロンプト用に「Set」ノードを追加する

    1. Manual Trigger の後ろにSet ノードを追加します。
    2. 「Values → Add Field → String」で：
      • Name：prompt
      • Value：例えば次のような値にします a cinematic photo of a cyberpunk city at night, ultra detailed, 4k
    3. （任意）もう一つ String フィールドを追加します：
      • Name：aspect_ratio
      • Value：3:2
Set Node
Set Node

これで Set ノードの出力 JSON はおおよそ次のようになります：

json
{
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "aspect_ratio": "3:2"
}

3. POST /v2/images/generate 用の HTTP Request ノードを追加する

    1. Set ノードの後ろにHTTP Request ノードを追加します。
    2. 次のように設定します：
      • Method：POST
      • URL：https://api.apiframe.ai/v2/images/generate
      • 認証は「Generic Credential type」を選択し、「Header Auth」を選んでから、先ほど作成した「Apiframe Auth」の認証情報を指定します。
      • Body については「Send body」をオンにし、JSON形式で model（例："midjourney"）、prompt、aspect_ratio などのモデル固有オプションをまとめた midjourneyParams オブジェクト、そして後で使うための任意の webhookUrl フィールドを追加します。
json
{
  "model": "midjourney",
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "midjourneyParams": {
    "aspect_ratio": "3:2"
  },
  "webhookUrl": "https://your-n8n-domain.com/webhook/apiframe/midjourney-completed"
}
HTTP Request Node
HTTP Request Node
Request body
Request body

このノードを実行すると、Apiframe は次のようなレスポンスを返します：

json
{
  "jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "status": "QUEUED"
}

これはタスクがキュー投入／処理中であることを意味します。画像は非同期で生成されるため、POST /v2/images/generate 自体から最終的な画像 URL は返されません。

ここからできることは次の通りです：

  • このjobId
  • DBやGoogleスプレッドシートに保存する
  • 「Fetch」ワークフローに渡す

V. ワークフロー2 - GET /v2/jobs/{jobId} を使ったApiframeのポーリング

次に、GET /v2/jobs/{jobId} エンドポイントを使って、実際の画像URLを取得します。

Apiframe には、GET https://api.apiframe.ai/v2/jobs/{jobId} というエンドポイントが用意されており、URLパスの{jobId} にジョブIDを指定すると、最終結果 もしくは status: "PROCESSING" のレスポンスを返します。

ここではシンプルな「待機してからFetchする」フローを作ります。

1. Waitノードを追加する

先ほどの POST /v2/images/generate HTTP Requestノードの後に：

    1. 新しく Wait ノードを追加します。
    2. 待機時間を、例えば 2〜3秒 に設定します。

この待機時間によって、Apiframe が画像生成を完了する余裕ができます。生成時間はタスクの複雑さやシステム負荷によって変わります。

Wait node
Wait node

2. GET /v2/jobs/{jobId} 用の HTTP Request ノードを追加する

Waitノードの後ろに、もう一つ HTTP Request ノードを追加します：

    • Method（メソッド）：GET
    • URL：https://api.apiframe.ai/v2/jobs/{jobId}
    • 認証は、「Generic Credential type」を選択し、「Header Auth」を選んでから、先ほどと同じ 「Apiframe Auth」 を指定します。
    • GET リクエストのため Body は不要です。URLの {jobId} 部分に、ワークフロー1で取得した jobId を指定します。
Fetch Request Node
Fetch Request Node
Fetch request body
Fetch request body

処理中（ジョブがまだ実行中）:

json
{
  "jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "status": "PROCESSING",
  "progress": 40
}

完了（ジョブ完了、画像URLの準備が完了）:

json
{
  "jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "status": "COMPLETED",
  "result": {
    "images": [
      "https://.../image1.png",
      "https://.../image2.png",
      "https://.../image3.png",
      "https://.../image4.png"
    ],
    "gridUrl": "https://.../grid.png"
  }
}

3. 「まだ処理中」の場合の扱い方

開発用に手早くセットアップするなら、次のようにできます：

  • 単純に待ち時間を長く取り、一度だけ取得する。
  • または、Fetch の後ろにシンプルなIF ノードを追加する：
    • 条件: status が次と等しい: "PROCESSING"
    • 「true」の場合：別の Wait + Fetch に分岐する
    • 「false」の場合：そのまま最終処理ロジック（Slack や Airtable など）に進む

本番環境では、Apiframe はポーリングの代わりに Webhook を使うことを推奨しています。これにより不要なリクエストを避け、即時に更新を受け取れます。

次はそれをやってみましょう。

VI. ワークフロー3 - Webhook ベースの結果取得（推奨）

これはクリーンで「ほぼリアルタイム」なアーキテクチャです：

  • ワークフローA：生成リクエストを送信（webhookUrl と webhookEvents を含める）
  • ワークフローB：Webhook を受信し、生成完了時に Apiframe から通知を受け取る

1. ワークフローBを作成する - Webhook 受信側

    1. n8n で新しいワークフローを作成し、名前を次のように付けます：Apiframe – 画像生成完了.
    2. 「Webhook」ノードを追加します。 Webhookノードを次のように設定します:
      • HTTPメソッド: POST
      • パス: 例えば次のようにします: apiframe/midjourney-completed
      • レスポンスモード:
        • 例えば「When Last Node Finishes」（最後のノードが終了したとき）を選ぶと、必要であればデータを返せます。

「Production URL」をコピーします。これはApiframe側でwebhookUrlとして設定する値になります。

Webhook node
Webhook node

2. Webhook 署名（X-Webhook-Signature）を検証する

Apiframeは、Webhook呼び出し時にX-Webhook-Signatureヘッダー（リクエストボディ全体のHMAC-SHA256署名）とX-Webhook-Eventヘッダー（イベント名）を送信します。署名の検証に使うシークレットは、APIキーそのものではなく、APIキーをSHA-256でハッシュ化した値です。

    1. Webhookノードの設定で「Raw Body」を有効にし、その後ろに Code ノードを追加します。
    2. Code ノードで、次のようなスクリプトを使って署名を検証します:
      • Code ノードに、次の JavaScript を貼り付けます（言語は JavaScript のままで問題ありません）：
javascriptn8n Code node
const crypto = require('crypto');

// 署名用シークレットは、APIキー自体ではなく、APIキーをSHA-256でハッシュ化した値です。
const secret = crypto
  .createHash('sha256')
  .update('afk_your_api_key_here')
  .digest();

// Webhookノードで「Raw Body」を有効にしておく必要があります。
const raw = $json.rawBody ?? JSON.stringify($json.body);

const expected = crypto
  .createHmac('sha256', secret)
  .update(raw)
  .digest('hex');

const received = $json.headers['x-webhook-signature'] ?? '';

const a = Buffer.from(expected);
const b = Buffer.from(received);

if (a.length !== b.length || !crypto.timingSafeEqual(a, b)) {
  throw new Error('Invalid webhook signature');
}

return $input.all();
      • 署名が一致しない場合、Code ノードは次のエラーをスローしてワークフローを停止します: Invalid webhook signature
      • 右側: あなたが設定したシークレット（例: my-super-secret
    • 署名が一致すれば、Code ノードはそのまま入力データ（$input.all()）を返すので、後続のノードで通常どおりペイロードを処理できます。
Secure webhooks
Secure webhooks

これにより、正規のApiframeからのWebhookだけが後続の処理に進むようになります。

3. Webhookペイロード内の画像URLへアクセスする

Webhookのボディは、先ほど紹介した「completed」ペイロードと同じ形式になります。

json
{
  "jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "status": "COMPLETED",
  "result": {
    "images": [
      "https://.../image1.png",
      "https://.../image2.png",
      "https://.../image3.png",
      "https://.../image4.png"
    ],
    "gridUrl": "https://.../grid.png"
  }
}

画像URLにはこのようにアクセスできるので、次のようなノードに渡せます：

  • Slackノード（URL付きメッセージを送信）
  • Airtable / Notion（URLを保存）
  • HTTP Request（自分のアプリのバックエンドへ送信）

4. Webhookを使うようにワークフローAを更新する

次に、ワークフローA（POST /v2/images/generate を呼び出しているほう）に戻り、HTTP Requestノードのボディを編集して、次を含めます：

  • webhookUrl
  • webhookEvents
Added webhook fields
Added webhook fields

HTTP Requestノード内のJSONボディの例：

json
{
  "model": "midjourney",
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "midjourneyParams": {
    "aspect_ratio": "3:2"
  },
  "webhookUrl": "https://your-n8n-domain.com/webhook/apiframe/midjourney-completed",
  "webhookEvents": ["completed", "failed"]
}

これでフローは次のようになります：

  1. ワークフローA → POST /v2/images/generate に対して webhookUrl ＋ webhookEvents
  2. Apiframeがバックグラウンドで画像を生成する
  3. 完了すると、Apiframeは最終的なURLを含めてあなたのWebhook（ワークフローB）を呼び出す
  4. ワークフローBがそれらを処理し、任意の場所へ転送する

ポーリングも余分なHTTPリクエストも不要で、イベントドリブンで動作します。

VII. このパターンを他のApiframeエンドポイントへ拡張する

便利なポイント：一度 n8n → Apiframe の配線ができてしまえば、同じパターンをあらゆる機能に再利用できます。

アイデア例：

  • Variations（バリエーション生成）：URLをhttps://api.apiframe.ai/v2/images/midjourney/action に切り替え、元のジョブのparentJobId、action（例: "variation"）、新しいプロンプトを指定します。
  • アップスケール: 同じ /v2/images/midjourney/action エンドポイントで、action の値だけを変えます。
  • フェイススワップ: 2つの画像URL（ソースとターゲット）をfaceswap エンドポイントに送信します。
  • Describe: 画像URLを渡すと、Apiframe がその画像用のプロンプトを返してくれる n8n ワークフローを構築します。
  • その他のメディア：動画（POST /v2/videos/generate）や音楽（POST /v2/music/generate）を含め、Flux、Ideogram、Luma、Suno なども、すべて同じ REST パターンに従います: POST で JSON を送り、webhookUrl と webhookEvents を含めれば Webhook を受け取れます。

これらのそれぞれは、n8n 上では単に別の HTTP Request ノード（さらに GET /v2/jobs/{jobId} も使うなら 2 つ）として実装でき、同じ「Apiframe Auth」認証情報を利用します。

VIII. まとめ

ここまでで、次のものが揃いました。

  • 基本的なPOST /v2/images/generate ワークフロー — n8n から Apiframe 経由で Midjourney をトリガー
  • ポーリング構成 — GET /v2/jobs/{jobId} を使った素早い実験用セットアップ
  • Webhook ベースのアーキテクチャ — リアルタイムかつ本番運用レベルのパイプライン向け

続けて読む

Apiframe はじめてガイド
Getting Started

Apiframe はじめてガイド

このガイドでは、Apiframe アカウントの開設から初めての API コールまでを、完全初心者でもわかるように丁寧に解説します。AI画像・動画・音声生成を今すぐ始めましょう。

次のAIプロダクトをApiframeで。

ひとつのAPIで70以上のメディアモデルに即アクセス。無料で始めて、準備ができたらスケールしましょう。

APIキーを取得 営業に相談