(BluePrism)ポケモン図鑑を作る ～Part11 Slackから受信する仕組みの概要編～

はい。おむおむです。
きゅうりとみょうがを塩と味の素で和えたやつ、
非常に美味しいです。夏です。

さて、前回でプロセスを完成させました。
newgraduate19-rpa.hatenablog.com
以降は、SlackのAPIとGASを連携させて
Webサービスとして公開されたプロセスを
起動するための仕組みを作ろうと思います☆
(多分3回ぐらいに分かれる予感。。。)

そして、しばらくBlue Prismはほぼ出てきません(m´・ω・｀)m ｺﾞﾒﾝ…

仕様のおさらい

さて、今回のポケモン図鑑の仕組みをおさらいしましょう。

詳細は、Part1で説明いたしました。
newgraduate19-rpa.hatenablog.com

今回からは、この図の中のGASとSlackの部分を
少しずつ作っていきます。

さて、今回の仕様として、
Slackのパブリックチャンネル「ポケモン図鑑」内で、
Botアプリケーションの「pokedex」に対して
ポケモンの名前をメンションすることをトリガーとして
前回までに作成したプロセスを起動する、ということとします。
(例：「@pokedex ピカチュウ」的な感じ)

これの実現には、Slackの
Event APIを使用する必要がありそうです。
早速見てみましょう！

Event APIの作成

まず、Slackのbot管理画面を開きます。
api.slack.com
次に、Basic InformationのEvent Subscriptionsをクリックします。


そこで表示されるEnable EventsをOnにすると、
Request URLの入力欄が表示されます。


注釈を読むと、どうやらRedirect URLに値を入れた瞬間、
そこにHTTPでchallengeというテスト値がPOSTされるとのこと。
そこでchallengeの値が返されたら、有効なURLと認められるとのこと。

いきなり壁が立ちはだかった感( ﾟДﾟ)

ということで、GASでこのchallengeの値を返すような仕組みを作り、
今回のゴールとしたいと思います。

GASを書く準備

まずは、今回の応答用に使用するGASを記述するため、
スプレッドシートを新規作成します。

作成したら、ツールタブのスクリプトエディタをクリックして
GASを記述する画面、スクリプトエディタを開きます。


次に、任意のプロジェクト名を設定します。
今回は、pokedexとします。


これで準備完了。早速書いていきましょう！

doPOST関数

まず、というかいきなり発展形なのですが、
POSTを受け取ったことをトリガーとして
スクリプトを起動させたいと思います。


そのためには、関数にdoPostを指定してあげます。
この関数を使うことで、このスプレッドシートに対して
POSTが送られた際に、それをトリガーとして起動し、
しかもPOSTされたパラメータもスクリプト内で使用できるのです！

ということで、関数の宣言のところで

Function doPost(e) {
}

とします。

届くデータと返すデータの内容

今回、Slack APIからPOSTされてくるデータは以下の通り。

{
    "token": "(トークン)",
    "challenge": "(文字列)",
    "type": "url_verification"
}

ちなみにこのページを参照しています。
api.slack.com
こいつを受け取ったら、
いくつかのフォーマットのうちのいずれかで
challengeの値を返してあげればよいのですが、
今回は以下の形式で返したいと思います。

HTTP 200 OK
Content-type: text/plain
(challengeの値)

書いてみよう

POSTされてきたデータは、GASで

e.parameter

とすることで参照することができます。

試しに、以下のようなスクリプトで
A1セル(厳密にはアクティブセル)に
送信されてきたデータを転記したいと思います。
記述するスクリプトはこんな感じ↓

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSheet();
  const cell = sheet.getActiveCell();
  cell.setValue(e.parameter)
}

ちなみに、更新する際は
バージョンを必ず「New」としてください。
(なんかこの辺はいろんな記事で書いてあるのでググってくれ。。。)

そしてCURLからPOSTしてみましょう！

>CURL -X POST -d "no=1, name=hoge" <GASで表示されたURL>

すると、A1セルにこんな感じで値が入ります。

JSON形式のデータをパースする

ただ、上記の方法だと
JSON形式で受信したデータ
＝オブジェクトを上手く取得できません。

ではどうするかというと、
こんな感じで記述します。

JSON.parse(e.postData.getDataAsString());

これは、POSTされてきたデータを
文字列として取得した後、
JSONとしてパースするという処理を表しています。

詳細は公式ドキュメントにて↓
developers.google.com

Slackにchallengeを返す

ここまで来たらあとはもう少し！
Slackの検証用の値challengeを返す処理を実装します。

返り値を設定する際は、
以下のように記述します。

return ContentService.createTextOutput(返したい値);

詳細についてはこちらをチェック↓
developers.google.com
以上を踏まえると、
今回返したい値は以下の通りになります！

function doPost(e) {
  var params = JSON.parse(e.postData.getDataAsString());
  return ContentService.createTextOutput(params.challenge);
}

これを書いて、SlackのEvent APIの
URL入力欄にこいつのURLを入力すると。。。

Verified!
やったね☆

まとめ

・GAS、奥が深い！
・明日はきゅうりとみょうがを塩昆布とごま油で和えよう
・缶のハイボールってめちゃくちゃ酔いが回る。。。

このシリーズ飽きてきた？
俺は飽きてきた☆