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

Make Webhookを作成する

1. 新しいシナリオを作成する（まだない場合）

Makeのシナリオを作成

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

2. Webhooksモジュールを追加する

Webhooksモジュールを検索して、トリガーとして追加します。

Custom webhookを選び、Addをクリックして新しいWebhookを作成します。

3. Make Webhook URLをコピーする

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

https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

Commentfulを設定している間は、Makeの設定ページを開いたままにしておけます。Makeは最初のWebhookが届くのを待って、データ構造を判別します。

4. シナリオのアクションを設定する

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

Slack、Discord、Microsoft Teamsに送信する
Asana、Monday、Notionでタスクを作成する
GmailやSendGridでメール通知を送る
Google SheetsやAirtableに追加する
そのほか1,500以上のアプリやサービスと接続する

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

CommentfulのMake連携を設定するには、上記の手順に従ってMake Webhook URLを作成してから、Commentful FigmaプラグインでSettingsアイコンボタン（プラグインウィンドウの右上）を開き、次の手順を行います。

Enable webhook notifications for review linksをクリックします
Webhook PlatformドロップダウンからMakeを選択します
Make Webhook URLをコピーして貼り付けます。
例：https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456
Save Webhook URLをクリックします

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

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

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

キーボードでCTRL + Kキーを押して設定を開きます
Enable webhook notifications for review linksをクリックします
Webhook PlatformドロップダウンからMakeを選択します
Make Webhook URLをコピーして貼り付けます。
例：https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

Webhookペイロードの例

Commentfulは、わかりやすく使いやすいフィールドを持つ構造化されたJSONペイロードをMake 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 Make Webhook URL is working!",
  "message": "[Test Message] Yay! Your Make 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"
  }
}

データ構造を判別する

Commentfulから最初のテストメッセージを送信すると、MakeがWebhookのデータ構造を自動的に検出します。Make WebhookモジュールでOKをクリックして構造を確定し、使用できるデータフィールドを使ってシナリオの作成を続けます。

MakeでWebhookのデータを使う

すべてのWebhookペイロードは一貫した扱いやすいフィールドを持ち、Makeのシナリオで直接マッピングできます。

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

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進カラーコード

Makeのシナリオでよく使う例

Routerモジュール：typeフィールドで絞り込み、アクティビティごとに別のルートに振り分ける
フィールドの直接マッピング：author.displayName、message、actionなどのフィールドを出力モジュールに直接マッピングする
HTTPモジュール：image.urlを使って、アップロードされた画像をダウンロードして処理する
Slack・Discord・Teams：構造化されたフィールドを使って、整形した通知を転送する
Google Sheets・Airtable：すべてのフィードバックを、整理された構造化データとして記録する
Asana・Monday・Notion：関連する詳細をあらかじめマッピングしたタスクを作成する
条件分岐：status.colorやtypeで絞り込み、特定のワークフローを起動する
メール：urls.commentfulとurls.figmaをクリックできるリンクにして、整形した通知を送る

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

Make Webhookを作成する ​

1. 新しいシナリオを作成する（まだない場合） ​

2. Webhooksモジュールを追加する ​

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

4. シナリオのアクションを設定する ​

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

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

Webhookペイロードの例 ​

テストメッセージ ​

新しいコメント ​

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

テキストの変更依頼 ​

画像の変更依頼 ​

ステータスの更新 ​

データ構造を判別する ​

MakeでWebhookのデータを使う ​

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

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

Makeのシナリオでよく使う例 ​

Make Webhookを作成する

1. 新しいシナリオを作成する（まだない場合）

2. Webhooksモジュールを追加する

3. Make Webhook URLをコピーする

4. シナリオのアクションを設定する

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

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

Webhookペイロードの例

テストメッセージ

新しいコメント

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

テキストの変更依頼

画像の変更依頼

ステータスの更新

データ構造を判別する

MakeでWebhookのデータを使う

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

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

Makeのシナリオでよく使う例