SlackとGoogleAppsScript(GAS)を連携する手順・事例

18/04/24

本エントリーでは、Outgoing Webhooks、Slack APIを用いたSlack(スラック)とGAS(Google Apps Script)の連携方法・具体例についてお伝えします。

SlackとGASを連携するメリットとは

メリットは数多くあります。以下が例です。

Slackチャネルへの投稿内容をGASにPOSTし、Googleツール(Calender, Spreadsheetなど)や各種APIと簡単に連携できる
GASで処理した結果をSlackにレスポンスできる
GASは無料で利用できる
定期的に走らせたGASのプログラムの結果をSlackに投稿することができる(GASはcronのように定期的に、かつ指定した日時にプログラムを動かすことができます)

ざっと例を挙げましたが、Slack-GAS連携でできることの幅が広いことがお分かりになったかと思います。
具体的な事例として、GoogleAnalyticsと連携してバズっているページ(PVが高いページ)をリアルタイムで通知する、なんてことも可能です。

うまく使いこなすことができれば、業務の自動化・効率化・円滑化に大変役立つでしょう。

システムフロー

早速本題に入ります。
今回、作業をイメージしやすくする為、Slackに任意のメッセージを投稿すると、botが「成功」と返信するシステムを作成する方法を解説します。
システムフローは次の通りです。

画像からわかる通り、ざっくり切り分けると、
Slack⇨SlackAPI⇨GAS⇨SlackAPI⇨Slackという流れになります。

作業手順

では作業手順を紹介します。

【Slack】 GASと連携するSlackチャンネルの決定
【Slack】 Legacy Tokenの発行
【Slack】 Outgoing WebHooksの設定
【GAS】スクリプトを新規作成
【GAS】 SlackAppライブラリを追加
【GAS】スクリプトを実装
【GAS】スクリプトをウェブアプリケーションとして公開
【Slack】 Outgoing WebhooksにGASのエンドポイントを設定
連携完了

作業内容

次に作業内容を解説していきます。

【Slack】 GASと連携するSlackチャンネルの決定

GASと連携するSlackのチャンネルを決めます。
ここではチャンネル名を仮で”test”とします。

【Slack】 Legacy Tokenの発行

Legacy TokenはGASからSlackにメッセージを返信する為に必要です。
Legacy Tokenの発行は、こちらのページから行えます。

発行したTokenは後ほど使います。

参考サイト：
Slack公式ページ

【Slack】 Outgoing WebHooksの設定

Outgoing Webhooksとは

Outgoing Webhooksとは、Slackで投稿された文言を指定されたURLにPOSTできるだけでなく、Responseをチャネルに返信することもできるSlack APIのことです。

※今回紹介するケースでは、Outgoing Webhooksは投稿情報をGASのエンドポイントにPOSTすることのみを目的として利用します。BOTによるメッセージ返信は、SlackAppライブラリを利用して実装します。

参考サイト：
Slack公式ページ

Outgoing Webhooksの設定方法

1. https://your-team(チーム名).slack.com/apps/manage/custom-integrationsへアクセス
2. 検索窓からOutgoing Webhooksを探してクリック
3. 「Add Configuration」ボタンをクリック

1. 「Add Outgoing Webhooks integration」ボタンをクリック

1. Channelを設定(必須)
2. Trigger Wordsを設定(任意)
3. URL(s)はGASのスクリプトを公開次第記述。他項目はスキップ可
4. Tokenはスクリプトで必要になるのでメモしておく

「Save Settings」をクリックで設定完了

【GAS】スクリプトを新規作成

Google Driveにログインし、新規 > その他 > Google Apps Script でスクリプトを新しく作れます。

【GAS】 SlackAppライブラリを追加

SlackAppライブラリとは

SlackAppとはGASのライブラリのことです。SlackAPIを経由してSlackを操作することができます。
詳細はこちらをご覧ください。

SlackAppライブラリの設定方法

ファイルを一度保存したあと、メニュー(リソース) > ライブラリをクリックします。
プロジェクトキー「M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO」を入力 > 追加 > バージョンを最新に指定 > 保存

これでSlackAppライブラリが追加されます。

【GAS】スクリプトを実装

大まかなコードの流れとしては以下のような形になります。
Slackで投稿された内容をdoPost関数で値を受けとり、処理したあと、SlackAppライブラリでSlackにpostします。
下記がコード例です。参考にしてみてください。

// Legacy tokenをSLACK_TOKENに格納します。
var SLACK_TOKEN = "~~~~~~~~~~~~";
// Outgoing Webhooks設定画面で表示されるTokenをWEBHOOK_TOKENに格納します。
var WEBHOOK_TOKEN = "~~~~~~~~~~~~";

// doPost関数はエンドポイントにPOSTで届いた情報をキャッチする関数のことです(GASのデフォルト関数)
function doPost(e) { // eにはPOSTされた投稿情報が格納されています。
  // 注意：下記if文は無限ループを回避する為のものです。e.parameter.user_nameが"slackbot"以外の時のみ次の処理を行います。
  // outgoing webhooksの設定でトリガーを指定していない場合、slackAPPからslackに行う投稿(後述)もGASにPOSTされてしまいます。
  // その投稿情報のe.parameter.user_nameは必ず"slackbot"になります。その為、user_nameが"slackbot"じゃない時のみ処理します。
  // ※SlackAppでSlackに投稿する際、投稿するユーザー名を自由に決められる(後述)ので、parameter.user_nameも指定したユーザー名になるかと思いきや、必ず"slackbot"という値になリます。
  // トリガーを設定しない場合は必ず設定してください。
  if (e.parameter.user_name != "slackbot"){
    postMessage(e.parameter.token, e.parameter.channel_name, "成功");
  }
}

//Post massage(Slackに投稿する関数)
var postMessage = function(webhook_token,channel_name, text){
  // POSTされたwebhook_tokenと、設定したOutgoing Webhooksのwebhook_tokenを照合し、異なる場合はエラーを通知します。
  // GASのendpointを知られてしまい、勝手にGASにPOSTされた場合への対処です。
  if (WEBHOOK_TOKEN != webhook_token) {
    throw new Error("invalid token."); //エラーを通知します
  }
  // PropertiesService：https://developers.google.com/apps-script/reference/properties/
  PropertiesService.getScriptProperties().setProperty("token", SLACK_TOKEN);
  var prop =  PropertiesService.getScriptProperties().getProperties();
  // slackAppライブラリを利用してslackに投稿
  var slackApp = SlackApp.create(prop.token);
  slackApp.postMessage("#"+channel_name, text, {
    username : "~~~BOT", // 任意の名前を入力します
    icon_url : "http://~~~~~~~"
  });
  return null;
}

// Legacy tokenをSLACK_TOKENに格納します。

var SLACK_TOKEN = "~~~~~~~~~~~~";

// Outgoing Webhooks設定画面で表示されるTokenをWEBHOOK_TOKENに格納します。

var WEBHOOK_TOKEN = "~~~~~~~~~~~~";

// doPost関数はエンドポイントにPOSTで届いた情報をキャッチする関数のことです(GASのデフォルト関数)

function doPost(e) { // eにはPOSTされた投稿情報が格納されています。

// 注意：下記if文は無限ループを回避する為のものです。e.parameter.user_nameが"slackbot"以外の時のみ次の処理を行います。

// outgoing webhooksの設定でトリガーを指定していない場合、slackAPPからslackに行う投稿(後述)もGASにPOSTされてしまいます。

// その投稿情報のe.parameter.user_nameは必ず"slackbot"になります。その為、user_nameが"slackbot"じゃない時のみ処理します。

// ※SlackAppでSlackに投稿する際、投稿するユーザー名を自由に決められる(後述)ので、parameter.user_nameも指定したユーザー名になるかと思いきや、必ず"slackbot"という値になリます。

// トリガーを設定しない場合は必ず設定してください。

if (e.parameter.user_name != "slackbot"){

postMessage(e.parameter.token, e.parameter.channel_name, "成功");

}

//Post massage(Slackに投稿する関数)

var postMessage = function(webhook_token,channel_name, text){

// POSTされたwebhook_tokenと、設定したOutgoing Webhooksのwebhook_tokenを照合し、異なる場合はエラーを通知します。

// GASのendpointを知られてしまい、勝手にGASにPOSTされた場合への対処です。

if (WEBHOOK_TOKEN != webhook_token) {

throw new Error("invalid token."); //エラーを通知します

}

// PropertiesService：https://developers.google.com/apps-script/reference/properties/

PropertiesService.getScriptProperties().setProperty("token", SLACK_TOKEN);

var prop = PropertiesService.getScriptProperties().getProperties();

// slackAppライブラリを利用してslackに投稿

var slackApp = SlackApp.create(prop.token);

slackApp.postMessage("#"+channel_name, text, {

username : "~~~BOT", // 任意の名前を入力します

icon_url : "http://~~~~~~~"

});

return null;

}

【GAS】スクリプトをウェブアプリケーションとして導入

GASのスクリプトを書いても、まだSlackとGASは連携できていません。
お気付きの方もいるかもしれませんが、Outgoing WebhooksにGASのエンドポイントを指定していない為です。
endpointを発行する為には、スクリプトをウェブアプリケーションとして公開する必要があります。
公開手順は次の通りです。

1. スクリプトを保存
2. メニュー(ファイル)
3. 版を管理

1. 新しいバージョンを保存

1. メニュー(公開)
2. ウェブアプリケーションとして導入

1. プロジェクトバージョンを「新規作成」

▼プロジェクトバージョンを更新する場合
まず「版を管理」から「新しいバージョンを保存」を押します。その後、プロジェクトバージョンを最新のバージョンにすればOKです。

1. 次のユーザーとしてアプリケーションを実行「自分」
2. アプリケーションにアクセスできるユーザー「全員(匿名ユーザーを含む)」

▼注意点
Googleアカウントが組織アカウントの場合、共有範囲が制限されていることがあります。
その場合、「アプリケーションにアクセスできるユーザー」を「全員(匿名ユーザーを含む)」に設定することはできません。個人アカウントを利用して進めてください。

導入
許可を確認 > 許可
現在のウェブアプリケーションのURLがエンドポイント

なお、スクリプトを上書き保存してもウェブアプリケーションには反映はされません。
すなわち、この段階では上書き保存したスクリプトと、slack投稿で実行されることになるスクリプトの内容は異なります。

ウェブアプリケーションを更新するには、下記の手順を踏みます。
版を管理 > 新しいバージョンを保存 > メニュー(公開) > ウェブアプリケーションとして導入 > プロジェクトバージョンを最新にする > 更新

【Slack】 Outgoing WebhooksにGASのエンドポイントを設定

エンドポイントがわかったので、それをOutgoing Webhooksに設定していきます。
Outgoing Webhooks設定画面を開き、URL(s)にエンドポイントを記載します。
複数のエンドポイントがある場合は、改行区切りで記述します。

連携完了

お疲れ様です。
以上で、Slack – GoogleAppsScriptの連携は完了です。

無限ループしてしまった際の対処方法

あまり起こらないでほしいですが、処理が無限ループしてしまう時もあるかもしれません。
その場合の、対処方法をお伝えします。

お分かりの方もいらっしゃるかもしれませんが、無限ループの原因となるコードを修正・削除し、公開しているウェブアプリケーションを更新すれば直ります。

具体的には下記の手順を踏みます。
該当するコードを修正or削除 > 版を管理 > 新しいバージョンを保存 > ウェブアプリケーションを導入 > プロジェクトバージョンを最新版に設定 > 更新

なお、無限ループの原因となるコードがわからない場合、全コードをコピーした上で削除し、ウェブアプリケーションを更新してもよいでしょう。

まとめ

無事連携できましたでしょうか。
初めはすんなりと設定しづらいかもしれませんが、いくつかこなせばすぐに慣れるかと思います！
本記事が皆様の一助となれば幸いです。

近いうちにGASとSpreadSheetを連携する方法も書きたいと思います！

お知らせ

エンジニア募集

現在、TABI LABOではエンジニアを募集しています！
自分で手を挙げて企画し、開発できる環境です。
少しでも興味がございましたら、採用ページもご覧頂ければ幸いです。