読者です 読者をやめる 読者になる 読者になる

玄関でピンポンすると反応するBOTを作ってみた備忘録

こちらのLTについての記事です。
qiita.com

LTの練習をしたくて無理矢理ネタつくったカンジです。
なので、しょぼいBOTを作っただけのLT話でしたが、一応記録に残します。

今回のBOTの仕組みとしては 「会社の玄関にタブレットを置いて、来客者が用事に応じてボタンを押し、その押されたボタンに応じたメッセージを配信する」 というものです。
なので、こんなカンジです。

入力画面(HTML・CSSJQuery)

↓ Hubotサーバに送信

BOTサーバ(Hubot)

↓ メッセージ送信

メッセンジャー(Slack)

入力画面の作成

私はWebデザイナーでは無くハイセンスなものが作れないので、とりあえずBootstrapを使って簡単に作成しました。 f:id:butackle:20161120140439p:plain
ボタンが押された時に動作するプログラムは、こんなカンジです。 gist.github.com
ボタンが押されたら、ajaxで送信しているだけですね。
一応、ボタンが押されたらメッセージ表示する処理もいれていますが、まぁサービス的なものです。

ここから過去記事抜粋。
@paiza_runみたいな機能をSlackに超簡単につけてみた備忘録 - 技術的備忘録

Hubotの導入

導入する環境はローカルでも、さくらのVPSみたいな環境でも大丈夫だと思います。
私はローカルでしか、やったこと無いのですが。

Node.jsとnpmの準備

ココは各自環境に合わせて使えるようにしてください。

npmでHubotに必要なモジュールをインストール

npm install -g hubot yo generator-hubot coffee-scriptでインストールできるハズです。
グローバルインストールが嫌な人は-gを抜いてください。
各モジュールの内訳としては、

モジュール 詳細
hubot hubotです
yo プロジェクトのひな型生成ツールらしい
generator-hubot Hubotのプロジェクト生成ツール
coffee-script https://ja.wikipedia.org/wiki/CoffeeScript

Hubotを生成する

yo hubotと叩くとジェネレータが起動します。
メールアドレスやらオーナー名やらbot名やらの設定を経て、生成されます。

(スマホで見ると表示くずれてるかもです。)

                     _____________________________  
                    /                             \ 
   //\              |      Extracting input for    |
  ////\    _____    |   self-replication process   |
 //////\  /_____\   \                             / 
 ======= |[^_/\_]|   /----------------------------  
  |   | _|___@@__|__                                
  +===+/  ///     \_\                               
   | |_\ /// HUBOT/\\                             
   |___/\//      /  \\                            
         \      /   +---+                            
          \____/    |   |                            
           | //|    +===+                            
            \//      |xx|                            

? Owner butackle
? Bot name testBOT
? Description test
? Bot adapter slack
   create bin/hubot
   create bin/hubot.cmd
   create Procfile
   create README.md
   create external-scripts.json
   create hubot-scripts.json
   create .gitignore
   create package.json
   create scripts/example.coffee
   create .editorconfig
                     _____________________________  
 _____              /                             \ 
 \    \             |   Self-replication process   |
 |    |    _____    |          complete...         |
 |__\\|   /_____\   \     Good luck with that.    / 
   |//+  |[^_/\_]|   /----------------------------  
  |   | _|___@@__|__                                
  +===+/  ///     \_\                               
   | |_\ /// HUBOT/\\                             
   |___/\//      /  \\                            
         \      /   +---+                            
          \____/    |   |                            
           | //|    +===+                            
            \//      |xx|                            

SlackとHubotをつなげる

SlackにHubotを出現させる

ここから導入したいSlackチームを選んで、表示名とか表示画像とかを設定します。 slack.com 後からでも設定は変えられます。
あとは設定画面にAPI Tokenというものが記載されているので、それをコピっておいてください。
このあとの作業で使います。

Hubotの環境にSlackのTokenを設定する

先ほどコピっておいたAPIトークンを設定します。
export HUBOT_SLACK_TOKEN=<API Token>でOKです。
たまに再起動したあと設定し忘れてて、HubotとSlackが繋がらなくなって、やや焦ることがあったので、binの中のhubotに書いておくのも良いと思ったりします。

Hubot を起動する

./bin/hubot --adapter slackでHubotを起動します。
うまく繋がれば、bot名の横の丸が緑色になっているはずです。 f:id:butackle:20161030123051p:plain
試しにPINGと打つとPONGと返してくれます。
f:id:butackle:20161030123210p:plain

f:id:butackle:20161120143624p:plain

ここまでは過去記事から。
@paiza_runみたいな機能をSlackに超簡単につけてみた備忘録 - 技術的備忘録

hubotは起動すると、デフォルトで8080ポートをListenするようです。
なので、画面からHubotサーバの8080ポートに向けてデータをブチこんで反応させるようにします。
今回、上記の事実を知って、ずっとhubot起動時に出ていたエラーメッセージの謎が解けました。
いままで起動するとJenkinsが立ち上がるようになっていて、それが8080ポートを使っていたのでエラーメッセージが出ていたぽいです。
最近はJenkinsも使っていなかったので、起動しないように設定しました。

通知機能の作成

今回は、受け取った値に応じたメッセージを所定のチャンネルに送るという単純な機能にしました。 gist.github.com 上記の内容をscripts内に好きなファイル名でjsファイルとして保存してもらえれば大丈夫だと思います。
私はindex.jsで保存してます。
なお、roomに入れる値は、チャンネル名ではなくチャンネルIDです。
channels.list method | Slack
ココでTest Methodを押すと、一覧を見れます。
nameの上のidが、該当するIDです。

通知は、こんな形で表示されます。
f:id:butackle:20161120161638p:plain


とまぁ、こんなカンジで作ってみました。
今回は2〜3時間くらいで作れたので、結構お手軽で良いんじゃないかなと思っています。
とりあえず作ったカンジなので、色々足りない機能は満載なのですが、また機会があったらアップグレードしたいなと思っております。


参考資料

GitHub - butackle/ping-pong-bot

@paiza_runみたいな機能をSlackに超簡単につけてみた備忘録 - 技術的備忘録

HubotでWebHookのHTTPリクエストを受け取る - GeekFactory