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

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

Zapier Webhookを作成する ​

1. 新しいZapを作成する（まだない場合） ​

Zapを作成

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

2. Webhooks by Zapierトリガーを設定する ​

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

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

3. Zapier Webhook URLをコピーする ​

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

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

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

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

4. Zapのアクションを設定する ​

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

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

CommentfulプラグインからZapier Webhook URLを追加する ​

CommentfulのZapier連携を設定するには、上記の手順に従って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をクリックします

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

Commentful WebアプリからZapier Webhook URLを追加する ​

CommentfulのZapier連携を設定するには、上記の手順に従って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/

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

Webhookペイロードの例 ​

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

テストメッセージ ​

「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
}

新しいコメント ​

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

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"
}

コメントスレッドへの返信 ​

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

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"
}

テキストの変更依頼 ​

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

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"
  }
}

画像の変更依頼 ​

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

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"
  }
}

ステータスの更新 ​

コメントのステータスが変更されたとき（例：「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のデータを使う ​

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

共通フィールド（すべてのペイロードに含まれる） ​

  • 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（テストメッセージには含まれません）

アクティビティ固有のフィールド ​

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のワークフローでよく使う例 ​

  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を使って、任意のアプリでクリックできるリンクを作る