フォームブリッジ回答時にslack連投通知(formbridge×JavaScript)

ゆーしゃん
2022.10.23
350 views

概要

下記「kintoneのレコード保存時にslack連投通知」処理を
formbridge版のコードに修正

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

slack通知例

1通目：基本的な情報
(※青枠のslack通知1通目)

2通目：詳細な情報
(※上記1通目に返信する形で、赤枠のslack通知)

formbridge(フォームブリッジ)とは？

**※「このwebフォームからご回答ください」だけで済み、kintoneの説明が不要なのが大きなメリット**

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

「kintoneでのslack連投通知を、フォームブリッジにも流用して欲しいのですが出来ますか？」
と依頼を頂いた為。

ソースコード

(function() {
	"use strict";
	// 共有定数
	// 投稿したいチャンネル「●●●」のID
	// 例)：https://hogehoge.slack.com/archives/●●●
	const MAIN_CHANNEL_ID = "チャンネルのID"	
	//SlackアプリのBotのAPIトークン
	const SLACK_TOKEN = 'xoxbから始まるbotトークン';
	// slackチャンネルに通知するAPI
	// 参考：https://api.slack.com/methods/chat.postMessage
	const SLACK_API_URL = "https://slack.com/api/chat.postMessage"
	// フォームブリッジ回答完了時
    fb.events.finish.mounted   = [function (state) {
		// レコード情報
		const record = state.record;
		// 日付フォーマット変更
		let deadline_day = new Date(record.納期希望日.value);
		deadline_day= moment(deadline_day).format('YYYY-MM-DD');
		
		// レコード番号：リンク作成
		let kintone_Url = "■対象kintone："+ "　*<" + record.__kintoneBridgeRecordUrl__1.value + "|リンク>*　" 
		// 1通目の基本メッセージ
		const FIRST_MSG = "\n" + "<!channel>" + 
							"\n" + "*【" + record.実装アプリ名.value + "：" + record.依頼種別.value + "依頼のお知らせ】*" +								
							"\n" + kintone_Url + 
							"\n" +
							"\n" + "■社員番号：" + record.社員番号.value + 
							"\n" + "■社員名：" + record.社員名.value +							
							"\n" + "■納期希望日：" + deadline_day + 
							"\n" + "■実装アプリ名：" + record.実装アプリ名.value +							
							"\n" + "■依頼種別：" + record.依頼種別.value +							
							"\n" + 
							"\n" + "※詳細はスレッドにて"
		// 2通目の詳細メッセージ
		const SECONDE_MSG = "\n" + "■依頼内容：" + 
							"\n" + record.依頼内容.value +
							"\n" +
							"\n" + "■その他_備考：" + 
							"\n" + record.その他_備考.value
		// slack通知
		thread_post_slack(MAIN_CHANNEL_ID, FIRST_MSG, SECONDE_MSG)
		// 処理終了
		return state; 
	}];
	// 概要：Slack通知
	function thread_post_slack(channel_id, first_msg, second_msg = ""){
		// 通知文章をエンコード
		first_msg = encodeURIComponent(first_msg)
		// slackbot情報設定
		let payload = {
			token: SLACK_TOKEN
		};
		// formDataの組み立て
		let formData = new FormData();
		for(let key in payload){
			formData.append(key, payload[key]);
		}
		// SlackAPIのメソッド
		let slack_post_url = SLACK_API_URL + 
							"?channel=" + channel_id + 
							"&text=" + first_msg + 
							"&pretty=1"; 
		// 1回目のslack通知
		fetch(slack_post_url + '?token=' + SLACK_TOKEN, {
			method: 'POST',
			body: formData,
		
		}).then((response)=>{
			return response.json();
		
		}).then((data)=>{
			// slack通知が成功した場合
			if (data.ok){
				// 連投用の2通目文章が指定されている場合
				if(second_msg != ""){
					
					// 通知文章をエンコード
					second_msg = encodeURIComponent(second_msg)
					// 1回目の投稿先タイムスタンプを取得
					let thread_ts = data["ts"]
					// slackbot情報にタイムスタンプを設定
					payload = {
						token: SLACK_TOKEN,
						"thread_ts": thread_ts
					};
					// formDataの組み立て
					formData = new FormData();
					for(let key in payload){
						formData.append(key, payload[key]);
					}
					// SlackAPIのメソッド
					slack_post_url = SLACK_API_URL + 
									"?channel=" + channel_id + 
									"&text=" + second_msg + 
									"&pretty=1"; 
					
					// 2回目のslack通知(連投)
					fetch(slack_post_url + '?token=' + SLACK_TOKEN, {
						method: 'POST',
						body: formData,
					})
				}
			
			}else{
				console.log("SLACK への投稿が失敗しました:" + data.error);
			}
		}).catch((data)=>{
			console.error(data);
			console.log('error:' + data);
		});
	}
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

(function() {

"use strict";

// 共有定数

// 投稿したいチャンネル「●●●」のID

// 例)：https://hogehoge.slack.com/archives/●●●

const MAIN_CHANNEL_ID = "チャンネルのID"

//SlackアプリのBotのAPIトークン

const SLACK_TOKEN = 'xoxbから始まるbotトークン';

// slackチャンネルに通知するAPI

// 参考：https://api.slack.com/methods/chat.postMessage

const SLACK_API_URL = "https://slack.com/api/chat.postMessage"

// フォームブリッジ回答完了時

fb.events.finish.mounted = [function (state) {

// レコード情報

const record = state.record;

// 日付フォーマット変更

let deadline_day = new Date(record.納期希望日.value);

deadline_day= moment(deadline_day).format('YYYY-MM-DD');

// レコード番号：リンク作成

let kintone_Url = "■対象kintone："+ "　*<" + record.__kintoneBridgeRecordUrl__1.value + "|リンク>*　"

// 1通目の基本メッセージ

const FIRST_MSG = "\n" + "<!channel>" +

"\n" + "*【" + record.実装アプリ名.value + "：" + record.依頼種別.value + "依頼のお知らせ】*" +

"\n" + kintone_Url +

"\n" +

"\n" + "■社員番号：" + record.社員番号.value +

"\n" + "■社員名：" + record.社員名.value +

"\n" + "■納期希望日：" + deadline_day +

"\n" + "■実装アプリ名：" + record.実装アプリ名.value +

"\n" + "■依頼種別：" + record.依頼種別.value +

"\n" +

"\n" + "※詳細はスレッドにて"

// 2通目の詳細メッセージ

const SECONDE_MSG = "\n" + "■依頼内容：" +

"\n" + record.依頼内容.value +

"\n" +

"\n" + "■その他_備考：" +

"\n" + record.その他_備考.value

// slack通知

thread_post_slack(MAIN_CHANNEL_ID, FIRST_MSG, SECONDE_MSG)

// 処理終了

return state;

}];

// 概要：Slack通知

function thread_post_slack(channel_id, first_msg, second_msg = ""){

// 通知文章をエンコード

first_msg = encodeURIComponent(first_msg)

// slackbot情報設定

let payload = {

token: SLACK_TOKEN

};

// formDataの組み立て

let formData = new FormData();

for(let key in payload){

formData.append(key, payload[key]);

}

// SlackAPIのメソッド

let slack_post_url = SLACK_API_URL +

"?channel=" + channel_id +

"&text=" + first_msg +

"&pretty=1";

// 1回目のslack通知

fetch(slack_post_url + '?token=' + SLACK_TOKEN, {

method: 'POST',

body: formData,

}).then((response)=>{

return response.json();

}).then((data)=>{

// slack通知が成功した場合

if (data.ok){

// 連投用の2通目文章が指定されている場合

if(second_msg != ""){

// 通知文章をエンコード

second_msg = encodeURIComponent(second_msg)

// 1回目の投稿先タイムスタンプを取得

let thread_ts = data["ts"]

// slackbot情報にタイムスタンプを設定

payload = {

token: SLACK_TOKEN,

"thread_ts": thread_ts

};

// formDataの組み立て

formData = new FormData();

for(let key in payload){

formData.append(key, payload[key]);

}

// SlackAPIのメソッド

slack_post_url = SLACK_API_URL +

"?channel=" + channel_id +

"&text=" + second_msg +

"&pretty=1";

// 2回目のslack通知(連投)

fetch(slack_post_url + '?token=' + SLACK_TOKEN, {

method: 'POST',

body: formData,

})

}

}else{

console.log("SLACK への投稿が失敗しました:" + data.error);

}

}).catch((data)=>{

console.error(data);

console.log('error:' + data);

});

}

})();

感想

外部API実行の方法が下記のように異なっていた為、実装に苦労しました

kintone：「kintone.proxy()」
formbridge：「fetch()」

私が「fetch」関数の使い方をあまり理解していない為、
「最低限、依頼通りの処理は実装した」程度のコードになっているのが残念なポイントです。

「1通目を送信して2通目に返信」と決め打ちしている為、
3通目、4通目と返信が出来るコードになっていない…等、汎用性が無い

いつかリベンジしたいです

編集履歴

2022/10/23　新規作成

JavaScript
api, FB, FormBridge, js, kintone, postMessage, slack, フォームブリッジ, 返信, 通知, 連投, 連続

フォームブリッジ回答時にslack連投通知(formbridge×JavaScript)

目次

概要

slack通知例

formbridge(フォームブリッジ)とは？

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

ソースコード

感想

編集履歴

関連記事一覧

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

kintoneレコード保存時、複数人にslack_DM送信(kintone...

チェックボックス選択肢に基くフィールド活性/非活性/...

kintone×js　vscodeデバッグ環境構築(JavaScript)

フォームブリッジでのフィールド入力値制御(formbridge...

YouTube動画/音声のダウンロード(Python)

Slack_タスク管理bot(Python)

【Twitter_bot】検索ワードでの「いいね」昇順ツイート(Python)

CSV分割マクロ(ExcelVBA)

チェックボックス選択肢に基くフィールド活性/非活性/必須化(kintone×JavaScript)

kintoneレコードをスプレッドシートに転記(GAS)

【Twitter_bot】検索ワードでの「いいね」昇順ツイート(Python)

エラー値チェック(ExcelVBA)

スプレッドシートからGmail下書き作成(GAS)

フォームブリッジ回答時にslack連投通知(formbridge×JavaScript)

目次

概要

slack通知例

formbridge(フォームブリッジ)とは？

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

ソースコード

感想

編集履歴

関連記事一覧

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

kintoneレコード保存時、複数人にslack_DM送信(kintone...

チェックボックス選択肢に基くフィールド活性/非活性/...

kintone×js vscodeデバッグ環境構築(JavaScript)

フォームブリッジでのフィールド入力値制御(formbridge...

kintone×js　vscodeデバッグ環境構築(JavaScript)