---
url: "/ja/commentful/reviews/zapier-integration.md"
description: "クライアントと共有したCommentfulのレビューリンクに新しいコメントが残されるたびに、Zapier Webhookへ通知を送るように設定できます。"
---

# レビューリンクのコメント用にZapier Webhookを設定する

> クライアントと共有したCommentfulのレビューリンクに新しいコメントが残されるたびに、Zapier Webhookへ通知を送るように設定できます。

## Zapier Webhookを作成する {#create-a-zapier-webhook}

### 1. 新しいZapを作成する（まだない場合） {#_1-create-a-new-zap-if-you-don-t-have-one-already}

[Zapを作成](https://zapier.com/app/zaps)

**Create Zap**をクリックして、オートメーションの作成を始めます。

### 2. Webhooks by Zapierトリガーを設定する {#_2-set-up-the-webhooks-by-zapier-trigger}

トリガーのステップで、**Webhooks by Zapier**を検索して選択します。

イベントの種類として**Catch Hook**を選び、**Continue**をクリックします。

### 3. Zapier Webhook URLをコピーする {#_3-copy-your-zapier-webhook-url}

Zapierが次のような固有のWebhook URLを生成します。

`https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`

このURLをコピーしてください。Commentfulの設定に必要です。

> **Tip:** あとでWebhookをテストするために戻ってくる必要があるので、Commentfulを設定している間はZapierの設定ページを開いたままにしておけます。

### 4. Zapのアクションを設定する {#_4-configure-your-zap-action}

Commentfulを設定したら（下記参照）、コメントを受け取ったときの動作を設定できます。

- Slack、Discord、Microsoft Teamsに送信する
- Asana、Trello、ClickUpでタスクを作成する
- メール通知を送る
- Google SheetやAirtableに追加する
- そのほか6,000以上のアプリと接続する

## CommentfulプラグインからZapier Webhook URLを追加する {#add-your-zapier-webhook-url-via-the-commentful-plugin}

[Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4)

CommentfulのZapier連携を設定するには、[上記の手順](#create-a-zapier-webhook)に従ってZapier Webhook URLを作成してから、Commentful Figmaプラグインで**Settings**アイコンボタン（プラグインウィンドウの右上）を開き、次の手順を行います。

1. **Enable webhook notifications for review links**をクリックします
2. **Webhook Platform**ドロップダウンから**Zapier**を選択します
3. Zapier Webhook URLをコピーして貼り付けます。

   例：`https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`

4. **Save Webhook URL**をクリックします

> **Tip:** **Send Test Message**ボタンをクリックすると、CommentfulからZapier Webhookにテスト通知が送信されるので、Zapier連携が正しく動作しているかを確認できます。

## Commentful WebアプリからZapier Webhook URLを追加する {#add-your-zapier-webhook-url-via-the-commentful-web-app}

CommentfulのZapier連携を設定するには、[上記の手順](#create-a-zapier-webhook)に従ってZapier Webhook URLを作成してから、Commentful Webアプリ（共有されたレビューリンクをブラウザで開いた状態）で次の手順を行います。

1. キーボードで**CTRL + K**キーを押して設定を開きます
2. **Enable webhook notifications for review links**をクリックします
3. **Webhook Platform**ドロップダウンから**Zapier**を選択します
4. Zapier Webhook URLをコピーして貼り付けます。例：`https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`

> **Tip:** **Send Test Message**ボタンをクリックすると、CommentfulからZapier Webhookにテスト通知が送信されるので、Zapier連携が正しく動作しているかを確認できます。

## Webhookペイロードの例 {#webhook-payload-examples}

Commentfulは、わかりやすく使いやすいフィールドを持つ構造化されたJSONペイロードをZapier Webhookに送信します。ペイロードの構造はアクティビティの種類によって異なります。

### テストメッセージ {#test-message}

「Send Test Message」をクリックすると、次のペイロードが送信されます。

```json
{
  "type": "test",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "[Test Message] Yay! Your Zapier Webhook URL is working!",
  "message": "[Test Message] Yay! Your Zapier Webhook URL is working!",
  "timestamp": 1234567890
}
```

### 新しいコメント {#new-comment}

フレームに新しいコメントが投稿されたとき：

```json
{
  "type": "comment",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Feedback Comment",
  "message": "This section needs more contrast for accessibility",
  "timestamp": 1234567890,
  "feedbackId": "abc123"
}
```

### コメントスレッドへの返信 {#reply-to-comment-thread}

既存のコメントに返信があったとき：

```json
{
  "type": "reply",
  "author": {
    "name": "janesmith",
    "displayName": "Jane Smith (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Comment Thread Reply",
  "message": "I'll update the contrast ratio to meet WCAG AA standards",
  "timestamp": 1234567890,
  "feedbackId": "abc123"
}
```

### テキストの変更依頼 {#text-change-request}

テキストの変更が依頼されたとき：

```json
{
  "type": "text",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Text Change Request",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "textChange": {
    "original": "Sign Up Now",
    "new": "Get Started Today"
  }
}
```

### 画像の変更依頼 {#image-change-request}

フィードバックとして画像がアップロードされたとき：

```json
{
  "type": "image",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Image Change Request",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "image": {
    "url": "https://example.com/path/to/image.png",
    "fileName": "updated-logo.png"
  }
}
```

### ステータスの更新 {#status-update}

コメントのステータスが変更されたとき（例：「To Do」→「Done」）：

```json
{
  "type": "status",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "Updated to Done",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "status": {
    "text": "Done",
    "color": "#1bc47d"
  }
}
```

## ZapierでWebhookのデータを使う {#using-the-webhook-data-in-zapier}

すべてのWebhookペイロードは、一貫した扱いやすいフィールドを持っています。

### 共通フィールド（すべてのペイロードに含まれる） {#common-fields-in-every-payload}

- **type**：アクティビティの種類。`test`、`comment`、`reply`、`text`、`image`、`status`のいずれか
- **author.name**：ユーザーのハンドル・ユーザー名
- **author.displayName**：プロジェクト情報付きで整形された表示名
- **project.name**：プロジェクト名またはページ名
- **frame.name**：Figmaフレームの名前
- **frame.nodeId**：FigmaのノードID
- **urls.commentful**：Commentfulで表示するための直接リンク
- **urls.figma**：Figmaで開くための直接リンク
- **action**：アクティビティをわかりやすく説明した文
- **message**：コメントまたはフィードバックのメッセージ（テキスト・画像・ステータスの変更では空の場合があります）
- **timestamp**：アクティビティが発生した日時のUnixタイムスタンプ
- **feedbackId**：このフィードバック項目の一意のID（テストメッセージには含まれません）

### アクティビティ固有のフィールド {#activity-specific-fields}

`type`に応じて、次のフィールドが追加されます。

- **textChange**（`type`が`text`の場合）：
  - `textChange.original`：元のテキスト
  - `textChange.new`：依頼された新しいテキスト

- **image**（`type`が`image`の場合）：
  - `image.url`：アップロードされた画像のURL
  - `image.fileName`：画像の元のファイル名

- **status**（`type`が`status`の場合）：
  - `status.text`：新しいステータス名（例：「Done」「In Progress」）
  - `status.color`：ステータスの16進カラーコード

### Zapのワークフローでよく使う例 {#common-zap-workflows}

1. **typeで絞り込む**：`type`フィールドを使って、アクティビティごとに別のアクションに振り分ける
2. **タスクを作成する**：フィールドをタスク管理ツール（Asana、Trello、ClickUp）に直接マッピングする
3. **整形した通知を送る**：Slack・Teamsのメッセージで`author.displayName`、`action`、`message`を使う
4. **スプレッドシートに記録する**：構造化されたすべてのデータをGoogle Sheetsの行として追加する
5. **条件分岐**：`status.text`や`status.color`で絞り込み、特定のワークフローを起動する
6. **画像をダウンロードする**：`image.url`を使って、アップロードされた画像を取得して処理する
7. **ディープリンク**：`urls.commentful`と`urls.figma`を使って、任意のアプリでクリックできるリンクを作る