チャットメッセージを要約する AI Bot を Craft AI Modules で実装する

<html><head></head><body>どうも、Customer Engineerの池上です。最近はゼルダTotKを150時間くらいやっています。
さて、KARTEを使っていると 「イベント発生時に特定条件で外部にWebhookリクエストを投げたいな」 と思うことがよくあります。たとえば次のようなユースケースです。
<ul>
<li>Webサイト上で特定の行動を取っているユーザーがいたら社内Slackに通知したい</li>
<li>Webサイト上で取得したフォーム入力の結果をスプレッドシートへリアルタイムに蓄積したい</li>
</ul>
特にZapierなどのiPaaSを使っている場合、雑にiPaaS側エンドポイントにWebhookリクエストを投げて加工して別ツールに連携する、といった自動化をGUI上の設定だけでできます。いい時代ですね。
今回はこうしたWebhookをKARTEの「接客サービス」機能と「Craft Functions」を使って実現する方法について紹介します。
<img src="https://ik.imagekit.io/plaid/928e2a1c-70d1-43df-a84d-5f345624af72/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-06-0117.57.30.png" alt="スクリーンショット2023-06-0117.57.30.png">
<h1 id="接客サービス機能でできること">接客サービス機能でできること</h1>
Webhookにおいて重要なのは「どのタイミングでトリガーするのか」という点です。ここでは、Craft Functionsのトリガーの1つである 「サーバーサイドアクション」 を利用します。
<a href="https://craft.developers.karte.io/craft-functions/triggers/server-side-action" target="_blank" rel="noreferrer">https://craft.developers.karte.io/craft-functions/triggers/server-side-action</a>
「サーバーサイドアクション」トリガーは、KARTEの接客サービス配信の仕組みを使ってFunctionの起動条件を設定できる機能です。
そもそもKARTEでは、Webサイトやネイティブアプリから取得したユーザー行動データを「イベント」として計測し、そのイベントをトリガーとして「接客サービス」を配信することができます。
「接客サービス」とは、配信するアクションと、それを配信する条件とを束ねたものです。フロントエンドで表示するポップアップやアンケート、またはメール送信やLINE送信などのサーバーサイドのアクションの配信でよく利用されます。 
<img src="https://ik.imagekit.io/plaid/c186c380-5baf-455b-b94a-694c37873309/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-06-0118.37.54.png" alt="スクリーンショット2023-06-0118.37.54.png">
一方で、接客サービスの配信条件設定の機能を利用してCraftのFunction実行タイミングを制御する、ということもできるようになっています。それがCraft Functionsの「サーバーサイドアクション」トリガーです。外部サーバーにHTTPリクエストを送信するFunctionを予め作っておけば、 「接客サービスの配信条件を満たしたら外部サーバーにリクエストを送る」 というWebhookの仕組みを構築できるというわけです。
KARTEの接客サービス機能では、主に次のような配信条件を設定できます。
<ul>
<li>対象ユーザー
<ul>
<li>ユーザーのセグメントやディメンションに対する条件</li>
</ul>
</li>
<li>対象イベント
<ul>
<li>トリガーとなるイベントのイベント名やフィールド値に対する条件</li>
</ul>
</li>
<li>スケジュール
<ul>
<li>開始日、終了日、配信曜日、配信時間帯など</li>
</ul>
</li>
</ul>
この仕組みに乗っかることで、Webhookのトリガー条件をGUIで驚くほど柔軟に設定することができます。便利ですね。
（詳細: <a href="https://support.karte.io/post/4yOwCoZkdoPZwpFRvSrkwP" target="_blank" rel="noreferrer">接客サービス作成の流れ | ドキュメント / アクション / 作成・ 配信設定 | KARTEサポートサイト</a>）
<h1 id="Webhook設定の手順">Webhook設定の手順</h1>
ここからは、 「特定ページを見たユーザーのuser_idをリアルタイムに通知する」 というユースケースを想定して実際の設定手順を紹介します。
<img src="https://ik.imagekit.io/plaid/928e2a1c-70d1-43df-a84d-5f345624af72/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-06-0117.57.30.png" alt="スクリーンショット2023-06-0117.57.30.png">
リクエスト送信先の外部システムについては、例としてZapierを使います。
<h2 id="1. Functionを作成する">1. Functionを作成する</h2>
まずは外部サーバーにHTTPリクエストを送信するFunctionをCraft Functionsに新規作成します。
<ul>
<li>Craft Functions画面を開く</li>
<li>Functionを適当な名称で新規作成
<ul>
<li>例) <code>webhook_action</code></li>
</ul>
</li>
<li>次のサンプルコードをコピーして貼り付けて保存
<ul>
<li><a href="https://github.com/plaidev/craft-codes/tree/main/craft-functions/webhook-action" target="_blank" rel="noreferrer">craft-codes/craft-functions/webhook-action at main · plaidev/craft-codes · GitHub</a></li>
</ul>
</li>
</ul>
なお、このサンプルコードでは失敗した場合のリトライ処理も実装されています。
<h2 id="2. Functionを起動するための接客サービスを作成する">2. Functionを起動するための接客サービスを作成する</h2>
次に、Functionをトリガーする条件を指定するための接客サービスを作成します。
<ul>
<li>接客サービス画面を開く</li>
<li><code>Craft Functions連携</code> テンプレートを利用してアクションを追加
<ul>
<li>※ テンプレートが表示されない場合は、<a href="https://ecosystem.plaid.co.jp/product/karte-craft" target="_blank" rel="noreferrer">Craftの利用申請</a>が必要です</li>
</ul>
</li>
</ul>
<img src="https://ik.imagekit.io/plaid/cb48cec0-b2cf-488b-bb60-e16ea5aa3204/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-06-0612.10.45.png" alt="スクリーンショット2023-06-0612.10.45.png">
<ul>
<li>次のような配信設定をする
<ul>
<li>「アクション」
<ul>
<li>配信率: 100%
<ul>
<li>※ アクションの中身の設定については後述</li>
</ul>
</li>
</ul>
</li>
<li>「対象ユーザー」
<ul>
<li>全員
<ul>
<li>※ 対象ユーザーを絞りたい場合は、条件を指定します</li>
<li>※ 検証中はテスト配信用のセグメントを設定してください</li>
</ul>
</li>
</ul>
</li>
<li>「対象イベント」
<ul>
<li>「〇〇ページを見た」という条件になるよう「閲覧イベント」に対する条件を指定</li>
</ul>
</li>
<li>「オプション」
<ul>
<li>同時配信: OK</li>
</ul>
</li>
</ul>
</li>
</ul>
<img src="https://ik.imagekit.io/plaid/2ef20728-383a-4292-bffe-9c4b1a67779d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-06-0516.18.11.png" alt="スクリーンショット2023-06-0516.18.11.png">
<ul>
<li>保存する</li>
</ul>
<h2 id="3. アクション設定でFunctionに渡すデータを定義する">3. アクション設定でFunctionに渡すデータを定義する</h2>
接客サービスに登録したアクションの設定をしていきます。ここで設定した内容がCraft Functions側に渡されます。
<img src="https://ik.imagekit.io/plaid/19c24d94-ef7f-4bf8-99fa-e2fdc9dbc197/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-06-0617.36.46.png" alt="スクリーンショット2023-06-0617.36.46.png">
<ul>
<li>「アクション設定」を埋めていく
<ul>
<li>「ファンクション名」
<ul>
<li>トリガーしたいFunctionの名称（今回の例では <code>webhook_action</code> ）を設定</li>
</ul>
</li>
<li>「name」
<ul>
<li>今回は利用しないので「ファンクション名」と同じ値を設定</li>
</ul>
</li>
<li>「data」
<ul>
<li>JSONで次のフィールドを設定</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="TableScroll"><table>
<thead>
<tr>
<th>名称</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>リクエスト送信先URLを指定. 今回はZapierで発行したWebhook受け取りURLを設定する.</td>
</tr>
<tr>
<td>method</td>
<td>HTTP methodを指定.</td>
</tr>
<tr>
<td>hookData</td>
<td>Webhookで送りたいデータ群をJSONで指定. この内容がFunctionの引数dataに渡される. 今回はuser_idをフィールドに含める.</td>
</tr>
<tr>
<td>headers</td>
<td>任意のHTTPヘッダー群をJSONで指定.</td>
</tr>
<tr>
<td>infoLogEnabled</td>
<td>Craft Functions側に正常終了時のログを出力するかどうか.</td>
</tr>
<tr>
<td>campaignId</td>
<td>接客サービスID. Craft Functions側のログに出力される.</td>
</tr>
</tbody>
</table></div>
<pre><code class="language-json hljs">{ 
 "url": "https://hooks.zapier.com/hooks/catch/1234567/xxxxxxx/",
 "method": "POST",
 "hookData": {"userId": "#{user_id}" },
 "headers": {"Content-Type": "application/json; charset=UTF-8"},
 "infoLogEnabled": true,
 "campaignId": "#{campaign_id}"
}
</code></pre>
なお、アクション中ではuser_idやcampaign_idという変数はプリセットされており、ユーザー情報変数などで特別に定義しなくても利用できます。（<a href="https://developers.karte.io/reference/static-variables#karte%E5%86%85%E9%83%A8%E3%81%A7%E5%AE%9A%E7%BE%A9%E3%81%95%E3%82%8C%E3%81%9F%E5%A4%89%E6%95%25B" target="_blank" rel="noreferrer">詳細</a>）
各項目がどのように利用されているかについては、Function側のコードをご覧ください。
ここまで準備が整ったら、作成した接客サービスを公開します。
<h2 id="4. Webhookを受け取る外部システム側での設定">4. Webhookを受け取る外部システム側での設定</h2>
これで、特定ページを見たユーザーがいたらリアルタイムにWebhookリクエストを送ることができるようになりました。 
今回はZapierにWebhookリクエストを送っているので、Zapier側での設定例も示します。
たとえばSlackに「特定ページを見たユーザー」のユーザーストーリー画面URLを通知する場合を考えます。 
次のように、Slackに送信するメッセージの中でWebhookから受け取ったuser_idを参照し、ユーザーストーリー画面URLを生成します。 
<img src="https://ik.imagekit.io/plaid/cbabc014-c1ca-4062-9eac-9d8115675b4e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-06-0516.54.59.png" alt="スクリーンショット2023-06-0516.54.59.png">
これで「特定ページを見たユーザーがいたらSlackに通知する」という通知設定を実現することができました。
今回紹介したユースケースに限らず、「大量のユーザー行動データから任意の条件で任意のサーバーにWebhookリクエストを飛ばす」ということができることで実現できるソリューションは数多あります。 
ぜひ皆さんも、欲しいWebhookロジックを接客サービスとCraft Functionsで構築できないか考えてみてはいかがでしょうか？
<hr>
プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ 
ぜひ気軽にお問い合わせください。
↓ パートナー企業になりたい
<ul>
<li><a href="https://ecosystem.plaid.co.jp/" target="_blank" rel="noreferrer">CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem</a></li>
</ul>
↓ PLAIDで働きたい
<ul>
<li><a href="https://recruit.plaid.co.jp/requisitions/general-customer-engineer" target="_blank" rel="noreferrer">Customer Engineer | 募集ポジション | 株式会社プレイド</a></li>
<li><a href="https://recruit.plaid.co.jp/requisitions/product-engineer" target="_blank" rel="noreferrer">Product Engineer | 募集ポジション | 株式会社プレイド</a></li>
</ul>
</body></html>

「Webサイト上で特定の行動を取っているユーザーがいたら社内にSlack通知したい」といったことを実現するためのWebhookの仕組みをKARTEで実現できます。この記事では、接客サービス機能とCraft Functionsを使ってこうしたWebhookを実現するための方法について紹介します。

Web上のユーザー行動をトリガーにして外部にWebhookリクエストを飛ばす