LoginSignup
2
0

More than 3 years have passed since last update.

IBM CloudとSlackbotを連携し、Slackチャンネルに匿名投稿できるようにしてみた

Last updated at Posted at 2020-11-27

1.はじめに

IBM Cloud上のNode-REDとslackbotを連携し、Slackチャンネルに匿名投稿できるbotを作成しましたので、その流れをまとめます。IBM Cloudは無料枠内で利用できます。

使用イメージ

botにダイレクトメッセージを送信することで、botが指定したチャンネルに書き込みを行ってくれます。
複数Botを用意することで、より会話の感じが出ます。
image.png

2.作業概要

 ① IBM Cloudアカウント作成
 ② Node-RED実行環境準備
 ③ Slackbot作成とAPIキー準備
 ④ Node-REDとSlackbot連携
 ⑤ 投稿テスト

3.作業詳細

①IBM Cloudアカウント作成

以下URLへアクセスし、IBM Cloudのアカウントを作成します。
 https://cloud.ibm.com/registration

Eメール、パスワードを入力し、「次へ」をクリック
image.png

登録したEメールに検証コードを届くので、検証コードを入力し、「次へ」をクリック
image.png

個人情報(名前、姓)を入力し、「次へ」をクリック
image.png

「アカウントの作成」をクリックし、アカウント作成完了
image.png

②Node-RED実行環境準備

IBM Cloud上にNode-REDの実行環境を準備します。

「カタログ」をクリック
image.png

検索キーワードに「Node」を入力し、「Node-RED App」を検索
image.png

「始めに」をクリック
image.png

アプリ名は任意(変更することも可能)、その他はデフォルトのまま
image.png

Liteプランが選択されていることを確認し、「作成」をクリック
image.png

「アプリのデプロイ」をクリック
image.png

デプロイメント・ターゲットで「Cloud Foundry」を選択
image.png

IBM Cloud API鍵を新規生成するため、「新規」をクリック
image.png

「OK」をクリック
image.png

キー生成を確認
image.png

その他デフォルトのまま、「次へ」をクリック
image.png

「作成」をクリック
image.png

デプロイが進行中(赤枠部分)のため、しばらく待ちます(10分程度)
image.png

リロードし直し、アプリURLにアクセスできることを確認
image.png

Node-REDの画面が開くので、初回登録を進める
「Next」をクリック
image.png

Node-REDエディタ用のユーザとパスワード情報を入力(IBM Cloudのアカウントとは異なります)し、「Next」をクリック
image.png

「Next」をクリック
image.png

「Finish」をクリック
image.png

「Go to your Node RED flow editor」をクリック
image.png

ユーザ、パスワード情報を入力し、「ログイン」をクリック
image.png

Node-REDのフロー画面開いたら、続いてSlack連携のためのモジュールを追加
Node-REDのフロー画面右側の「パレットの管理」をクリック
image.png

「ノードを追加」タブを選択し、検索キーワードに「slack」を入力
「node-red-contrib-slack」を見つけたら、「ノードを追加」をクリック
image.png

「追加」をクリック
追加するモジュールの詳細情報は以下参照
 https://flows.nodered.org/node/node-red-contrib-slack
image.png

正常にモジュールが追加されたことを確認
image.png

フロー画面においても、モジュール追加されたことを確認
image.png

③Slackbot作成とAPIキー準備

参加しているSlackのワークスペースにbotを追加します。
「App」をクリック
image.png

「Appディレクトリを参照する」をクリック
image.png

検索キーワードに「bot」を入力し、Botsをクリック
image.png

Botsの登録のリクエストをワークスペース管理者へ送信します。
「設定をリクエストする」をクリック
image.png

メッセージを入力し、「リクエストを送信」をクリック
image.png

「リクエストが送信されました」というステータスに変わるので、ワークスペース管理者が承認するのを待ちます。
image.png

承認後、「Slackに追加」をクリック
image.png

ユーザ名(任意)を入力し、「ポットインテグレーションを追加する」をクリック
image.png

デフォルトのまま、「インテグレーションの保存」をクリック
APIトークンは後で使用するため、メモしておく
image.png

image.png

匿名投稿先のチャンネルへBotを追加(今回はbot_testchannelに追加)
image.png

チャンネル詳細の「その他」から、「アプリを追加する」をクリック
image.png

検索キーワードにbot名を入力し、該当するBot名に対して「追加」をクリック
image.png

Botの追加を確認
image.png
image.png

チャンネル名を右クリックし、「リンクをコピー」をクリック
投稿先のチャンネルの識別番号を確認。後ほど使用するのでこの番号もメモしておく
 https://xxxx.slack.com/archives/<チャンネルの識別番号>
image.png

④Node-REDとslackbot連携

Slackbotと連携するフローを実装します。
Node-REDを開き、「読み込み」をクリック
image.png

以下コマンドをコピペし、「読み込み」をクリック

[{"id":"2b9710cb.988b4","type":"tab","label":"匿名投稿","disabled":false,"info":""},{"id":"3ff3e09a.aafa8","type":"switch","z":"2b9710cb.988b4","name":"DMか区別","property":"payload.channelObject.is_im","propertyType":"msg","rules":[{"t":"false"},{"t":"true"},{"t":"else"}],"checkall":"true","repair":false,"outputs":3,"x":290,"y":60,"wires":[[],["280e1a2.20814e6"],[]]},{"id":"ede2e915.132698","type":"function","z":"2b9710cb.988b4","name":"初期値設定","func":"msg.topic = \"message\";\nmsg.payload = {\n    channel: \"チャンネルの識別番号\",\n    text: msg.payload.text\n}\nreturn msg","outputs":1,"noerr":0,"initialize":"","finalize":"","x":650,"y":60,"wires":[["374a0235.0fdb4e"]]},{"id":"280e1a2.20814e6","type":"switch","z":"2b9710cb.988b4","name":"httpをふくむか","property":"payload.text","propertyType":"msg","rules":[{"t":"cont","v":"http","vt":"str"},{"t":"cont","v":"undefined","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":3,"x":460,"y":60,"wires":[["ede2e915.132698"],[],["835be295.665fa"]]},{"id":"2fe96781.e64798","type":"slack-rtm-in","z":"2b9710cb.988b4","client":"ea227ef9.7621d","name":"","events":"message","x":110,"y":60,"wires":[["3ff3e09a.aafa8"]]},{"id":"374a0235.0fdb4e","type":"slack-rtm-out","z":"2b9710cb.988b4","client":"e0cc6c56.47bb2","name":"","x":850,"y":60,"wires":[[]]},{"id":"fe6559cd.8dfae8","type":"slack-rtm-out","z":"2b9710cb.988b4","client":"","name":"","x":850,"y":220,"wires":[[]]},{"id":"835be295.665fa","type":"function","z":"2b9710cb.988b4","name":"初期値設定","func":"msg.topic = \"message\"\nmsg.payload.channel =\"チャンネルの識別番号\"\nmsg.payload.text = msg.payload.text + \"~テスト!\"\nreturn msg","outputs":1,"noerr":0,"initialize":"","finalize":"","x":650,"y":120,"wires":[["fe6559cd.8dfae8"]]},{"id":"ea227ef9.7621d","type":"slack-config","z":"","name":""},{"id":"e0cc6c56.47bb2","type":"slack-config","z":"","name":""}]

image.png

フロー名「匿名投稿」の追加を確認
image.png

slack-rtm-inとslack-rtm-outに先ほど取得したAPIキーとBotの名前を入力

image.png

bot名とAPIキーを入力し、「追加」をクリック
image.png

「完了」をクリック
image.png

同様にslack-rtm-outにbot名とAPIキーを入力する

「初期値設定」ノードに投稿先のチャンネル識別番号を入力
「"チャンネルの識別番号"」の箇所を先ほど取得したチャンネルの識別番号に変更
image.png

もう片方の「初期値設定」についても同様にチャンネルの識別番号を変更
(こちらは初期値設定は投稿内容の語尾メッセージを追加)
image.png

編集完了後、「デプロイ」をクリック
image.png

⑤投稿テスト

投稿はBotにダイレクトメッセージを送信します。
まず作成したBotを検索
image.png

「検索キーワード」にBotの名前を入力。該当するBotを選択
image.png

Botに対して、ダイレクトメッセージを入力
image.png

任意のメッセージを投稿
image.png

投稿先のチャンネルに対して、Bot(匿名)が書き込みを行ってくれます。
image.png

補足:Node-RED 各ノードの情報

「DMか区別」:Botがダイレクトメッセージのみ反応するように設定
image.png

「httpをふくむか」:httpを含むURLの投稿に対して、「undefined」というメッセージが出力されるため、
httpを含む場合は、語尾をつけないように分岐
image.png

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0