Slack用の妹(Elona)botを作ったお話 – 技術編
- 2019.02.09
- 技術情報
- bot, Elona, Google Apps Script, Slack

イントロダクション
昨年12月に妹(Elona)botの機能などを紹介をしました。
Slack用の妹(Elona)botを作ったお話 | n++
今回は妹botの裏側である、技術面のお話を記事にしようと思います。
使用言語など
- Google Apps Script (GAS)
- Google スプレッドシート
使用言語はGASです、APIサーバーとして代用しています。
スプレッドシートはDB代わりに使用しています。(微妙に遅い)
最初はGoogle Fusion Tablesというサービスを使っていたのですが、2019年12月3月で終了するとのこと。。知らせがGoogleからメールで届いてからスプレッドシートに処理を置き換えたのでした。
G Suite アップデート ブログ: Google Fusion Tables のご提供終了のお知らせ(2019 年 12 月 3 日を予定)
あとGoogleさんお手製CLIツールのclaspを使用しました。普段使っているエディタでコードが書ける上にソースをgit管理できますし、GASのコード書きたいならclasp使うのがベストだなーと思いました!
GAS のGoogle謹製CLIツール clasp – Qiita
この記事が参考になると思います。
Google Apps Script側の設定
ウェブアプリケーションとして導入
この作業をすることでGETやPOSTのリクエストを受け付けることが出来るようになります。
メニューバーの”公開”から”ウェブアプリケーションとして導入”をクリックします。プロジェクトバージョンを指定して”更新”ボタンをクリックすればウェブアプリケーションの作成完了です。
“現在のウェブ アプリケーションの URL” がAPIエンドポイントです、Slack側の設定でも必要になります。
GET・POSTリクエストの受付
doGet() doPost() という名前で関数を作成すると、その中でリクエストを受け付けることが出来るようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /** * GETリクエストの受付け */ function doGet() { console.info('--- doGet Start ---'); // ココに処理 console.info('--- doGet Finished ---'); return response; } /** * POSTリクエストの受付け * @param e */ function doPost(e) { console.info('--- doPost Start ---'); var timer = new Timer(); // ココに処理 console.info('--- doPost Finished: ' + timer.rap() + " sec ---"); return response; } |
こんな感じで関数を作成すればリクエストを受け付けられます。今回はやってないんですけど、 doGet() から動的なhtmlをレスポンスすることで、スプレッドシートの内容をhtmlで出力するということも可能です。
妹botではSlackとの通信だけなので、すべて doPost() の中で処理してます。
Timerクラス
上記19行目のTimerクラスは自作したものです。妹botには直接関係はないですが、一応コードを載せておきますヾ(:3ノシヾ)ノシ
1 2 3 4 5 6 7 8 9 10 11 12 | function Timer() { this.start(); }; Timer.prototype = { start: function() { this._timer = new Date(); }, rap: function() { return ((new Date()) - this._timer) / 1000; } }; |
デバッグ方法
GAS単体で実行できる場合は
1 | Logger.log('foobarbaz'); |
このようにすれば ⌘ + Enter でログが確認できるのですが、 doPost() の場合は非同期で動作する為この方法は使えません。
こういう時は以下のように記述することで、GCPのStackdriver Loggingにログを出力することが出来ます。
1 | console.log('foobarbaz'); |
ログを確認する際は、”表示”から”Stackdriver Logging”を選択しましょう。
Slack側の設定
まずSlack側にアプリケーションを作成する必要があります。アプリケーションの作成も設定も以下のページから行えます。
Slack API: Applications | Slack
Bot Users
Botユーザーを追加することで、APIサーバーからのメッセージ投稿が可能になります。
Bot User → Add Bot User してから
OAuth & Permissions → Install App to Workspace とすると、Bot User OAuth Access Token が発行されます。このトークンを使えばインストールしたワークスペースにメッセージを送信することが出来ます。
以下はGASで記述した例です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function postMessage() { var params = { "method": "post", "headers": { "Authorization": 'Bearer ' + "xoxb-***************", // ココにご自身のBotトークンを入力 "Content-Type": "application/json" }, "payload": JSON.stringify({ channel: '@nplusplus', text: "test" }) } UrlFetchApp.fetch('<a style="cursor: help; display: inline !important;" href="https://slack.com/api/chat.postMessage" target="_blank" rel="noopener noreferrer">https://slack.com/api/chat.postMessage</a>', params); } |
これを実行すると…
簡単ですね!
Slash Commands
スラッシュコマンドはその名の通り / で始まるコマンドです。Slack標準でも用意されてますよね! /activeとか /call等がこれに当たります。ユーザーが入力すると、APIサーバーへリクエストが飛ぶようになっています。
設定画面はこのような感じです。
Command | 実際に使用する時に入力するスラッシュコマンド |
Request URL | コマンドが入力された時にSlackからリクエストするAPIのURL (GASのURLになります) |
Short Description | コマンドの説明 |
Usage Hint | コマンド使用のヒント |
入力していくと、Preview of Autocomplete Entryの欄にSlackで表示されるプレビューが表示されるのでわかりやすいです!
Event Subscriptions
Event Subscriptionsを設定すると、ユーザーが普通に送信したメッセージなどをAPIサーバーで受信することができるようになります。
APIサーバーでEventを受け取るには、まずAPIサーバーの検証が必要です。最初やった時ここで結構な時間詰まりました(
設定画面の Request URL にイベントを受信するAPIのURLを設定します、設定するとすぐに検証が開始されます。
検証の内容は、リクエストに含まれるchallengeキーの値をレスポンスする。という内容です。JSONでリクエストが送られてくるので、そのまま返送してやれば問題なく検証済みとなります。
1 2 3 4 5 6 | function doPost(e) { var body = JSON.stringify(e.postData.getDataAsString()); var mime_type = ContentService.MimeType.JSON; return ContentService.createTextOutput(body).setMimeType(mime_type); } |
GASで書くとこんな感じです。
検証が終わったら購読するイベントを必要なものを選択して設定します。妹botでは以下のように設定しています。
OAuth & Permissions
最後に権限を追加していきます。ここで、作ったアプリケーションがワークスペースに対して出来ることを設定します。
妹botではこのように設定しています。
分かりにくいのですがゴミ箱のマークが薄いものがあります、これは上記の他の設定によって自動的に追加されたパーミッションです。これらについてはこの画面からは削除できないようになっています。
まとめ
書いていてどこまで紹介すれば良いのかわからなくなって来たので、今回はこのあたりで…
GASとSlack APIを使えば簡単にBot作成できますので、是非やってみてください!
- 前の記事
新年早々Vue.jsでビンゴマシンっぽいものを作りました 2019.01.08
- 次の記事
VSCodeでBladeテンプレートを整形する 2019.05.09