LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2020年8月22日土曜日

Slackの特定Channelへの投稿をSlack Appでキャッチしたい


MISSION
Slackの特定channelへの投稿をSlack Appでキャッチする


BEFORE
Outgoing Webhookでは簡単にできた。
(Slack Appが推奨されている)cf. Outgoing Webhooks


AFTER 
Slack Appで実現する。


PROCESS
Slack Appを新規作成
Request URL用にWebアプリを作成
Subscribe to bot events を設定
Workspaceにインストール
Channelにインストール


STEPS 

STEP1
① 左上にあるワークスペースのメニューを開きます。
② Settings & administration をクリックします。
③ Customize ワークスペース名 をクリックします。


STEP2
Configure apps をクリックします。


STEP3
Build をクリックします。


STEP4
Create New App をクリックします。


STEP5
  • App Name を決めます
  • Development Slack Workspaceを決めます
  • Create Appをクリックします


STEP6
Event Subscriptions をクリックします。


STEP7
Off をクリックして On にします。 

Google Apps ScriptでRequest URLに入れるWebアプリを作ります。



STEP18
STEP7の Request にGoogle Apps Scriptで作ったWebアプリのURLを貼り付けます。

するとこのようなエラーが出ると思います。
(params.challenge がうまく返せていない)


STEP19
エラーを回避するために
Google Apps Scriptのコードで5行目から8行目を//でコメントアウトします。


STEP20
公開 > ウェブアプリケーションとして導入 を選択します。


STEP21
Project Version を New にして、更新 します。


STEP22
Slackに戻って Retry をクリックします。

すると今度は エラーが消えて Verified になります。


STEP23
STEP19でコメントアウトした5行目から8行目を元に戻します。
(Verified後は11, 12行目をコメントアウトしても動くようです)


STEP24
STEP20〜21と同じくバージョンを更新します。
(修正したコードを反映する際にはバージョンの更新が必要なので忘れずに)


STEP25
Add Bot User Event をクリックします。


STEP26
message.channels を検索して選択します。


STEP27
右下の Save Changes を選択します。


STEP28
① 左のメニューから Basic Information をクリックします。
② Install your app to your workspace をクリックします。
③ Install App to Workspace をクリックします。


STEP29
Allow をクリックします。


STEP30
① Slackで対象Channelの Details を開きます。
② More をクリックします。
③ Add apps をクリックします。


STEP31
① 作成したアプリを検索します。
② 作成したアプリの右端の Add をクリックします。


Channelにアプリが追加されます。


STEP32
メッセージを投稿すると、Googleドライブの指定したフォルダにファイルが作成されます。

あとはWebアプリ側のコードを好きなように書き換えて処理を追加します。

これでOutgoing Webhookを使わずにSlack Appで代替することができました。





STEP8〜17までの手順

Google Apps ScriptでRequest URLに入れるWebアプリを作る



STEP8
Slack App からのメッセージを受け取るWebアプリを作ります。
このブログではGoogle Apps Scriptで作るため、新規プロジェクトを作成します。
このリンクから作成できます↓


STEP9
コード.gsをコピーして、1行目から貼り付けて上書きします。
(プロジェクト名は任意で変更します)



コード.gs 
/************************************
Slack Appからデータを受け取る
************************************/
function doPost(eventObj) {
  create_file(JSON.stringify(eventObj, null, 2));// eventObjの中身をGoogleドライブに出力する
  
  const contents = eventObj.postData.contents;
  create_file(contents);// eventObjのpostDataのcontents中身をGoogleドライブに出力する

  //https://api.slack.com/events/url_verificationの対応で、challengeを返してやる
  var params = JSON.parse(eventObj.postData.getDataAsString());
  return ContentService.createTextOutput(params.challenge);
}

/************************************
Googleドライブの指定フォルダにJSONファイルを保存する
************************************/
function create_file(json) {
  const content_type = "application/json";
  const file_name = "Slack Message";// Googleドライブに出力するファイルの名前
  const blob = Utilities.newBlob("", content_type, file_name);
  const file = blob.setDataFromString(json, "UTF-8");
  const folder = DriveApp.getFolderById("FOLDER_ID");// 出力したいGoogleドライブのフォルダID
  folder.createFile(file);
}




STEP10
公開 > ウェブアプリケーションとして導入 を選択します。


STEP11
① Deployするバージョンに任意でメッセージを入れる
② このWebアプリを実行するユーザーは自身のアカウントにする
③ Slack AppもこのWebアプリへアクセスできるように Anyone, even anonymous にする


STEP12
許可を確認 をクリックします。


STEP13
自身のアカウントを選択します。


STEP14
詳細 をクリックします。


STEP15
Slack Test App(安全ではないページ)に移動 をクリックします。


STEP16
許可 をクリックします。

STEP17
Current web app URL をコピーします。




関連記事



参考 


Start building Slack apps

最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...