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

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

このガイドで扱う内容：

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

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

I. これから作るもの

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

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

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

II. 前提条件

必要なもの：

• Apiframe のアカウントと、APIキーが必要です。これは Apiframe のダッシュボードから取得できます（またはこちらをクリック）。この API キーは、Authorization ヘッダーを通じてリクエストを認証するために使用します。

• n8n のインスタンス（セルフホストまたはクラウド版）
• n8n の各種ノード（HTTP Request、Webhook、Set、IF など）に関する基本的な知識。HTTP Request ノードは、n8n で任意の REST API を呼び出すための汎用ノードです。

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

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

• ステップ1：n8n で「Credentials → Create credential」に進みます。

• ステップ2：Header Auth（バージョンによっては「HTTP Header Auth」「API Key in Header」など）を選択します。

• ステップ3：次のように設定します：
  • ヘッダー名：Authorization
  • 値：Apiframe の API キー（ダッシュボードに表示されているものをそのまま使用）

• ステップ4：Apiframe Auth のような名前を付けて保存します。

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

Authorization: YOUR_API_KEY
Content-Type: application/json

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

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

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

1. n8n で新しいワークフロー（New workflow）を作成します。
2. 次に、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 ノードの出力 JSON はおおよそ次のようになります：

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

3. /imagine 用の HTTP Request ノードを追加する

1. Set ノードの後ろにHTTP Request ノードを追加します。
2. 次のように設定します：
   • Method：POST
   • URL：https://api.apiframe.pro/imagine
   • 認証は「Generic Credential type」を選択し、「Header Auth」を選んでから、先ほど作成した「Apiframe Auth」の認証情報を指定します。
   • Body については「Send body」をオンにして、prompt、aspect_ratio、そして後で使うための任意の webhook_url フィールドを追加します。

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

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a"
}

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

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

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

V. ワークフロー2 - /fetch を使ったApiframeのポーリング

次に、/fetch エンドポイントを使って、実際の画像URLを取得します。

Apiframe には、POST https://api.apiframe.pro/fetch というエンドポイントが用意されており、task_id を受け取って、最終結果 もしくは status: "processing" のレスポンスを返します。

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

1. Waitノードを追加する

先ほどの /imagine HTTP Requestノードの後に：

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

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

2. /fetch 用の HTTP Request ノードを追加する

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

• Method（メソッド）：POST
• URL：https://api.apiframe.pro/fetch
• 認証は、「Generic Credential type」を選択し、「Header Auth」を選んでから、先ほどと同じ 「Apiframe Auth」 を指定します。
• ボディ設定では「Send body」をオンにし、そこに task_id フィールド

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

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "status": "processing",
  "percentage": "40"
}

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

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "original_image_url": "https://.../grid.png",
  "image_urls": [
    "https://.../image1.png",
    "https://.../image2.png",
    "https://.../image3.png",
    "https://.../image4.png"
  ]
}

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

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

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

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

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

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

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

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

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

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

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

2. 「webhook_secret

Apiframeでは、webhook_secretを/imagineリクエストに渡すことができ、Webhook呼び出し時にx-webhook-secretヘッダーとしてその値が返されます。

1. Webhookノードの後ろにIFノードを追加します。
2. IFノードで、次の条件をチェックします:
   • 左側: 次のような式を設定します ={{ $json["headers"]["x-webhook-secret"] }}
   • 条件: equals（等しい）
   • 右側: あなたが設定したシークレット（例: my-super-secret
3. シークレットが一致しない場合は、処理を終了する（または試行をログに残す）だけのブランチへ進むようにします。

これにより、ApiframeからのWebhookだけが処理されるようになります。

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

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

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "original_image_url": "https://.../grid.png",
  "image_urls": [
    "https://.../image1.png",
    "https://.../image2.png",
    "https://.../image3.png",
    "https://.../image4.png"
  ]
}

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

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

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

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

• webhook_url
• webhook_secret

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

{
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "aspect_ratio": "3:2",
  "webhook_url": "https://your-n8n-domain.com/webhook/apiframe/midjourney-completed",
  "webhook_secret": "my-super-secret"
}

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

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

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

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

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

アイデア例：

• Variations（バリエーション生成）：URLをhttps://api.apiframe.pro/variations に切り替え、元のtask_id + 新しいプロンプト。
• アップスケール: 同じ認証情報で、エンドポイントとリクエストボディだけを変えます。
• フェイススワップ: 2つの画像URL（ソースとターゲット）をfaceswap エンドポイントに送信します。
• Describe: 画像URLを渡すと、Apiframe がその画像用のプロンプトを返してくれる n8n ワークフローを構築します。
• その他のメディア: Flux、Ideogram、Luma、Suno なども、すべて同じ REST パターンに従います: POST で JSON を送り、webhook_url と webhook_secret を含めれば Webhook を受け取れます。

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

VIII. まとめ

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

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