kintoneでフィールドが特定の値に変更された時にSlackのワークフローへフィールドの値を連携する設定とJavaScriptサンプルコード

# 概要

下記の記事でkintoneからSlackへ、
メッセージを送るJavaScriptを紹介しました。

https://qiita.com/ito_futa/items/4b6ba9b75fffd7d776b7

が、後続の業務処理を考えて、メッセージではなく、
SlackのWorkflowへ情報を連携したい場合もあると思うので、
そちらも紹介します。

# Slack側での事前設定

:::note info
残念ながら有料のSlackでないと、Slack Workflowは使えないようです
:::

## 1. 「自動化」をクリック
Slackの左側メニューから「自動化」をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/97c4bce4-4516-550a-95ad-df7430f33c63.png" width="300px"/>

## 2. 「ワークフローを作成する」を選択
右上の「新しいワークフロー」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/02eb742e-a353-0653-c916-39867978d465.png)

既存で用意されているテンプレートを用いることもできます。
ただkintoneのコネクタは現状ないようなので、あまり使う意味はないのかも…。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/85462820-97fb-8f88-eafc-d93549d3e51a.png" width="500px" />

## 3. ワークフローのトリガーを設定
「ワークフローの開始方法を選択する」画面が表示されたら、
トリガーとして「Webhookから」を選択します。 
また、kintoneから連携したい情報（フィールドの値など）を変数として設定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/eb0375b0-d4e0-7115-cb9c-03dbf5b6c424.png" width="400px" />

それからこの画面でwebhookが発行されているので控えておきます。

## 4. ワークフローの挙動を設定
変数のほか、Workflowのボタンを押された後などの後続処理も設定します。
今回は、スレッド内に自動返信され、
ボタンを押した人の名前とURLがメッセージに含まれるようにしました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/4d537ca0-04d7-83cb-66e7-9f9df7049bfc.png" width="700px" />

## 5. ワークフローを公開して有効化
すべての設定が完了したら、ワークフローを適切なメンバーへの権限設定をして公開します。


# コード

次にkintone側に埋め込むJavaScriptを書いていきます。
ここでは先ほど3で控えたwebhookを用います。
下記がサンプルコードです。

```javascript:kintone2Slackworkflow
(function () {
    const subdomain = 'yourDomain'; // あなたのkintoneのサブドメイン
    const appId = '123'; // あなたのkintoneのアプリID
    const targetFieldCode = 'yourFieldCode'; // 監視するフィールドコード
    const specificValue = 'yourValue'; // 監視するフィールドコードの値
    const webhookUrl = 'yourSlackWorkflowToken'; // Slack Workflow URL
    let oldValue; // 監視対象のフィールドコードの旧値を保持する変数

    // 編集画面が表示されたときに発火するイベント
    kintone.events.on('app.record.edit.show', function (event) {
        // 監視対象のフィールドコードの旧値を取得
        oldValue = event.record[targetFieldCode].value;
    });

    // 保存ボタンが押されたときに発火するイベント
    kintone.events.on('app.record.edit.submit', function (event) {
        // 現在のフィールドの値を取得（変更感知用）
        const currentValue = event.record[targetFieldCode].value;
        // Slackへ連携するフィールドの値を取得（通知する変数用）
        const userID = event.record['userID'].value; // kintoneから取得したuserID（テキスト形式）
        const finalFlag = event.record['finalFlag'].value; // kintoneから取得したuserID（テキスト形式）
        const recordId = event.recordId;
        const recordUrl = `https://${subdomain}.cybozu.com/k/${appId}/show#record=${recordId}`;

        // 監視するフィールドの値が旧値から変更されていて、なおかつ指定した特定の値に等しい場合のみ、Slack通知する処理を続行する
        if (currentValue !== oldValue && currentValue === specificValue) {

            // Slack Workflowに送信するpayload
            const payload = {
                userID: `${userID}`, // userIDをテキスト形式で送信
                finalFlag: `${finalFlag}`, // finalFlagをテキスト形式で送信
                url: recordUrl // 対象レコードのURLをテキスト形式で送信
            };

            // kintone.proxyを使用してSlack APIにPOSTリクエストを送信
            const body = JSON.stringify(payload);

            const requestOptions = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json' // application/jsonを指定
                },
                body: body
            };

            // kintone.proxyでリクエストを実行
            kintone.proxy(webhookUrl, requestOptions.method, requestOptions.headers, requestOptions.body)
                .then(function (response) {
                    console.log('Slack Workflowへのpayload送信に成功:', response);
                })
                .catch(function (error) {
                    console.error('Slack Workflowへのpayload送信に失敗:', error);
                });
        }

        return event; // 処理を続行
    });
})();
```

- `payload`で設定してある変数がSlack Workflowに連携されます。
- Slackの事前準備で設定した変数を送るようにしてください。
    - 連携したい変数は、
    kintoneのフィールドコードを`event.record['hoge'].value;`で変数定義し、
    `payload`で送信してください。

:::note info
毎度書いてますが、
コードにwebhookを直接入れるのはそれなりにリスクがあるため、
場合によっては環境変数などで行うことをオススメします
:::

# テスト

kintoneのレコードを変更し保存すると、
ぶじにSlackのワークフローにて通知が来ました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/cc562697-13e1-1e6f-11d3-909a622bafbd.png" width="500px" />

また、「対応する」を押してスレッド内にさらにメッセージを来るようにすると
そこでも変数の値（レコードのURL）を用いることができました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/5e47bfdd-b645-b82b-beb9-d56bf310bc9b.png" width="500px" />

ワークフローを用いることで、kintone単体では見落としやすいお知らせも、
業務に紐づけて対応する流れを作り出すことができますね。