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

このようにすれば ⌘ + 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('<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で表示されるプレビューが表示されるのでわかりやすいです！