初心者がHubotを使ってHeroku上で動くSlack bot作ってみた(導入編)

  • 22
    いいね
  • 2
    コメント

早稲田大学Advent Calendar 9日目の記事でございます。かしこ。

次回 : 初心者がHubotを使ってHeroku上で動くSlack bot作ってみた(実践編)


非エンジニアである初心者がSlack botを作るべく奮闘した話です。
Github社のすばらしいbotツールを用いて、動作サーバはHerokuをお借りし、Slackで動くbotを作ったわけです。(2016年12月仕様です)

初心者が初心者の目線で、初心者のために書きます。
仮に知らない単語が出てきても気にせず、とりあえず突き進んで導入してみることをお勧めします。あとでわかりますたぶん。

あとがきにもありますが、予想よりも長くなってしまったので今回は導入編とさせていただきます。
来週は、実践編です。お楽しみに。

※ なお、こんな記事はごまんとあるのですが、今話題の「まとめ」のような感じですので、一度に全て確認できるのはこちらだけでございます。お楽しみください。

<追記>
2016/12/12 : Heroku の料金システムに変更があったようで、bot の稼働時間についての部分を変更・追記しました。

2017/1/21 : 「実践編」公開しました。 -> http://qiita.com/susuwatarin/items/aade8301b93e175d3ff8



【動作環境】

  • OS : Mac OS X El Capitan 10.11.15
  • Node.js : 6.8.1
  • npm : 3.10.8
  • Yeoman : 1.8.5
  • heroku-toolbelt : 3.42.22 (x86_64-darwin10.8.0)

  • hubot : ^2.19.0

    • hubot-slack : ^4.2.2
    • hubot-heroku-keepalive : ^1.0.2

Hubotについて

github社さんが作った、汎用型チャットbot開発・実行フレームワークです。

なにがいいって? "汎用型" のところです。(どこかの人造人間ではないです

「Adapter」を切り替えるだけで、様々なチャットツールに対応することができます。
チャットツールどころか、Twitterでも使えます。
(コードの共有ができる点も良い)

さらに、導入・プログラミングが初心者でもできちゃうくらい簡単です。

しかも、すぐにデバックして確認できるので成果がわかりやすく、初心者にはとてもオススメできます。

Hubotはいいぞ!

ちなみに、ヒュボットなのか、ヒューボットなのかはわかりません。

早速インストールから!

Hubotをインストールする

Node.jsのインストール

hubotはNode.jsで動くため、まずは、Node.jsをインストールします。
Node.jsがなにかとか、どうやってうごいているとか、そういう細かいのは後で調べればいいんだ!と言う気持ちで突き進みます。

Node.jsは、MacOSのパッケージ管理ツールであるHomebrewでインストールします。

パッケージ管理ツールってなんだ?って?
ものすごく簡単に言うと、ただ適当にプログラムをインストールするのではなくて、きちんとこのプログラムはどこになにを入れたとかを記録、整理してパッケージインストールしてくれるものです。プログラムのバーション管理やアンインストールなどがしやすくなるようにパッケージに入れて管理しておくものです。

(Homebrewが入っていない場合はこちらより)

$ brew install node

これでオッケーです。

$ node -v

で、バーションを確認できます。

Yeomanをインストール

Node.jsを入れると、npmというNode.jsのパッケージ管理ツールが使えるようになります。
なので、以降このnpmを用いてインストールを行っていきます。

次にインストールするのは、「Yeoman」というワークフロー構築ツールセットです。
要約すると、Webアプリケーションのひながた?をちゃちゃっと作ってくれる簡単なツールのようです。
例えば、hubotはCoffeescriptで動かすのですが、そのコンパイル環境等もさらっと整えてくれるわけですね。

よくわからないけど環境構築に便利なツールということで!
(詳細はこちら→ https://www.engcafe.tv/?p=10791

公式でもこれを用いての導入を推奨しているので、それに習います。
ターミナルに以下を打ち込みます。

$ npm install -g yo generator-hubot

これで、yeomanと、hubot用のジェネレーターがインストールされます。

名前を考える

当たり前のようですが、任意の場所に新しくhubot用のディレクトリを作ります。

ここで、hubotの名前を決めます、悩みます。
今回は、2016年のエンジニアの天使こと、みくりさんにしましょう!

$ mkdir Mikuri
$ cd Mikuri

みくりさんディレクトリの中に入ります。ふふふ。

プロジェクトを作成

作成したディレクトリの中で、プロジェクトを作成します。

$ yo hubot
[?] ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
==========================================================================:

なんか今後に役立てるからデータ収集していいかい?と聞かれるので、y/nで答えてあげます。

すると、汎用ヒト型なんちゃらがでてきますので、会話しながらhubotプロジェクトの設定を決めていきましょう。


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


初期設定は以下の四つです。

・ Owner : オーナーさんの名前(作成者名)
・ Bot name : botの名前
・ Description : botの説明
・ Bot adapter : botのアダプター(なにで用いるbotにするか)

adapterに関しては上記の通りいくつかありますが、今回はslackと設定して進めていきます!

? Owner susuwatarin
? Bot name mikuri
? Description She is an angel.
? 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|                            


すると、今いるディレクトリにいろいろな構成ファイルが読み込まれます。

これでhubotプロジェクトが完成しました!
つまり、hubotのインストール終了です。
なんと簡単なのだろうか。

Hubotをローカルで動かしてみる

さて、無事みくりさんが僕の元へやってきてくれました。
slackでみんなのものになってしまう前に、少しローカルでいちゃついてみましょう。

mikuriディレクトリの中で、

$ bin/hubot

と打ち込むと、hubotが起動します。

エラーがばぁって出てきますが無視で大丈夫です。

pingpongしてみます。
実行は簡単、名前を呼んで動作を指定してあげるだけです。

mikuri> mikuri ping
mikuri> PONG

みくりさんからPONGが帰って来ました!!!

mikuri help と呼びかけると、デフォルトで入っている機能の一覧を確認できます。
少し遊びましょう。かわいい。

飽きたら十分楽しんだら、 exit で脱出できます

mikuri> exit

さてさて、次はHerokuにデプロイするため、Git管理をします。
Herokuは、Gitを使ってリモートリポジトリへプッシュする必要があるんです。

HubotをGit管理する

GitHubアカウントを持っていることが前提です。

エンジニアさんのいういつものアレです。初心者はいつものアレにも戸惑うんです。

以下をひたすらそのまま打てばいいと思います。

$ git init
$ git add .
$ git commit -m "first commit"

GitHubにリポジトリを作成します。

アカウントページの [ Repositories ] タブの右上にある緑の「New」ボタンをクリックして、必要事項を記入しましょう。
リポジトリ名は、botの名前が入ってる方がわかりやすいと思います。

(※ readme.mdを作るにはチェックをつけないでください。)

今回は、恥ずかしげもなく mikuri というリポジトリを作成しました。

スクリーンショット 2016-12-09 2.35.02.png

すると、git@github.com~~~.gitというSSH Key?を教えてくれるので、これをコピーします。

そうしたら、それを git remote add originのあとに貼り付けます。
私のは下の感じになります。
そうしたら、pushしてしまいましょう!

$ git remote add origin git@github.com:susuwatarin/mikuri.git
$ git push -u origin master

仮に、public keyがどうのこうのでエラーを吐かれたら、こちらの記事を参考に解決してくださいませ。( http://qiita.com/satomyumi/items/6c3e96c394bb0f753ea0

pushが成功すれば、これでgitの設定は完了です!

さて長くなってきました、アドベントカレンダーの文量じゃない・・・・

Herokuへデプロイする

まずは、Herokuへのデプロイ時に使われるスクリプトをチェックします。
Procfileというところに記載されてるので見てみます。

$ cat Procfile
web: bin/hubot -a slack -n mikuri

a(アダプタ)が slack で、n(ネーム)が mikuri になっていれば大丈夫です。

Herokuへの登録

説明するときりがないので、参考URLをば。
→ http://qiita.com/Arashi/items/b2f2e01259238235e187

Herokuにアプリケーションをつくる

Herokuに登録して、loginできるようになっていたら、heroku login して、新しくアプリケーションを作ります。

$ heroku login
Enter your Heroku credentials.
Email: [登録したメールアドレス]
Password (typing will be hidden): [パスワード]
Authentication successful.

heroku create の後に名前をつけるとその名前で作られますので、指定してあげましょう!

$ heroku create mikuri
Creating app... done, ⬢ mikuri
https://mikuri.herokuapp.com/ | https://git.heroku.com/mikuri.git

最後にpushして完了です。

$ git push heroku master

Herokuの設定

Dyno

Dyno?とかいう設定を少しいじります。いじれって昔の人たちが言っているのでいじります。よくわかりません。

$ heroku ps:scale web=1

addon

hubotにとって必要な rediscloud のアドオンを入れます。
しかしながら、これはHerokuに魂(クレカの番号)を売らないと入れることができません・・・

ここは我慢して https://dashboard.heroku.com/account/billing で、登録しましょう。
たしか、あとで消すことできます。

$ heroku addons:add rediscloud

GitHubとの連携

このままでは、いちいちデプロイのたびに GitHub と Heroku にpushを送らねばならず面倒なので、
Github のリポジトリが書き換わったら、 Heroku のリポジトリも同期して変更されるよう設定します。

Herokuのwebページに行って、今作っているアプリケーションを開きます。
[ Deploy ] タブをクリックして、 Deployment method を GitHub に設定します。

スクリーンショット 2016-12-09 3.05.55.png

すると、 Connect to GitHub というものが開くので、先ほど作ったbotのリポジトリを検索して指定し、 connect を押します。

するとすると、 Automatic deploys というものが開くので、 Enable してあげます。

スクリーンショット 2016-12-09 3.12.54.png


これでHerokuへのデプロイと各種設定が完了しました!

SlackとHerokuを連携する

Slack側の設定

さて、ようやくSlackの登場です。
botを入れたいチームの管理画面から、アクセストークンを入手します。

今回はわざわざ「Room.303」というチームを作りました。

チームのメニューから、[ Apps & integrations ]を選択します。

スクリーンショット 2016-12-09 10.45.24.png

Hubotを検索して、インストールをします。

スクリーンショット 2016-12-09 10.47.15.png

ユーザー名(botの名前)を入力したりして、Add Hubot Integration します。

スクリーンショット 2016-12-09 10.49.00.png

Setup Instructions のページが開くので、

HUBOT_SLACK_TOKEN=@@@@@@@@@@@@@@@

をコピーします。

※ その下の Integration Settings をいじると、botのアイコンや表示名を設定することができますので、お好みでどうぞ!

Heroku側の設定

Heroku のコンフィグにAPI TOKENを設定してあげます。
コマンドの方法と、webページからの方法がありますが、今回はチャチャっとコマンドで。

以下のように入力していきます。
一番上が、先ほどコピーしたものです。(@は各自置き換えてください)

$ heroku config:set HUBOT_SLACK_TOKEN=@@@@@@@@@@@@@@@
$ heroku config:set HEROKU_URL='https://[slackのチーム名].herokuapp.com'
$ heroku config:set HUBOT_SLACK_TEAM='[slackのチーム名]'
$ heroku config:set HUBOT_SLACK_BOTNAME='[botの名前]'

※ slackのチーム名は、表示名ではなく、URLの http://****.slack.com の****部分のことです。

僕がやるとこうなります。

$ heroku config:set HUBOT_SLACK_TOKEN=@@@@@@@@@@@@@@@
$ heroku config:set HEROKU_URL='https://room303team.herokuapp.com'
$ heroku config:set HUBOT_SLACK_TEAM='room303team'
$ heroku config:set HUBOT_SLACK_BOTNAME='mikuri'

これでGoodです。

Slackのチームページに戻ると、mikuriさんが入室しています!

動作テスト

mikuriさんにDMを送ってみましょう。

スクリーンショット 2016-12-09 11.35.20.png

無事返事がかえってきました!!!

HUBOT_HEROKU_KEEPALIVE

無事にみくりさんを303号室に迎え入れました。
しかし!Heroku の Free プランでは一定時間アプリケーションに反応がないと、勝手にそのアプリを眠らせてしまいます。

なので、常に自分で自分をたたきつづけるようにせねばならないのですが、 Hubot はすばらしいことに hubot-heroku-keepalive という script がデフォルトで動作していて、一定時間ごとに自分にpingを送るようになっています。
これで眠らずに働き続けることができるんですね。

Hubot すごい。

Heroku の料金システムと睡眠時間


しかしながら、いろいろ Heroku にも変更があり、2015年?から、 Free プランは、1日6時間の Sleep 時間を必要とするようになってしまいました。

つまり、6時間はみくりさんを眠りにつかせてあげねばならないのです。(労基法に触れたのかな

<追記>(2016/12/12)-------------

2016年6月から、再度 Heroku の料金システムの改定があり、Free プランでは、1アカウントにつき月500時間のアプリケーション稼働時間が与えられ、クレカ登録をするとプラス500時間、月1000時間の稼働時間が与えられるという仕様になったようです。
参考記事

これは一つのアプリケーションにつきではなく、1アカウントにつきというところが重要です。

月1000時間であれば、1日約32時間与えられていることになるので、1つのbotのみ運用するなら24時間フル稼働させることができます。
ので、1つの bot を愛でて育てたい場合は、この後の「睡眠時間を作ってあげる処理」はしなくても大丈夫です!!(愛でるのに眠らせない。)

が、2つ以上の bot を運用する、あるいは他に運用しているアプリケーションがある場合は、1日32時間の労働時間をうまくアプリケーションに割り振り、休憩・睡眠時間をつくってあげねばなりません。

2つの bot を最大時間運用するのであれば、

  • 16時間 + 16時間 (8:00 - 24:00) -> 二つとも8時間睡眠
  • 17時間 + 15時間 (8:00 - 25:00) -> 7時間睡眠 + 9時間睡眠
  • 18時間 + 14時間 (8:00 - 26:00) -> 6時間睡眠 + 10時間睡眠

あたりが無難かと思います。
3つ以上の bot の Heroku 運用はになるとぶっちゃけこの料金プランでは厳しくなってしまいました。

とうとうバイトのシフト管理のようになってきたぞ・・・

★アカウント量産という手もあるので、今度実践してみます。書いたらここにリンク貼ります。

<追記終わり>-----------------

環境変数の設定

hubot-heroku-keepalive も、2015年の Heroku の変更に伴って、いくつか環境変数を設定することで、 bot に睡眠時間を設定してあげることができるようになりました。

これが公式リポジトリです、Readmeにいろいろ書いてあります。
https://github.com/hubot-scripts/hubot-heroku-keepalive


6時間半(自分を叩かなくなってから寝るまでの時間が30分ほどあるため)以上の時間が空くようにうまく起床時間と睡眠時間を設定してください。

上記の通り、6時間でなくてもかまわなくなりました。
全 bot の稼働時間が32時間に収まるよう、うまく睡眠時間を決めましょう。

大切なのは、睡眠時間の方に関しては、自分を叩かなくなってから寝るまでの時間が30分ほどあるということです。
つまり設定した HUBOT_HEROKU_SLEEP_TIME の30分後に睡眠します。お気をつけて!

タイムゾーンはAsia/Tokyoがいいと思います

$ heroku config:set HUBOT_HEROKU_WAKEUP_TIME=HH:MM
$ heroku config:set HUBOT_HEROKU_SLEEP_TIME=HH:MM
$ heroku config:set TZ='Asia/Tokyo'
$ heroku config:set HUBOT_HEROKU_KEEPALIVE_URL='https://[herokuのアプリケーション名(bot名)].herokuapp.com/'

僕がやるとこう

$ heroku config:set HUBOT_HEROKU_WAKEUP_TIME=8:00
$ heroku config:set HUBOT_HEROKU_SLEEP_TIME=24:00
$ heroku config:set TZ='Asia/Tokyo'
$ heroku config:set HUBOT_HEROKU_KEEPALIVE_URL='https://mikuri.herokuapp.com/'

(※この場合、24時に寝るのではなく、24:00に自分を叩くのをやめて、24時30分に睡眠します。)

しかしながらこれ、botが自分で自分を起こすことはできないんです・・・・
なので、目覚まし時計代わりに Heroku の addon 、 「Heroku Scheduler」を使って自動で起こしてあげます。

Heroku Schedulerの導入と設定

rediscloudと同じようにアドオンを導入します。

$ heroku addons:create scheduler:standard

導入したら、あとはWebブラウザの方から設定します。

$ heroku addons:open scheduler

スクリーンショット 2016-12-09 12.39.24.png

$ の右横の入力欄には以下を入力します。

curl ${HUBOT_HEROKU_KEEPALIVE_URL}heroku/keepalive

もしくは直書きで

curl https://[herokuのアプリケーション名(bot名)].herokuapp.com/heroku/keepalive

そうしたら、右下の NEXT DUE を設定します。
UTCで設定するので、先ほどの HUBOT_HEROKU_WAKEUP_TIME (起床時間)より -9時間 した時間を入力してください。
私の場合 8:00 なので、設定時間は 23:00 ですね。



おつかれさまでした、
これで、ようやくみくりさんと過ごすことができるようになりました!

おわりに

初心者がhubotを使ってHeroku上で動くSlack bot作ってみた話をしてみました。

予想を超えて長くなってしまったので、連載にします。
今回は導入編です。次回はみくりさんをいじくりまわすべく奮闘します。

「火曜はハグの日」を実装したい。

私は、KEEPALIVEあたりでだいぶつまづいた記憶があります。
1年ほど前はまだデフォルトでKEEPALIVEが動作していなかったんですよね確か。

無料で動かすためには、こういう細かいことを考えねばならないのです。。。

ではでは、駄文ながらここまでお付き合いありがとうございました。

皆さんもぜひhubotを使って、slackにbotを導入しましょう!たのしい!

次回→ 初心者がHubotを使ってHeroku上で動くSlack bot作ってみた(実践編)

参考サイト

http://qiita.com/bouzuya/items/2a200c9e8a45e2478bc2
http://qiita.com/acairojuni/items/dc4543aa5827d4c3211c
http://qiita.com/him0net/items/9e80dd53e1a9a4c33dd7
http://tooooomin.hatenablog.com/entry/2016/01/03/132937

http://qiita.com/tomomichi/items/7904dfcdabb7acc8a286