てくてくテック

【雑学】SlackとGASで自由度の高いSlackのチャットBotを作る

takapon

どーも！

たかぽんです！

今回はSlackで自由度の高いBotを作っていこうと思います！

というのも、前回...以下の記事で解説したBotですが、思ったより自由度は低かったためです...orz

【雑学】Slackのデフォルト機能でWorkSpaceにチャットボット（SlackBot)を作成する
2021.2.11
どーも！ たかぽんです！ 今回はSlackでWorkSpaceに対して、何かしらのメッセージが入力されたら、それに対して自動で返信をする... といったチャットボットを作成してみよ...

今回は上記とは違い、一部プログラムを書く必要はありますが、自由度の高いチャットボットを作ってみようと思います！

いったん、誰かの投稿をそのまま真似して返答するBotをゴールにして作っていきます。

最後におまけとして、返信内容の判断によるQAの例、ランダム抽選機能を持たせる...等は試していますので、是非参考にしてみてください。

SlackとGASで自由度の高いSlackBotを作る

さて、それでは詳細をみていく前に...

おおまかな手順としては以下になります。

といった形です。

返信する内容はいったん、ユーザーの発言をコピーするだけにしておこうと思います。

これが完成後、取得したメッセージ内容から任意の値を返信に設定していただければと...!

イメージとしては、以下です。

SlackのAppで特定イベント発生時（チャンネルへの投稿やリアクション等）にGASへメッセージを送信することができます。

この際、GASのデプロイ後に発行されるURLが必要になります。

そして、GASスクリプト側では投稿された内容等の取得を行い、その値に沿った返信内容を作成します。

そして、今度はSlackApp側で設定したWebHookURlを使用して、その返信をSlackへ投稿するようにする...といった感じです。

それではやっていきます！

SlackでAppを作成する

それではまずはSlackでAppを作成します。

このAppは、Slack側から特定タイミングでGASへ通知したり、GASから受け取るためのWebHookを作成するために使用します。

では以下のURLから、自分のワークスペースのAppを作成しましょう！

Slack APP を作成する

YourApps等が表示されると思いますが、右上のCreateAppを押してください。

ボタンを押すと...

以下のような画面が出てくると思います。

App Nameがアプリの名前、DevelopmentSlackWorkspaceが、そのアプリを追加したいWorkSpaceを選択できます。

今回は上記のように、AutoReplyBotという名前にしておこうと思います。

WorkSpaceはあなたが追加したいWorkSpace名を指定してください。

作成をすると、以下のような画面になると思います。

この画面でSlack側のメッセージ受信や送信の際の設定等を書いていきます。

では、次にWebHookURLを設定します。

今回は外部リソース（GAS）からSlack側に働きかけるためのものなので、Incoming WebHooksを設定します。

すんごーいざっくり説明してしまうと、外部からSlackへ何かしらの投稿をする際、このURLを指定して投稿をすることで、外部のシステムから特定のチャンネルに対して、操作を行うことができます。

先程のAppのBasic Informationから、Incoming Webhooksを選択します。

すると...?

以下の画面が出るはずです。

一度も使われていない場合は上記のようにOffの状態になっていると思うので右上のスイッチをONにします。

ONになっている人は何もしなくてOKです。（すでに他の方が利用している可能性が高いです。）

ONにすると、下の方に追加で項目が増えます。

これがWebHookURLの設定になります。

したの"Add New Webhook to Workspace"から、作成しましょう！

すると...

以下のようにチャンネルが表示されます。

このWebHookを指定された場合にどのチャンネルにメッセージを送りますか〜？というのを指定してください。

今回はテスト用にSlackで以下のチャンネルを作っておきました。

そのため...

こんな感じです。

すでにあるチャンネルがばーっと表示されるので、合っているものを選択して、指定しましょう。

指定したらAllow(許可)を押してください。

Allowをすると追加されているのがわかるかと思います！

いったん、Slack側の設定はここまでで大丈夫です。

次に、GAS側の設定をしていきましょう！

余裕のある方は上部に記載されているcurlコマンドで動作確認をしてみるといいかもしれません。

念の為、curlによる動作確認も説明しておきますが、よくわからない場合などは読み飛ばして次節へいっていただいて大丈夫です！

WebHookURLの動作確認

さて、それではcurlコマンドでの動作確認について書いておきます。

WebHookURLというのは、POSTリクエストと呼ばれる形式でSlackで投稿したい文面を送信してあげれば、先程指定したチャンネルに実際のメッセージ投稿ができる...という機能になっています。

つまり、GASでも同様のリクエストを出してあげることでGASからSlackへの通信も可能です。

そのため、GASであろうがなかろうが、このPOSTリクエストとその送信内容さえ守れば、どんなサービスからでもslackへ投稿することができる...というわけですね。

そして、そのリクエストを手軽に手元で送るためによく使われるのが、"curl"というコマンドです。

それによる説明が先程の公式ページにも記載されていたため、こちらでも解説しておきます。

今回はMacで説明します。（Windowsの方はWindows"curl"使い方等で調べていただければと...!）

Launchpadでターミナルと打つと、以下のようなアプリが出てくると思うので、そちらをクリック。

すると、以下のような画面が出てきます。

ここまでできたら先程公式ページにあったcurlコマンドをコピーします。

この際、以下の"<ここにあなたの試したいWEBHookURLをコピペ>"の部分は先程作成したWebHookURLをコピペしておいてください。

以下のCopyからコピーできるかと思います。

curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' <ここにあなたの試したいWEBHookURLをコピペ>

上記を置き換え後コピーできたら、先程のターミナルにそのまま貼り付けます。

すると...

以下のようになります。

taka@Taka ~ % curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' <筆者のWEBHOOKURLに置き換えている>
ok%                                                                                                                                                                                          
taka@Taka ~ %

上記のように、okと出てきます。

これがでたら、先程の自分のチャンネルをみてみると、ちゃんとメッセージが届いていると思います。

(筆者は解説スクショのため二度実行しています...!）

先程のcurlコマンドの"{"text":"Hello, World!"}"の"Hello, World!"を書き換えるとちゃんと投稿内容も書き変わるので、お試しください。

これで、動作確認は終了です。

GASでスクリプトを作成し、デプロイする

さて、WebHookURLを作成したので、GASから送信することができるようになりました！

では、次にGASを書いていきます！

まず、Googleドライブを開きます。

Chromeだと右上から開けますね。

上記画像の左下あたりにある三角形のやつですね。

開くと、適当な場所で右クリックをして、その他からGoogle Apps Scriptを開きます。（ちなみにこの頭文字がGASですね。）

開くと以下のような感じになっていると思うので、全て削除して、後述するコードをコピーしてそのまま貼り付けてください！

コードは以下です。

function doPost(e){
  // 疎通確認
  var params = JSON.parse(e.postData.getDataAsString());
  if('challenge' in params){
    return ContentService.createTextOutput(params.challenge);
  }

  // Botの投稿に反応しないように
  if('subtype' in params.event) {
    return
  }

  userName = params.event.user;
  if('text' in params.event) {
  　// 実際に表示されるメッセージ内容
    var contents = `<@${userName}>	${params.event.text}`
  }

  // リクエスト内容を整形
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(
      {
        "text" : contents,
        link_names: 1
      }
    )
  };
  // 投稿先
  UrlFetchApp.fetch("ここは先程取得した自分のWEBHOOKURLに置き換える", options);

}

こんな感じです。

貼り付けたら、以下の箇所だけ修正してください。

UrlFetchApp.fetch("ここは先程取得した自分のWEBHOOKURLに置き換える", options);

""の内側に、先程slack側で発行したWEBHOOKURLをコピペすれば大丈夫です。

修正できたら、保存をします。

Macの方は"Commnad + s"

OS関係なく、画面中央上の以下ボタンでも保存可能です。

ここまでできたら、一度実行しましょう。

GASは、プログラム中の権限設定が必要なものを実行時に要求してくれます。

実行時意外でも設定できそうですが...筆者は実行時にやったので、そちらで説明します。

保存したのを確認したら、以下の実行ボタンを選択します。

実行をすると...

ローディングが始まり...

以下のような画面が出てくると思います。

権限を確認をクリック。

アカウントの選択画面が出てきます。

（筆者はテスト用のメアドなので、晒しちゃいますが、メール送らないでくださいね...w）

選択をすると・・・？

以下のような危険そうな画面が出てきます。

先程コピペしたプログラムにて、一部権限が必要な機能を使用していたため、そのアプリ（書いたプログラム）で許可を求められています。

今回は許可する必要があるため、詳細を開きます。

すると、上記のようにリスクを理解し〜といた文章がでてきて、"無題のプロジェクトに移動"といったリンクが出てくると思います。

デベロッパーのメールアドレスがちゃんと自分のものになっているかどうかを確認した上で、移動してください。

すると、上記のように外部サービス（今回の場合はslack）とのやりとりに権限が必要なため、それを許可してあげます。

許可してあげると、実際にプログラムが実行開始され、以下のようなログが出てくると思います。

エラーとなっていますが、これは、本来Slack側からデータを送信される想定でコードを書いています。

今回実行する際にそのデータを渡していないため、データが存在していませんよ〜！と怒られています。

実際にslackで使用する際は問題ないので、気にしなくてOKです。

さて、ここまでできたら改めて保存されていることを確認して、デプロイしましょう！

画面右上のデプロイから、新しいデプロイを選択します。

すると、以下のような画面が出てくるので、歯車からウェブアプリを選択します。

すると、右側で色々設定できるので、新しい説明文を初回デプロイ、アクセスできるユーザーを全員にして、デプロイします。

デプロイが完了すると...以下のようにウェブアプリのURLが発行されます。（もっと長いですが、あまり公開しない方がいいのであえて短く切ってます）

このウェブアプリURLはコピーしておいてください。

これで、GASの設定も完了です！

今回、無題のプロジェクトのままここまで解説しましたが、プロジェクト名等は自由に変えちゃってOKです！

それでは次にSlack側でメッセージが投稿されたらGASへ通信するように設定しましょう！

SlacAppの設定で、メッセージが投稿されたら
スクリプトを実行するようにする

さて！最後です！

といっても、最後は案外楽です！

先程作ったSlackのAppの設定画面へいきます。

そこの左側にある、"EventSubscriptions"を選択します。

すると、以下の画面になるはずです。

先程のwebhookと同じく、offをonへ変更すると...

こんな感じですね。

ここで、RequestURLを入れる必要があるのですが、これが先程のGASデプロイ時に発行されたウェブアプリのURLを指定します。

うまくいけば以下のように緑で"Verified"となるはずです。

"Verified"になったら、引き続き、"Subscribe to bot events"の設定もやっていきます。

これは、どんなイベントをbotが監視して、そのタイミングにGASへ情報を送信するのか？を指定します。

今回はチャンネルに対して、メッセージが追加されたら...という形にしたいので、以下のように"message.channels"を選択します。

追加するとこんな感じです。(他にもスタンプでアイコンつけられたら...等色々ありそうでした..!）

残りで以下の二つの項目もあるのですが、今回は使わないので、そのまま何もしなくて大丈夫です。

一通り設定したら、画面右下にあるSaveChangesを忘れずに。

さ、これでslackのチャンネルにメッセージが投稿されたら、GASのスクリプトに対してメッセージのデータが送信されるようになりました！

黄色い注意みたいなのが出てきた場合

もし、Save後に以下のようなものが出てきた場合...(筆者は出てきたので...）

app userの権限範囲を書き換えたので、appを再インストールしてね〜って感じだと思うので、Please以降の"reinstall your app"をクリックします。

すると、以下のような画面が出てくるので再度チャンネルを指定してあげて許可しておきましょう。

設定したらAllowを選択すればOKです。

動作を確認してみる！

さて！それでは動作確認をしてみましょう...!

設定したslackのチャンネルに対して適当なメッセージを打ってみましょう...!

筆者ぼっちなので、別のユーザーとして投稿できませんが...

上記のように、投稿したユーザーにメンションをつけて、そっくりそのまま返信をする...ということが実現できました！

後ほど詳述しますが、投稿内容はプログラムを修正することで柔軟に変更でき、WebHookURLを使用しているため、特定チャンネルに対してのみ反応します。

もしも動かない場合・・・

さて、いろいろやっているともしも動かない場合...というのもありえるかと思います。

その場合のチェックポイントを書いておきます。

GASでアクセスできるユーザーは全員になっている？

秘匿的な情報を扱いたい場合は推奨ではないかもしれませんが、現状、GASスクリプトデプロイ時に設定するアクセスできるユーザーが自分のみの状態だと、SlackAppからのアクセスができず、challenge時に失敗してしまうことを確認しています。

一度確認をしてみて、ちゃんと"全員"になっていることを確認しましょう。

もし秘匿的な情報を扱う場合は、多分そういった使い方もできるはず...なので、別途調べていただけると...!

(余裕があれば調べて記事にします...いつか...w）

WebHookURLは正しい？

GASのスクリプトに記載したWebHookURLは正しいでしょうか？

ちゃんと自分のSlackAppで設定したURLになっていない場合、エラーになるか、他の誰かに飛んでいっているかもしれません。

デプロイ内容は正しい？

GASでは、デプロイをする際、スクリプトを書いて"保存"をしておかないと、反映されません。

最初何もない状態でコピペをし、保存をしないままデプロイしている可能性もあります。

その場合、実行時の権限の確認は出ませんし、SackのEvent SubscriptionでのURLはChallengeに失敗すると思います。

改めてデプロイを正しくおこなって試してみましょう。

一度スクリプトやAppを作り直してみる

これは筆者が実際に陥ったものなのですが...

最初下手にEvent SubscriptionのURLテストでverifiedを通していたためか、Slack Events上でVerifiedになっていて、デプロイ等の設定も間違いないにもかかわらず、なぜかSlackのイベントが送信されない...といった状況に陥りました...

結局その際行なったのはGASスクリプトを最初っから作り直したらうまくいったため、絶対あってるはず！なのにうまくいかない！という場合は、GASスクリプトの書き直し（ファイル自体削除、作成しなおす）や、SlackAppの作り直しを試してみてもいいかもしれません。

プログラムの解説

先程は割愛したプログラムの説明を行なっていきますので、どこで何をやっているか、簡単に理解していきましょう！

再度コードを掲載します。

function doPost(e){
  // 疎通確認
  var params = JSON.parse(e.postData.getDataAsString());
  if('challenge' in params){
    return ContentService.createTextOutput(params.challenge);
  }

  // Botの投稿に反応しないように修正
  if('subtype' in params.event) {
    return
  }

  userName = params.event.user;
  if('text' in params.event) {
  // 実際に表示されるメッセージ内容
    var contents = `<@${userName}>	${params.event.text}`
  }

  // リクエスト内容を整形
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(
      {
        "text" : contents
      }
    )
  };
  // 投稿先
  UrlFetchApp.fetch("ここは先程取得した自分のWEBHOOKURLに置き換える", options);
}

では解説していきます！

まずは一番外枠を囲っている以下です。

function doPost(e){
 // いろんな処理
}

このdoPost関数は、GASのアプリにて、Post形式のリクエストを受け取ることができる関数になっています。

そのため、この"e"という値にSlackから送られてくるメッセージや、それ以外の色々な情報(メッセージ投稿者や投稿時間などなど...)が入っています。

そのため、このeから取得した値を元に、メッセージの送信内容を考えます。

では、次はこちらです。

  // 疎通確認
  var params = JSON.parse(e.postData.getDataAsString());
  if('challenge' in params){
    return ContentService.createTextOutput(params.challenge);
  }

ここは、そういうもんなんだ...という理解でもいいですが、SlackでEvent Subscriptionsの設定にてverifiedとしたのを覚えているかと思います。

その際にやっていることは、SlackAppにGASのURLが設定されたら、一度、この"challenge"という項目で、Postリクエスト値を送信します。

もしリクエスト中にchallengeという項目の値がある場合は、それをそのままアプリ側から返す設計にしておくことで、Verified(承認済み）になります。

これは、URLが正しいものかどうかの確認といった意味合いなどから行なっているんだと思います。（詳しくはSlack公式あたりで...)

そのため、上記のコードでは、先程最初に受け取った、"e"という値から、postDataの部分だけ抜粋して、paramsという変数に入れています。

"JSON.parse"は、よく通信で用いられるJSONという形式から、JSで扱いやすい形式に変換しているだけです。

そして、paramsの中に先程の"challenge"という項目がある場合は、そのリクエストはSlackからの認証確認のため、"params.challenge"の値をそのまま返してあげます。

基本的にはここはずっと貼り付けておけばいいんだ...で大丈夫です。

（厳密には一度認証を通せばおそらく消しても問題ないと思います。が、将来なんらかで認証が切れて再度認証リクエストが飛んだ際にエラーになることを考えると残しておいていいかと思います。）

次は以下です。

  // Botの投稿に反応しないように修正
  if('subtype' in params.event) {
    return
  }

こちらは、今回、ユーザーがチャンネルに投稿した際にSlackからPostリクエストが送信されます。

この場合、例えば僕が投稿をすると、それがトリガーとなり、GASのスクリプトからSlackのBOTが投稿をします。

さらに、そのGASのスクリプトも投稿をするわけなので、それがトリガーとなってBOTへの返信としてBOTがまた投稿する....という事態に陥ってしまいます...w

(最初なった時、slack通知が狂ってびっくりしました...w）

botのリクエストにのみsubtypeという項目が付与されているようだったので、一旦、その項目があれば反応しない...といった形にしています。

（ただ、もしかしたら別の操作でもsubtypeがついてしまう可能性もありそうなので、ちょっと修正すべきだろうな...と思っています...!）

やっている内容としては、postされてきたデータの中に、subtypeが存在していたら何もせず、すぐにreturn(処理をそこでやめて後続処理を行わないように)しています。

では次へ！

  userName = params.event.user;
  if('text' in params.event) {
  // 実際に表示されるメッセージ内容
    var contents = `<@${userName}>	${params.event.text}`
  }

ここでは、ユーザー名の取得と、返信する際の本文(contetnts)を作成しています。

textが存在している場合、userへのメンションとそのtextの内容をくっつけて"contents"という変数に入れている形です。

筆者がリアクション（スタンプを押された場合の挙動等）も合わせて試したのですが、その際、userの情報はpostのデータとして送られてくるけど、textは存在しなくてエラーになってしまう...といったことがあったため、textの方に関しては存在確認をするようにしています。

今後、返信する内容を変更したい場合は、ここのcontentsを修正すれば返信内容等が変わります。

では次へ！

次は、WEBHookURLに対してGASから投稿リクエストを送る際、先程のメッセージ内容だけではだめなので、それ以外の通信の設定をしている部分です。

メッセージのみ扱う場合は基本的に、変更する必要はないので、こんなもんなんだなぁで大丈夫です！

  // リクエスト内容を整形
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(
      {
        "text" : contents
      }
    )
  };

postメソッドの指定や、内容がJOSNで書かれてます！とかを指定していますね。

そして、先程のメッセージ内容のcontentsをJSONに変換もしています。

(受け取った際に変換し、ここで戻して通信しているわけですね）

そして最後です！

以下で、WebHookURLに対して、postのリクエストを送る...といった処理を行います。

実際には先程のpotionsで指定した内容に沿って通信をしているので、通信を行なっているんだな...で大丈夫です！

  // 投稿先
  UrlFetchApp.fetch("ここは先程取得した自分のWEBHOOKURLに置き換える", options);

これによって、先程のメッセージ内容がSlackApp側に送信され、App側ではその送信されてきた内容を特定チャンネルに投稿する...といった設定にしているため、上記を実行することで、自動的にチャンネルへpostできるわけですね。

以上がプログラムの解説でした！

では、次章にてもう一工夫のヒントを書いておきます。

もう少し実用的にするには...

さて、チャットボットが動いた皆さんはこう思うでしょう...

やまびこだけじゃなんにも使えない！

どうすればいい感じにできるの！？

と。

一言でいうと、JavaScriptを勉強してください。

となるんですが、簡単な例を2個ほどあげておこうと思います。

簡易的なQ&Aを作りたい...!

簡易的なQ&Aであれば、質問内容に含まれる特定キーワードで判別して、回答することができます。

今回はわかりやすいよう、if('text' in params.enent) {} の中身だけで対応します。

例えば以下のように書き換えると...?

  if('text' in params.event) {
    var contents;
    if(params.event.text.includes('てくてくテック')){
      // メッセージのどこかに"てくてくテック"が含まれていた場合の返信
      contents = `<@${userName}>	てくてくテックについて知りたいのですか？以下のページを参照してみてください。\n https://tektektech.com/`
    } else {
      // それ以外のデフォルトの返信内容
      contents = `<@${userName}>	${params.event.text} です！`
    }
  }

"includes"というメソッドを使うことによって、"params.event.text"つまり、Postで送信されてきた文字列の中に”てくてくテック”があるかどうかを調べています。

(エンジニア的にみるとあまりスマートな実装ではない気もしますが...!もし改善したいぜ！って方は"javascript switch文"で検索してみてください。）

ある程度質問が絞れて、キーワードベースで数通りに返事がまとめられるQ&A程度であればこのif文をいくつか追加することでいい感じにできるでしょう...!

デフォルトの場合はお問い合わせください...等で案内すると尚良さそうです。

また、個人利用としては、"天気予報"と打つと、天気予報のページのURLを出したり...さまざま活用できそうですね。

（外部APIを理解して使える人はAPI経由で内容をメッセージとして出すなんてこともできますね。）

懸念点としては"てくてくテック"という文字列がないとだめなので、"てくてくてっく"や"てくてくtech"等、微妙な違いを認識できません。

そのため、それも合わせて条件に含めてしまう...等は考慮の必要があるでしょう。

ランダムなルーレットを作りたい...!

割と需要高そうなのがルーレット機能かなぁと思います。

例えば掃除当番と打つとその掃除当番のリストから、特定のメンバーが指名される...などです。

プログラムが出したランダムな値であれば上司から言われる指名より、納得できますし、連続で指名されたとしてもBotに愛称でもつけておけば笑って誤魔化せるもんです...!w

ではサンプルを...!

掃除当番リストとして、cleanTeamMemberListの配列を作っておきます。

そして、先程のQAのように、"掃除当番"が含まれていたら....

ランダムな数値を生成して、randomには先程作ったリストのメンバー数分の数字が生成されます。（今回は0,1,2,3の4種類)

その後、contentsには簡単な説明と、先程のリストから、生成されたrandomな値を用いて要素の取得、その人にメンション...というふうにしています。

  cleanTeamMemberList = ['U01FG389ZAQ', 'takaponB', 'takaponC', 'takaponD']; // ['takapon', 'takaponB', 'takaponC', 'takaponD']
  if('text' in params.event) {
    var contents;
    if(params.event.text.includes('掃除当番')){
      // 0,1,2,3のいずれかをランダムに生成
      random = Math.floor( Math.random() * cleanTeamMemberList.length );
      // ランダムに生成された番号を用いて先ほどのリストからメンバーを指名(例: 2が生成されたら'takaponC'）
      contents = `本日の掃除当番は...<@${cleanTeamMemberList[random]}> です！\n お掃除お願いします！	`
    } else {
      // 実際に表示されるメッセージ内容
      contents = `<@${userName}>	${params.event.text} です！`
    }
  }

試してみると上記のようになりました。

ここで僕に対してだけメンションが有効になっていますが、これは、cleanTeamMemberList配列に指定している値が関係しています。

cleanTeamMemberList = ['U01FG389ZAQ', 'takaponB', 'takaponC', 'takaponD']; // ['takapon', 'takaponB', 'takaponC', 'takaponD']

僕のところだけ'U01FG389ZAQ'となっています。

これは、Slack側でユーザーを判定するためのIDになっていて、このユーザーIDを指定して、

"<@${ユーザーID}>"とすることで初めてメンションも付与されます。(逆にtakaponで指定してもつきません。）

そのため、このリストを作成するときはあらかじめユーザーIDを取得して登録する必要があります。

その際、ユーザーIDだと、誰なのか把握できないため、後ろの方に記載している"//"で、どの位置に誰のIDがあるのかをわかりやすくしておくといいでしょう。

（今回、配列の値も'takaponB'等になっていますが、筆者は"ぼっち"なので、他のユーザーのダミーとして入れています。触れないでください。）

また、ユーザーIDの取得の仕方はSlack上でユーザーのアイコンを右クリックし、Copy linkを選択します。

すると、手元にコピーされるため、適当な場所に貼り付けます。

その末尾部分にあるので、それをコピーして使いましょう。

そういえば...

ボットの名前と画像があんなのではなんかやですね...

最後におまけで適当につけてあげましょう。

改めてSlackのAppの設定画面へ戻ります。

その中からBasic Informationを選択。

下の方へスクロールしていくと...

以下のようにDisplayInformationがあります。

ここで任意のicon画像や名前、説明をつけましょう。

筆者はまともな画像なかったので、最近やっている原神というゲームのスクショから...

ちなみに一番好きなのは甘雨ちゃんです...!(どうでもいいかっ!）

一点だけ、icon画像の指定は割と厳しいです。

適当に選んで画像中の任意の正方形を選択...等はできないため、あらかじめ一辺が512px~2000pxの正方形にトリミングした画像を用意する必要がありそうです。

できていない場合、以下のようなエラーが出ました。

解像度は特に意識せずにフォトショで512px四方にトリミングしたらあげられたので、512px ~ 2000pxのいずれかの長さになる正方形にしてアップロードしてみてください。

ゲーム内では水元素を使用するキャラクターなので背景も青色にしてみました。（なんの背景かしらんけど...!）

こんな感じで設定してみます。

すると...?

うむ...悪くない...!

すでにやっている人はいそうですが、キャラクターのセリフ集のデータで返信してくれるBotとかも面白そう。

青い背景は詳細出すとでる部分の背景かな？多分。

設定しない方がよさそう...w

まとめ

さて、今回はSlackとGASでチャットボットを作ってみました！

オリジナルのSlackの機能では十分なチャットができませんでしたが、今回のものに関してはJSさえ知っていれば簡単なQA, 抽選等もできることがわかったかと思います！

ただ、こんなのはほんの一例です...!

やはりJavascriptで何ができるのかさえ知っていればもっともっといろんなことに対応できますし、よりニッチな要求も満たせるボットも作れるはずです。

今までJavaScriptを触ったことがない...という方でも是非、これを気に勉強してみてください！

かくいう筆者も対して知識ないですが、しっかり時間をかけて調べればチャットBot作れたので...!

複数チャンネルで複数運用するもよし、社内でQAとして働いてもらうもよし、個人使用で趣味で使うもよし！

これがあるだけでSlackをぼっちで使っててもちょっと楽しみが増えそうです...w

さて、めちゃくちゃ長くなってしまいましたが...

最後までみてくださり、ありがとうございました...!

今度はGASの定期実行機能を使って、定期的にメッセージを投稿してくれるBotを作成してみようと思っています。（今回よりも内容は簡単になるはず。）

それでわ！

モバイルバージョンを終了