はじめに

先日、未来大×企業エンジニア夏の大LT大会というものが函館で開催されまして、その際にGoogleAppsScript(GAS)の便利さを誇示するためにSlackbotを作って紹介したところ、今までのLTで最も好評(個人的感想)だったので、SlackBotを実際にGASにデプロイしたときの手順を解説しようと思います。

ここではGASのコードの書き方というより、GASとSlackの設定をメインに解説します。

解説

トリガーはSlack投稿メッセージ

通常ですと、SlackはOAuth 2.0で認証して初めてAPI tokenを貰えますが、今回の方法ではSlack上でコマンド｢/hoge｣を送信することがトリガーになり、web公開したGASのURLへリクエストが届き、処理が行われます。

この場合、認証やtokenの取得処理不要でSlackの方からtokenをくれます。また、その後の処理も図のように、全てSlack側からリクエストが送られて、GASはそれに対してレスポンスを返すだけでいいので初心者でも簡単に作れます。

多分このあとの章にあるSlackの設定をしていけばなんとなくわかってくると思います。自分も設定してて仕組みがわかったので。

GAS側の設定やコーディング

GASのコーディング

GASの始め方やGAS的コーディングの基本はこちらを見るか( https://qiita.com/mecaota/items/1823f68f556500f4f7b0 )、こんなわかりにくいQiitaなんで「よくないね👎」だ！って方はテキトウにおググりください。簡単に説明すると、SlackからPOSTでリクエストが飛んでくるので、GASに投稿したいメッセージのJSONをreturnする関数doPOST(request)を書いてやります。

ウェブアプリケーションとして公開

完成したら、URLを発行しましょう。「メニュー」→「公開」→「ウェブアプリケーションとして導入」を開くから、下記画面が出たと思います。

GASのウェブアプリケーションはプロジェクトバージョンごとに公開できる為、一旦完成したものを弄ってたら壊れちゃった・・・ってなっても巻き戻せますし、編集中にリクエストが飛んできても公開されているバージョンが変更されない限り影響はありません。

バージョン管理の仕組みなので、SVNはわからないのでGitで例えますが、各プロジェクトバージョンがcommit、公開するバージョンがmasterブランチってとこでしょうか？

画像のように、プロジェクトバージョンの新規作成を行い、バージョンの説明文を入れます。次に、「次のユーザーとして実行」の部分が、スクリプトのオーナー権限があるアカウントに指定されているのを確認します。「アプリケーションにアクセスできるユーザー」は「全員」にしてください。Slackからのみ許可する・・・といった設定は今の所GASではできませんのでリクエストを返す処理を作る際は気をつけましょう。最後に「公開」をクリックします。すると、多分権限を求める画面に移るので、許可してください。しかしながら、オレオレアプリなのでグーグルから「おいおいおい、このアプリ使うとお前死ぬぞ」みたいなこと言われますが、無視して続行してください。無事ウェブアプリケーションとして公開されると、ダイアログに「現在のウェブアプリケーションのURL」と表示されます。その下のテキストボックス内のURLが発行されたURLです。

ちなみに一度でも公開すると、最新のコードでテストしたい場合も出てくると思います。そんな時は「最新のコード」を押すと、最新のコードで実行できるページにアクセスできます(ただ、権限絡みでうまくいかないとこも多いです・・・)

Slack側の設定

アプリの追加

botを追加したいワークスペースの自分のアカウントでログインし、https://api.slack.com/appsを開きます。

その後、「Create New App」をクリックし、App Nameとアプリを導入するワークスペースを決めてください。App Nameは自分で判別できる名前なら何でもOKです。

するとこんな画面に行き着くはずです。

Interactive Componentsの設定

まずは「Add features and functionality」の「Interactive Components」をクリックします。

次に「Interactivity」をOnにして、Request URLに先程発行したURLを貼り付けて、「Save Changes」を押して保存します。

保存したら前のページに戻ってください。

この設定で、ボタン付きのメッセージをこのアプリから送られてきて、そのボタンを押した時は設定したURLへリクエストが送られる様になりました。

Slash Commandsの設定

「Add features and functionality」の「Slash Commands」をクリックします。

「Command」には設定したいコマンド名を、Request URLには例に漏れず先程発行したURLを貼り付けましょう。

下のShort Descriptionはコマンドを投稿画面に入力したときに表示されるサジェストの説明文です。Preview画面があるので、どんなタイミングででる説明かわかると思いますので、いい感じに設定してください。

「Escape channels, users, and links sent to your app」とは、リクエストにチャンネル情報やらチャンネルのユーザー一覧を一緒に含めて送信するかというチェックボックスだと思います(間違ってたらごめんなさい)。私は特にチャンネル情報は必要なく、コマンドを打ったユーザーさえわかればよかったのでチェックを入れました。

入力したらセーブして、前の画面に戻りましょう。

この設定で、オリジナルコマンドを作成して、そのコマンドが指定したURL宛にリクエストが送られるようになりました。

Permissions

ここまで作業すると、「Add features and functionality」の「Permissions」にも緑のチェックマークが入るはずですので、Slackアプリ権限の設定もこれで大丈夫です。

Slack Appのインストール

「Install your app to your workspace」の「Install App to Workspace」を押して、次の画面で許可してください。これで自分のワークスペースにSlackアプリがインストールされました！

その他

他にも最初の画面である「Basic Information」の中に投稿されたときのレイアウト等を決められる設定項目等あるので、手探りでやってみてください。

完成

これでGASとSlackが繋がりました！ここまででGASのコードも完成させた人はそのままコマンドをSlackで送るとGASが走るはずです。まだ完成していない人はがんばりましょう。

Slash commands送信時とInteractive Messages(ボタン等のGUIパーツ付きメッセージ)のボタン等押下時とで送られてくるjsonが微妙に異なる上、Interactive MessagesをGASから送信する際にメッセージの種類を特定するユニークIDを指定できますので、そのあたりから条件分岐するコードを書くといい具合に動きます。

大変に汚いコードでも良ければ私のコードを参照ください。備品をスプレッドシートで管理できるというものです。ただ、もっときれいなコードで書けるはずなのであまり真似しないでね☆
https://github.com/fun-cyclingclub/bihin-manage-bot

参考

Qiita - Slackのコマンドを作ろう！！: https://qiita.com/t-mimura/items/d6541ec596bdebea5a7b
Qiita - Slack Interactive Messageリファレンス: https://qiita.com/hypermkt/items/b2ffaf610ac92235c4d6
Google Apps Script試行錯誤Blog - Slack BOTでMessage Buttonsを使う: http://www.pre-practice.net/2017/11/slack-botmessage-buttons.html
Slack - API-Slack API Documentation: https://api.slack.com/#read_the_docs
Github - bihin-manage-bot: https://github.com/fun-cyclingclub/bihin-manage-bot