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

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

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

## Make Webhookを作成する {#create-a-make-webhook}

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

[Makeのシナリオを作成](https://www.make.com/en/scenarios)

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

### 2. Webhooksモジュールを追加する {#_2-add-a-webhooks-module}

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

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

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

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

`https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456`

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

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

### 4. シナリオのアクションを設定する {#_4-configure-your-scenario-actions}

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

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

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

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

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

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

   例：`https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456`

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

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

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

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

1. キーボードで**CTRL + K**キーを押して設定を開きます
2. **Enable webhook notifications for review links**をクリックします
3. **Webhook Platform**ドロップダウンから**Make**を選択します
4. Make Webhook URLをコピーして貼り付けます。

   例：`https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456`

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

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

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

## データ構造を判別する {#determining-the-data-structure}

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

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

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

### 共通フィールド（すべてのペイロードに含まれる） {#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進カラーコード

### Makeのシナリオでよく使う例 {#common-make-scenarios}

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