Craft Function新機能＆画面リニューアルのお知らせ

<html><head></head><body>こんにちは、Customer EngineerのKohaです！ 
今回が初投稿となります。お手柔らかにお願い申し上げます。
本記事では、先んじて投稿のあった「<a href="https://solution.plaid.co.jp/202309-ms-teams-change-campaign-status">Microsoft TeamsからKARTEの接客サービスの公開／非公開状態を切り替える</a>」の、Slackバージョンを紹介いたします。
こんな感じでSlackに接客情報とボタンを表示して、ボタン操作で接客ステータスを変更できるようになります。 
<img src="https://ik.imagekit.io/plaid/1867f35c-03fe-409c-b303-783dbdc71d1d/%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-09-1216.11.13.png" alt="スクリーンショット2023-09-1216.11.13.png">
<h1 id="用意する部品">用意する部品</h1>
Slack Apps（Slackアプリ）×1 
Craft Functions × 2
<h1 id="処理の流れ">処理の流れ</h1>
ざっくりイメージは冒頭の通りですが、詳しい仕組みはこのようになってます。 
<img src="https://ik.imagekit.io/plaid/fe2680bb-f982-43d8-a389-2f21847836cd/%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-09-1210.06.50.png" alt="スクリーンショット2023-09-1210.06.50.png">
端的に書くと、 
・Slack上でSlash commandを実行して接客とボタンを表示 
・公開か停止かのボタンを押して接客のステータスを変更 
という流れです！
<h1 id="実装手順">実装手順</h1>
実装の手順は次の通りです。
<ol>
<li>Slack アプリの作成</li>
<li>Slack アプリをチャンネルに追加する</li>
<li>API v2 アプリを作成する</li>
<li>Slack アプリの OAuth トークンをCraft Secret Managerに登録する</li>
<li>API v2アプリのアクセストークンをCraft Secret Managerに登録する</li>
<li>Craft Functions を2つ作成する</li>
<li>Craft Functionsのエンドポイントを作成する</li>
<li>SlackアプリのSlach Commandを作成する</li>
<li>SlackアプリのInteractivityを有効にする</li>
</ol>
順番に説明します。
まず、手順1〜4は以前に投稿した記事、 
「<a href="https://solution.plaid.co.jp/202307-hookv2-slack-integration">KARTE CraftでKARTEの接客ステータス変更時にSlack通知をする</a>」 
と全く同じです。こちらを実施した前提で手順5から説明します。
<h2 id="5. API v2アプリのアクセストークンをCraft Secret Managerに登録する">5. API v2アプリのアクセストークンをCraft Secret Managerに登録する</h2>
Slack側のアクション駆動でCraft Functionを起動する場合、API v2アプリへのアクセスも実装するので本手順も必要となります。手順4と同様に登録してください。
<h2 id="6. Craft Functions を2つ作成する">6. Craft Functions を2つ作成する</h2>
今回は、 
①接客サービス情報をSlackへ送る 
　<a href="https://github.com/plaidev/craft-codes/blob/main/craft-functions/slack-change-campaign-status-send/index.js" target="_blank" rel="noreferrer">サンプルコード①</a>
②接客ステータスを切り替える 
　<a href="https://github.com/plaidev/craft-codes/blob/main/craft-functions/slack-change-campaign-status-receive/index.js" target="_blank" rel="noreferrer">サンプルコード②</a>
サンプルコードを利用する場合は以下3つの定数を手動でご自身のものを代入してください。
<pre><code class="hljs">/* KARTE API V2 Setting - ACCESS TOKEN */
const SECRET_KEY_API = "";

/* Slack App - Bot User OAuth Token */
const SECRET_KEY_SLACK = "";

/* KARTE Project ID */
const PROJECT_ID = "";
</code></pre>
またそれぞれのFunctionのロジックは以下のようになっております。
<h5 id="接客サービス情報をSlackへ送るFunction">接客サービス情報をSlackへ送るFunction</h5>
Slackから渡された接客IDでKARTE API v2（<a href="https://developers.karte.io/reference/post_v2beta-action-campaign-findbyid" target="_blank" rel="noreferrer">接客取得API</a>）を利用し接客を検索する 
↓ 
Slackに送るボタンと接客名・URLを含めたメッセージを作りSlackに送る
<h5 id="接客ステータスを切り替えるFunction">接客ステータスを切り替えるFunction</h5>
Slackのボタン操作結果からKARTE APIv2(<a href="https://developers.karte.io/reference/post_v2beta-action-campaign-findbyid" target="_blank" rel="noreferrer">接客ステータス変更API</a>)を利用し接客ステータスを変更する 
↓ 
変更結果をSlackに返し初めに送ったメッセージを更新する
<h5 id="※補足：Slackへ送るボタンデザインの方法">※補足：Slackへ送るボタンデザインの方法</h5>
サンプルコードでは以下のように変数messageにJSON形式の値を詰めています。 
Slack APIを利用してSlackにメッセージをPostする際はJSONを渡す必要がありますが、描画する内容は<code>blocks</code>に表現します。この中身を簡単に作れるツールをSlackが公式に提供しており、テンプレートもいくつか用意されているようなので、もっとおしゃれでリッチにしたい！という方がいればお試しください。 
<a href="https://app.slack.com/block-kit-builder/" target="_blank" rel="noreferrer">Slack | Block Kit Builder</a>
<pre><code class="hljs">const message = {
 "channel": channelId,
 "attachments": [
 {
 "fallback": campaign.campaignName,
 "callback_id": campaign.campaignId
 }
 ],
 "blocks": [
 / * 〜ここがUIを表現する箇所〜 */
　　　]
 }
</code></pre>
<h2 id="7. Craft Functionsのエンドポイントを作成する">7. Craft Functionsのエンドポイントを作成する</h2>
作成した2つのFunctionに対して、 
「<a href="https://solution.plaid.co.jp/202309-ms-teams-change-campaign-status">Microsoft TeamsからKARTEの接客サービスの公開／非公開状態を切り替える</a>」 
の手順3「Craft Functions の エンドポイントURLを作成する」を実施してください。
<h2 id="8. SlackアプリのSlach Commandを作成する">8. SlackアプリのSlach Commandを作成する</h2>
手順1で作成したSlackアプリにSlash Commandを設定します。
<ul>
<li>作成したアプリを選択し、[Features &gt; Slash Commands]をクリック</li>
<li><code>Create New Command</code>をクリック。</li>
</ul>
<img src="https://ik.imagekit.io/plaid/6fa7232e-5cfb-4838-a097-86d0a957320b/%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-09-1215.36.07.png" alt="スクリーンショット2023-09-1215.36.07.png">
<ul>
<li>Commandに任意のコマンドを入力する。 
※Slackワークスペース内では同名称のCommandが許容されますが、最新のもののみが有効となるようなのでご注意ください。</li>
<li>Request URLに手順7で作成した接客サービス情報をSlackへ送るFunctionのCraft EndpointのURLを入力する。</li>
<li>Short Discriptionに任意の説明文を入力する。</li>
<li><code>Save</code>をクリックする 
<img src="https://ik.imagekit.io/plaid/1db1fc65-9044-4dc6-8420-7249d02414b0/%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-09-1215.39.19.png" alt="スクリーンショット2023-09-1215.39.19.png"></li>
</ul>
<h2 id="9. SlackアプリのInteractivityを有効にする">9. SlackアプリのInteractivityを有効にする</h2>
今度はSlackに表示させたボタンをクリックした際にアクセスするURLを指定します。
<ul>
<li>[Features &gt; Interactivity &amp; Shortcuts]をクリック。</li>
<li>Offとなっている箇所をOnに切り替える。</li>
<li>Request URLに手順7で作成した接客ステータスを切り替えるFuntionのCraft EndpointのURLを入力する。</li>
<li><code>Save Changes</code>をクリックして保存する。 
<img src="https://ik.imagekit.io/plaid/243f1e10-2f2d-42b0-9a1c-b2579f791e0d/%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-09-1215.41.32.png" alt="スクリーンショット2023-09-1215.41.32.png"> 
　※上キャプチャに含まれる「Shortcuts」は今回利用しないので設定不要です。</li>
</ul>
<h1 id="実際に動かしてみる">実際に動かしてみる</h1>
実際に動作を確認してみましょう。
<ul>
<li>
今回作成したアプリを追加したチャンネルでSlash Commandを投稿する 
<img src="https://ik.imagekit.io/plaid/7ea87771-f17c-4720-a718-f7776a322fea/%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-09-1216.07.21.png" alt="スクリーンショット2023-09-1216.07.21.png">
</li>
<li>
接客情報を取得中であるメッセージが表示された後、接客名、URL、ボタンが表示されることを確認します。 
※非公開メッセージで返ってくる{id:xxxx}はCraft Functionの実行IDです。2023年9月現在はこの文字列が固定で表示される仕様となっております。 
<img src="https://ik.imagekit.io/plaid/1867f35c-03fe-409c-b303-783dbdc71d1d/%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-09-1216.11.13.png" alt="スクリーンショット2023-09-1216.11.13.png">
</li>
<li>
現在は停止中だったので<code>公開する</code>ボタンをクリックし、変更されたことを確認します。 
<img src="https://ik.imagekit.io/plaid/563a7e3c-04a2-4eec-af50-88287cbffb36/%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-09-1216.14.22.png" alt="スクリーンショット2023-09-1216.14.22.png">
</li>
<li>
KARTE上でも確認する。 
<img src="https://ik.imagekit.io/plaid/3b24bae8-67c9-425d-bb70-7e01d4c3e355/%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-09-1216.37.57.png" alt="スクリーンショット2023-09-1216.37.57.png">
</li>
</ul>
<h1 id="おわりに">おわりに</h1>
Teamsから接客ステータスを変更するソリューションに続き、Slackからも接客のステータスを変更できるようになりました！ぜひ活用してみてください。
今回は接客IDを指定し、1つずつ接客を編集する仕様にてご紹介しましたが例えばKARTE Datahubをご利用であればジョブフロー機能を利用して接客の一覧を取得してSlackに投稿するというような応用も考えられます！
Slackをご利用の方はたくさんいらっしゃると思いますので、こういう使い方ができないだろうか？といったご意見お待ちしております！
<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>

KARTE CraftとSlack APIを利用するしKARTEの接客サービスへアクセスします。スマホなどから簡単に接客の公開非公開を操作することが可能になります。

SlackからKARTEの接客サービスの公開／非公開状態を切り替える