Slack通知後、スレッドに連投(JavaScript)

ゆーしゃん
2022.03.04
673 views

概要

kintoneのレコードイベント発生時、
Slackに通知し、通知したメッセージ対しスレッドで連投する

プログラムを作成した理由

弊部にて「webhookを用いてSlackに新規投稿」のJavaScriptコードは存在しているが、
webhookは「返信する投稿のthread_tsが取得できない」仕様の為、
スレッドに続けて返信が出来ない状態であった。

※現状のコードを流用して実装すると
↓画像のように毎回新規投稿になってしまい、見づらく、情報を遡りにくくなってしまう

現状はこの新規投稿だけでも運用が成り立っているが、
「他部署のシステムはスレッドに返信出来ているし、実現する手段があれば弊部でも活用したい」
と調査依頼を頂いた為、作成開始。

SlackのAPI作成方法

以下サイトの以下項目通りに作成
・アプリを作成する
・スコープを設定する
・アプリをワークスペースにインストールする
・アプリをチャンネルに追加する
https://zenn.dev/kou_pg_0131/articles/slack-api-post-message

ソースコード

(function() {
    'use strict';
  
  // app.record.detail.show：レコード詳細が表示された時
  // app.record.create.show：レコード追加画面または再利用画面が表示された時
  // app.record.edit.show：アプリのレコード編集画面が表示された時
  kintone.events.on(['app.record.detail.show', 
                     'app.record.create.show',
                     'app.record.edit.show',], 
    function(event) {

      console.log("Slack通知開始")

      const URL = 'https://slack.com/api/chat.postMessage';
      const CHANNEL_ID = 'チャンネルIDを記載';
      const SLACK_API_ID = 'xoxbから始まるAPI_IDを記載';

      // slack書込み情報設定
      var headers = {
        'Content-Type': 'application/json',
        "Authorization": "Bearer " + SLACK_API_ID
      };

      // レコード番号取得
      var record_id = event.record['レコード番号']['value'];

      var body = {
        'channel': CHANNEL_ID,
        'text': "【jsテスト】\nレコード番号「" + record_id + "」が修正されました\n※続きはスレッドにて",
        'as_user': true
      };

      // 新規投稿
      return kintone.proxy(URL, 'POST', headers, body).then(function(resp) {
        
        // タイムスタンプ取得
        let ts = JSON.parse(resp[0])
        ts = ts.ts
        
        // 返信内容作成
        body = {
          'channel': CHANNEL_ID,
          'text': "レコードが修正されましたので、ご確認をお願いします",
          'as_user': true,
          'thread_ts':ts
        };

        // 返信
        kintone.proxy(URL, 'POST', headers, body)

        console.log("Slack通知終了")
      }).catch(function(err) {

        console.log("slack通知エラー発生");
        console.log(err);

      });

    }

  );

})();

(function() {

'use strict';

// app.record.detail.show：レコード詳細が表示された時

// app.record.create.show：レコード追加画面または再利用画面が表示された時

// app.record.edit.show：アプリのレコード編集画面が表示された時

kintone.events.on(['app.record.detail.show',

'app.record.create.show',

'app.record.edit.show',],

function(event) {

console.log("Slack通知開始")

const URL = 'https://slack.com/api/chat.postMessage';

const CHANNEL_ID = 'チャンネルIDを記載';

const SLACK_API_ID = 'xoxbから始まるAPI_IDを記載';

// slack書込み情報設定

var headers = {

'Content-Type': 'application/json',

"Authorization": "Bearer " + SLACK_API_ID

};

// レコード番号取得

var record_id = event.record['レコード番号']['value'];

var body = {

'channel': CHANNEL_ID,

'text': "【jsテスト】\nレコード番号「" + record_id + "」が修正されました\n※続きはスレッドにて",

'as_user': true

};

// 新規投稿

return kintone.proxy(URL, 'POST', headers, body).then(function(resp) {

// タイムスタンプ取得

let ts = JSON.parse(resp[0])

ts = ts.ts

// 返信内容作成

body = {

'channel': CHANNEL_ID,

'text': "レコードが修正されましたので、ご確認をお願いします",

'as_user': true,

'thread_ts':ts

};

// 返信

kintone.proxy(URL, 'POST', headers, body)

console.log("Slack通知終了")

}).catch(function(err) {

console.log("slack通知エラー発生");

console.log(err);

});

}

);

})();

備忘録

・SlackAPIの情報がブラウザにて丸見えになるので、運用する際はプラグイン化して隠蔽が必要
※本コードを反映するkintoneアプリは社内ユーザーしか見ないので、隠蔽まで必要かは要検討

解決されたようで何よりです！
困ったときはお互い様で^ ^

私が言うのもおこがましいですが、初心者の域は脱していると思いますよ！

あ、補足ですが、SlackAPIがユーザーのブラウザから丸見えになるので、プラグイン化して隠蔽した方が良いかもです。
既に対応されてましたらご容赦ください。
— ももぶた×kintone×教育 (@momobuta2021) February 28, 2022

・コードの「const CHANNEL_ID = ‘チャンネルIDを記載’」にメンバーIDを記載すると、DMが届く
※Tolen Scopesに「im:write」が必要

・メンバーIDはSlackのプロフィールから取得可能
※ユーザー名からメンバーID取得、等は別のコードが必要

お礼

kintoneもJavaScriptも初心者(一ヶ月)の私には難題な調査でしたが…
~~(1回挫折して上長に「今の私のスキルでは難しいです」と報告してました←)~~

参考コードを頂けたおかげで、コード作成にこぎ着けました！
本当にありがとうございました┏○┓

Slackに投稿
kintone.proxy('https://t.co/bVHzdp0Peg', 'POST', headers, data)

スレッドに投稿
kintone.api(kintone.api.url('/k/v1/space/thread/comment.json', true), 'POST', body)

この2つを組み合わせて実現できますよ
— ももぶた×kintone×教育 (@momobuta2021) February 27, 2022