Slack用の妹(Elona)botを作ったお話 – 技術編

イントロダクション

昨年12月に妹(Elona)botの機能などを紹介をしました。

今回は妹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() という名前で関数を作成すると、その中でリクエストを受け付けることが出来るようになります。

/**

* 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ﾉｼヾ)ﾉｼ

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');<br>

このようにすれば ⌘ + 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で記述した例です。

function postMessage() {

var params = {

"method": "post",

"headers": {

"Authorization": 'Bearer ' + "xoxb-***************", // ココにご自身のBotトークンを入力

"Content-Type": "application/json"

"payload": JSON.stringify({

channel: '@nplusplus',

text: "test"

})

}

UrlFetchApp.fetch('https://slack.com/api/chat.postMessage', 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でリクエストが送られてくるので、そのまま返送してやれば問題なく検証済みとなります。

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