LoginSignup
12
5

More than 5 years have passed since last update.

初心者がHubot × Herokuで、twitter上に投稿された癒やし画像をslackに流してみた

Last updated at Posted at 2017-01-03

はじめに

卒業後現在も活動を続けている、大学のサークルにslackを年末(勝手に)導入しました。twitterと連携して、自分のツイートや特定の単語を含むツイートをslack上に流せる事は噂で聞いていたので、ちょうどいい機会だし試しにやってみました。

せっかくqiita書くなら、為になる(?)ネタでチャレンジしようと思い「電車遅延に関連したツイートをslackに流す」をやろうと思ったのですが、既出ネタだったので「癒やし画像をslackに流す」で挑みます(笑

ちなみに自分はHubotもHerokuも使ったことない超初心者です〜。

参考になったサイト

初心者がHubotを使ってHeroku上で動くSlack bot作ってみた(導入編)
Heroku+HubotでTwitter検索結果をSlackに流す

導入

Homebrew経由で、npmをインストールします。

$ brew install npm

npm経由で、Yeomanhubot-generatorをインストールします。
globalじゃなくてもいいんですけど、パスの指定が面倒なので、今回はglobalにします。

$ npm install -g yo generator-hubot

適当なディレクトリを作り、hubotを作成します。

$ mkdir hubot_for_slack
$ cd hubot_for_slack
$ yo hubot

1.png

こんな感じでHUBOT君との対話が始まるので、適宜答えてください。
Bot adapterと聞かれる所はslackと入力してください。

ローカル上でhubotの動作確認をする

まずは、ローカル上でhubotを起動し、検索したい単語を設定しツイートをslackに流してみましょう。

hubotの起動

早速ですが、起動します。

$ ./bin/hubot

2.png

おやおや、なんかエラーが出ました。
まず、hubot-scripts.jsonが空だから削除しろって言われているので削除します。
次に、hubot-heroku-alive included, but missing HUBOT_HEROKU_KEEPALIVE_URLというエラーがありますが、hubot-heroku-aliveの設定が出来ていなくて怒られていますね。

詳しくは後述するので、一旦external-scripts.jsonをエディタで開いて、hubot-heroku-aliveを消しましょう。

3.png

もういちど、hubotを起動します。

$ ./bin/hubot

エラーは起きなくなりました。
今回作ったhubotの名前はhubot-for-slackなので、hubot-for-slack pingと打ちましょう。
PONGが帰ってきたら動作確認完了なので、exitで抜けます。

4.png

Twitterとの連携準備

さて、指定した単語を含むツイートをHubotが取ってくれる、便利なライブラリが既に存在しているので、それをインストールします。

$ npm install --save hubot-twitter-search

次に、eternal-scripts.jsonの配列内に"hubot-twitter-search"を追加します。

さて、このライブラリを利用するために、設定しなければいけない環境変数が6つ存在します。

HUBOT_TWITTER_CONSUMER_KEY ... twitterのConsumer Key
HUBOT_TWITTER_CONSUMER_SECRET ... twitterのConsumer Secret
HUBOT_TWITTER_ACCESS_TOKEN_KEY ... twitterのAccess Token
HUBOT_TWITTER_ACCESS_TOKEN_SECRET ... twitterのAccess Token Secret
HUBOT_TWITTER_MENTION_QUERY ... 検索するキーワード
HUBOT_TWITTER_MENTION_ROOM ... slackに流すチャンネル名

上記4つは、twitterから取得しなければなりません。
ということで、まずはTwitter Developersにアクセスします。こちら

4.png

ページ下部のManage my appsをクリック。
遷移先のページの右上にCreate New Appがあるのでクリックし、適当に入力してください。

「Keys and Access Tokens」タブの、Consumer KeyConsumer SecretAccess TokenAccess Token Secretに表示されている文字列を控えておきます。

Slackとの連携準備

さて、slackのために設定する環境変数があります。

HUBOT_SLACK_TOKEN ... slackのAPI Token

slackとのトークンを取得しましょう。
まずは、連携したいチャンネル名を右クリックし、Add an app or integrationをクリック。

8.png

Hubotと入力します。

9.png

hubotに名前をつけてあげて作成。

API Tokenに記載された文字列を控えておきます。

最後に、そのチャンネルにHubotをinviteしておきます。

12.png

slackに流してみる

これで必要な情報は取得したので、環境変数にセットして、ローカル上でHubotを起動します。
動作確認をする上で、Redisが必要なので、インストールします。

homebrew install redis

インストール完了後、起動します。

$ redis-server

先程控えた情報を環境変数にセットします。が、ターミナルから1つ1つ環境変数をセットするのも面倒くさいし、ターミナルを閉じるたびにセットし直さないといけないので、今回は簡単なシェルスクリプトを実装してみました。

#!/bin/sh

export HUBOT_TWITTER_CONSUMER_KEY='twitter-consumer-key'
export HUBOT_TWITTER_CONSUMER_SECRET='twitter-consumer-secret'
export HUBOT_TWITTER_ACCESS_TOKEN_KEY='twitter-access-token'
export HUBOT_TWITTER_ACCESS_TOKEN_SECRET='twitter-access-token-secret'
export HUBOT_TWITTER_MENTION_QUERY='検索したい単語'
export HUBOT_TWITTER_MENTION_ROOM='slack-channel-name'
export HUBOT_SLACK_TOKEN='slack-token'

bin/hubot -a slack

これをrun.shとします。
ちなみに、githubにcommitしたい場合は、gitignoreされている.conf等を作り、そこにアクセストークン等を記載し、シェル内で環境変数を読み込むようにしましょう。

今回はHUBOT_TWITTER_MENTION_QUERY動物と入力して、動作確認をします。
では、シェルを実行

$ sh run.sh

13.png

問題は起きて無さそうですね。ではslackを確認。

slackに動物ツイートが流れております。動作は問題ないみたいですね。
では、hubotやredisを一旦止めます。

最後に、先程削除した"hubot-heroku-keepalive"external-scriptsに書き加えましょう!

heroku上で動作確認

現状だと、ローカルPCがシェルを実行している時のみしか動かないので、herokuで運用してみましょう。
アカウント登録していない方はアカウント登録しましょう。

heroku toolbeltをインストール

Heroku用コマンドラインツール等が詰まったアプリケーションです。インストールはこちら

アカウント認証

アカウント認証をします。

$ heroku login

15.png

herokuにデプロイ

herokuは、Gitのリポジトリをそのままデプロイ出来るので、作ったものをローカルリポジトリにcommitしましょう。

$ git init
$ git add .
$ git commit -m "twitter bot for slack"

herokuに新しいアプリケーションを作成。

$ heroku create <application name>

16.png

redisをherokuに追加

先程登場しましたが、HubotはRedisを使うので、addon追加します。

$ heroku addons:apps redistogo

(注)クレジットカードの情報を入力しないと、下記のメッセージが表示されaddon出来ないです。

Please verify your account to install this add-on plan

環境変数をherokuにセットする

先程シェルで実行した環境変数のセットを、herokuでも行います。先程のローカルでの動作確認と違い、PCをシャットダウンした後にセットし直す必要とかないので、シェルは書かずに直接ターミナルからセットします。

$ heroku config:set HUBOT_TWITTER_CONSUMER_KEY='twitter-consumer-key'
$ heroku config:set HUBOT_TWITTER_CONSUMER_SECRET='twitter-consumer-secret'
$ heroku config:set HUBOT_TWITTER_ACCESS_TOKEN_KEY='twitter-access-token'
$ heroku config:set HUBOT_TWITTER_ACCESS_TOKEN_SECRET='twitter-access-token-secret'
$ heroku config:set HUBOT_TWITTER_MENTION_QUERY='検索したい単語'
$ heroku config:set HUBOT_TWITTER_MENTION_ROOM='slack-channel-name'
$ heroku config:set HUBOT_SLACK_TOKEN='slack-token'

これに加えて更に2点設定する必要があります。redistogohubot-heroku-keepaliveです。

先程addonしたRedis To Goの具体的なURLを環境変数としてセットする必要があり、Herokuのアプリダッシュボードから参照することができます。
herokuコマンドが使えるのなら、下記コマンドで参照せずにセット出来ます。初見の自分はちょっと探すのに手間取ってしまったので、おとなしくコマンドから行きましょう。

$ heroku config:set HUBOT_HEROKU_KEEPALIVE_URL=$(heroku apps:info -s  | grep web_url | cut -d= -f2)

無料でheroku運用するための設定

herokuでは、様々な課金プランと無料プランがありますが、無料プランには、一定期間アクセスがないと自動的に落とすという仕様があります。
なので、hubot-heroku-keepaliveを利用し、定期的に必ず自分自身にアクセスすることで24時間アプリケーションを落とさずに済むという手段があります。

しかし2016年6月に、無料プランは「24時間の内6時間は落とさないといけない」制約が新たに加わりました。
結果、24時間無料で稼働する事は出来無さそうなので、Hubotの稼働開始時間・稼働終了時間を環境変数として設定します。

$ heroku config:set HUBOT_HEROKU_WAKEUP_TIME=HH:MM
$ heroku config:set HUBOT_HEROKU_SLEEP_TIME=HH:MM
$ heroku config:set TZ='Asia/Tokyo'

(注:開始時間・終了時間を6時間以上開けるように設定してください)

Heroku Schedulerをaddonします。

$ heroku addons:create scheduler:standard

以下のコマンドを叩くと、ブラウザ上で設定が出来ます。

$ heroku addons:open scheduler

開始時間を入力します。世界協定時刻(UTC)で設定する必要があるので-9時間してください

18.png

コマンドを入力する箇所があるので、以下を入力します。

curl ${HUBOT_HEROKU_KEEPALIVE_URL}heroku/keepalive

HUBOT_TWITTER_MENTION_QUERYの設定

twitterは、言語・ネガティブポジティブ・場所・日時等で絞ることができる高度な検索機能を備えてます。
今回は画像ツイートだけを流したいので、動物 filter:imagesで試しに動かしてみた所、filter:imagesが検索オプションではなく文字列と認識されてしまい、失敗。。。
hubot-twitter-searchは、検索オプションを利用できなかったので断念。

今回は安直に「萌え画像」でセットしました。

herokuにデプロイ

$ git push heroku master

slackにて確認

では該当チャンネルで動作されているかどうか確認します。

18.png

た、確かに動作は問題ないですね、たまに画像とは関係ないツイートも流れてしまいますが・・・

まとめ

思ったよりも癒やされませんでしたが、コード書かずに設定するだけで実現できたのはとても楽でした。
(無料プランでは現実的ではないですが)地震情報をslackに流したり、テレビ番組やアニメ実況をハッシュタグから拾ってきてslackに流すことも出来るので、いろいろやれるなーと思いました。twitterで見れば済m(cry

今回できなかった高度な検索機能オプションは、Hubotが拾えるようなライブラリを今度作ってみようかなと思います。

ちなみに今回作ってみたHubotは、便利なシェルと共にgithub上に上げました。こちら

12
5
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
12
5