---
url: "/ja/emailify/export/webhook.md"
description: "Emailifyで生成したHTMLまたはMJMLソースを、JSONのWebhookペイロードとして独自のエンドポイントに送信します。"
---

# カスタムWebhook URLにメールをアップロードする

> Emailifyで生成したHTMLまたはMJMLソースを、JSONのWebhookペイロードとして独自のエンドポイントに送信します。

[Video](/assets/videos/emailify/export/webook-export.mp4)

Emailifyのエクスポートパネルで、ドロップダウンリストから**Custom Webhook URL**オプションを選択し、Emailifyから送信される[JSONペイロード](#the-json-payload-object-sent-via-post-to-your-url)を処理できるように作成した独自のURLエンドポイントを貼り付けます。

準備ができたら**POST**ボタンをクリックします。Figmaで選択したメールがエクスポートされ、カスタムWebhookのエンドポイントに`POST`リクエストとして送信されます。

> **Tip:** 画像は自動的に当社のCDNにアップロードされ、ペイロードで送信される`html`文字列プロパティ内のすべての``タグの`src`属性に設定されます。

> **Note:** コードはデフォルトでHTMLとしてエクスポートされます。エンドポイント側で別の形式が必要な場合は、Webhookのエクスポートオプションで**MJML Source Code**またはプラットフォーム固有の形式を選択できます。

## URLにPOSTで送信されるJSONペイロードオブジェクト {#the-json-payload-object-sent-via-post-to-your-url}

Emailifyから送信されるJSONペイロードには、以下のキーと値が含まれます。カスタムWebhook URLがこのペイロードを処理できるように作成されていることを確認してください。受け取ったペイロードは自由に活用できます。

```
{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "Exported email HTML"
}
```

### MJMLソースをCIワークフローに送信する {#send-mjml-source-to-a-ci-workflow}

エンドポイントで検証やコンパイルのために生成されたMJMLソースが必要な場合は、Webhookの形式セレクターで**MJML Source Code**を選択します。CIワークフローと同じMJMLバージョンを選択してください。Emailifyは、コンパイル済みの`html`フィールドを残したまま、`mjml`と`mjmlVersion`フィールドを追加します。

```json
{
  "name": "Name of the Figma frame",
  "subject": "Subject line set in Emailify settings",
  "preheader": "Preheader text set in Emailify settings",
  "html": "Compiled email HTML",
  "mjml": "Generated source MJML",
  "mjmlVersion": "mjml4"
}
```

`mjmlVersion`の値は`mjml4`または`mjml5`で、Emailifyで選択したバージョンと一致します。エンドポイントでは、MJMLを保存したり、CIでの検証をトリガーしたりでき、その後のメールプラットフォームへのアップロードはCIで制御できます。以下のカスタムJSONフィールドを使って、アプリ、テンプレート、環境、言語名などのワークフロー用メタデータを追加することもできます。

### ペイロードにカスタムのJSONボディとヘッダーを追加する {#adding-custom-json-body-and-headers-to-your-payload}

必要に応じて、以下の入力欄に独自の[有効なJSON文字列](https://www.w3schools.com/js/js_json_datatypes.asp)を追加できます。追加した内容は、プラグインからエンドポイントURLに`POST`リクエストとして送信されるペイロードの`header`オブジェクトや`data`ボディオブジェクトに自動で含まれます。

- **Custom Request Headers (Optional)** 欄で、カスタムの`header`オブジェクトのプロパティを設定できます（例：`{ "Authorization": "Bearer xyz" }`）。
- **Custom Extra JSON Data (Optional)** で、ボディの`data`オブジェクトにカスタムプロパティを設定できます（例：`{ "category": "emailify" }`）。
- また、エクスポートパネルのリストにある各メールの下の**Extra Email-Specific JSON Payload Data (Optional)** 欄で、ボディの`data`オブジェクトのカスタムプロパティを「メールごと」に設定することもできます（例：`{ "id": 26, "tag": "email", "edit": true }`）。これは、上記でグローバルに設定済みのJSONデータとマージされます。

## プロキシサーバー経由でJSONペイロードをPOSTする {#post-your-json-payload-via-a-proxy-server}

FigmaプラグインはFigmaアプリ内のサンドボックス化された`iFrame`要素の中で実行されるため、`origin`を持ちません。そのため、JSONペイロードの`POST`先のWebhook URLが、クロスオリジン（CORS）の問題によりリクエストを拒否する*可能性があります*。

これを回避するには、独自のWebhook関数で[Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)を`*`（すべて）に設定するか、カスタムWebhookへのエクスポート時にEmailifyプラグインの設定で**Use Proxy**トグル（デフォルトでオン）を有効にします。

**Use Proxy**トグルを有効にすると、リクエストはWebhook URLに届く前にプロキシサーバーを自動で経由します。これにより受信するPOSTリクエストに`origin`が付くため、CORSの問題は解決するはずです。これは純粋な転送リクエストなので、JSONデータはそのままプロキシを通過し、独自のWebhook URLに直接転送されます。

> **Note:** **Use Proxy**設定を有効にすると、プロキシサーバーを経由するリクエストは、送信のたびに**動的なIPアドレス**から送られます。そのため、**静的なIPアドレスが必要な場合**（オフィスのネットワークのIPアドレス範囲など、特定のIPからの受信リクエストのみを許可している場合など）は、この設定をオフにしてください。そのうえで、Webhook関数で[Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)を`*`に設定し、（プロキシサーバーを経由せずに）FigmaプラグインからのPOSTリクエストを直接受け付けるようにします。