> For the complete documentation index, see [llms.txt](https://docs-embed.anyflow.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-embed.anyflow.jp/solution-editor/triggers/outgoing/webhook.md).

# Webhookトリガー

## **概要**

Webhookトリガーは、自社プロダクトや外部サービス（Salesforce, kintone など）でイベント（商談のステータスが変更された、新しいデータが書き込まれたなど）が実行された際、リアルタイムにソリューションを実行する仕組みです。

<table><thead><tr><th width="148.8828125">フィールド名</th><th>説明</th></tr></thead><tbody><tr><td>イベント名</td><td><p>Webhookトリガーがイベントを待機している名前です。イベント名は、生成されるWebhookアドレスの一部になります。Webhookアドレスはウィザードに配置することが可能で、エンドユーザーがコピーできます。</p><p>また、ことなるソリューション間で、Webhookトリガーのイベント名を同一に設定しておくことで、複数のソリューションを同時に実行することが可能です。</p></td></tr><tr><td>Webhookタイプ</td><td><p>ソリューションを発火するWebhookのタイプを選択します。GETリクエストの状態でPOSTやPUTなどの異なるタイプでWebhookを送信しても発火しません。</p><p>以下の一覧から選択可能です。</p><p>- GET request<br>- PUT/POST with unicode text data<br>- PUT/POST with JSON payload</p></td></tr><tr><td>ペイロード</td><td>Webhookで送信されてくるペイロードを定義します。<br>ここで定義した変数が後継のアクション等で変数として利用可能です。</td></tr><tr><td>ヘッダー</td><td>Webhookで送信されてくるHTTPのヘッダーを定義します。<br>ここで定義した変数が後継のアクション等で変数として利用可能です。</td></tr></tbody></table>

## **設定方法**

### **Webhookコネクタの設定**

Webhookコネクタの設定画面にて、Webhookのリクエスト元が定義しているヘッダーやペイロードを設定します。

手動でペイロードを登録するか、JSONで入稿するか２つの方法が存在します。

<figure><img src="https://files.readme.io/2debb70-payload_self.png" alt="1680" width="563"><figcaption><p>手動で追加する</p></figcaption></figure>

手動で追加することも可能ですが、大量のペイロードが送信されてくる場合は、JSONで入稿することを推奨します。

<figure><img src="https://files.readme.io/b765036-payload_json.png" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="https://files.readme.io/64327b4-payload_json_input.png" alt="1679" width="563"><figcaption><p>kintoneから送信されてくるWebhookペイロードを入稿した例</p></figcaption></figure>

### **Webhookタイプの設定**

<details>

<summary>GET request</summary>

リクエスト元のWebhook送信仕様が次のような場合は `GET request` を指定します。

```json
curl -G https://example.com/webhook \
     -H "Authorization: Bearer your_auth_token" \
     --data-urlencode "param1=value1" \
     --data-urlencode "param2=value2"
```

この場合、Webhookコネクタでの設定は以下の通りになります。

<figure><img src="https://files.readme.io/995cba5-image.png" alt="" width="563"><figcaption></figcaption></figure>

</details>

<details>

<summary>PUT/POST with unicode text data</summary>

リクエスト元のWebhook送信仕様が次のような場合は `PUT/POST with unicode text data` を指定します。

```
curl -X POST https://example.com/webhook \
     -H "Content-Type: text/csv" \
     -H "Authorization: Bearer your_auth_token" \
     --data-binary '@test.csv'
```

この場合、Webhookコネクタでの設定は以下の通りになります。

<figure><img src="https://files.readme.io/5b6513e-image.png" alt="" width="563"><figcaption></figcaption></figure>

送信されたテキストデータ（test.csv）はWebhookの出力値として「ペイロード」という変数に格納され、ソリューション内で使用することができます。

<figure><img src="https://files.readme.io/393418b-image.png" alt="ファイルとして使用する例"><figcaption><p>ファイルとして使用する例</p></figcaption></figure>

<figure><img src="https://files.readme.io/c82ed3c-_2024-03-01_11.58.32.png" alt="テキストとして使用する例"><figcaption><p>テキストとして使用する例</p></figcaption></figure>

</details>

<details>

<summary>PUT/POST with JSON payload</summary>

リクエスト元のWebhook送信仕様が次のような場合は `PUT/POST with JSON payload` を指定します。

```
curl -X POST https://example.com/webhook \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer your_auth_token" \
     -d '{"message": "Hello, World!"}'
```

この場合、Webhookコネクタでの設定は以下の通りになります。

<figure><img src="https://files.readme.io/075177c-image.png" alt="" width="563"><figcaption></figcaption></figure>

</details>

詳細な仕様は[WebhookのAPI仕様書](/anyflow-api/webhook.md)をご確認ください。

### **ウィザードの設定**

エンドユーザーが設定するためのWebhook URLをウィザードのスクリーンに配置するために、エンドユーザーの設定項目から、`Webhook URL`を任意のスクリーンに配置します。

<figure><img src="https://files.readme.io/66e5b5f-webhook.png" alt="" width="563"><figcaption></figcaption></figure>

プレビューではWebhook URLが `https://example.com/webhook` と表示されていますが、テストやAnyflow SDKで埋め込んだ際には、実際のWebhook URLが生成されます。

<figure><img src="https://files.readme.io/40a8949-webhook_url.png" alt="" width="563"><figcaption></figcaption></figure>

## **利用例**

### **kintoneでの例**

kintoneでは[Webhookをサポート](https://jp.cybozu.help/k/ja/user/app_settings/set_webhook/webhook.html)しているので、例として取り上げます。

以下のスクリーンショットは、kintoneでWebhookが送信された際にSlackに通知するシンプルなソリューションです。\
また、POSTされてくるペイロードに関してすべて手入力で入力するには時間がかかるので、[kintoneから送信されるペイロード](https://jp.cybozu.help/k/ja/user/app_settings/set_webhook/webhook_notification.html) のJSONをコピーし、ペイロードをJSONで入稿しています。

<figure><img src="https://files.readme.io/a9392a2-kintone_solution_1.png" alt="1680"><figcaption><p>PUT/POSTのJSONペイロードを受け取るように設定</p></figcaption></figure>

<figure><img src="https://files.readme.io/4d46905-kintone_solution_2.png" alt="1680"><figcaption><p>kintoneから送信されてくるWebhookのペイロードをいくつかSlackに通知するように設定</p></figcaption></figure>

以下のように、kintoneのヘルプページに従ってWebhookが送信されるように設定します。

<figure><img src="https://files.readme.io/be86004-kintone_webhook_setting.png" alt=""><figcaption></figcaption></figure>

ソリューションのテストを行い、Webhookの待機状態になったタイミングでkintoneでイベントが発火されるようにデータの追加や編集を行い、Anyflowでテストが完了することを確認します。

## **クラウドサインでの例**

クラウドサインでも[Webhookをサポート](https://help.cloudsign.jp/ja/articles/417935-webhook-%E6%A9%9F%E8%83%BD)しているので、例として取り上げます。

Anyflow上でコピーしたWebhook URLをクラウドサイン（コネクタ側）のWebhookの設定欄に登録します。

<figure><img src="https://files.readme.io/0017cff-webhook-url.png" alt="1440"><figcaption><p><code>Hook URL</code>にコピーしたWebhook URLを入力し、保存する</p></figcaption></figure>

ソリューションのテストを行い、Webhookの待機状態になったタイミングでイベントが発火されるようにデータの追加や編集を行い、Anyflowでテストが完了することを確認します。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs-embed.anyflow.jp/solution-editor/triggers/outgoing/webhook.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
