2017年2月11日土曜日

Slack と HackerNews を連携してみた

概要

slack-hn という Hubot アプリがあったのでこれを使って Slack と HackerNews を連携してみたいと思います

環境

  • Slack 2016/06/27 時点
  • CentOS 6.7 64bit
  • heroku-toolbelt 3.43.4

事前に必要なアカウント

  • Slack
  • Heroku

また Slack のドメインは適当に「test」というドメインを使って話を進めます
チャネル名は「#test_channel」とします

対象のチャネルを作成する

すでに対象のチャネルがある場合は新規に作成する必要はありません
今回は HackerNews を流す専用のチャネル (#test_chnnel) を作成したとして話を進めます

Incoming WebHooks の作成

まずは Incoming WebHooks を作成します
Incoming WebHooks は簡単に言ってしまえば Slack に通知するための機能です

https://test.slack.com/apps/manage にアクセスします
このページ内の「Custom Integrations」を選択します
すると「Incoming WebHooks」という欄があるのでこれを選択します
slack_with_hn_select_iw.png

選択するとこれまでに作成された Incoming WebHooks のリストが表示されると思います
今回は新規で作成するので「Add Configuration」を選択します
slack_with_hn_select_adding_iw.png

すると Incomming WebHooks を作成する画面になります
「Post to Channel」で HackerNews を流す対象のチャネルを選択します
選択したら「Add Incoming WebHooks integration」をクリックして Incoming WebHook を作成します
slack_with_hn_input_channel.png

作成が完了すると設定画面に移行します
ここで大事なのは「Webhook URL」をコピーしておくことです
slack_with_hn_copy_webhook_url.png

あとは「Customize Name」「Customize Icon」等を適宜変更すれば OK です
設定できたら「Save Settings」をクリックして設定を完了しましょう

Slash Commnds の作成

次に Slash Commands を作成します
Incoming WebHooks の時と同様に https://test.slack.com/apps/manage にアクセスします
このページ内の「Slash Commands」を選択します
slack_with_hn_select_sc.png

たぶんこれまで作成された Slash Commands がリストで表示されると思います
今回は新規で作成するので「Add Configuration」を選択します
slack_with_hn_select_adding_sc.png

すると Slash Commands を作成する画面になります
Choose a Command に「/hn」と入力し Add Slash Command Integration で Slash Command を作成しましょう
すると設定画面に移動するので Integration Settings で以下の部分を設定してください
slack_with_hn_input_sc_info.png

URL に入力した http://test-slack-hn.herokuapp.com/hn の部分はあとで Heroku にアプリをデプロイする URL になります

あとは「Customize Name」「Customize Icon」「Show this command in the autocomplete list」あたりを適当に変更しましょう
Save Integration をクリックし Slash Command の作成を完了してください

Heroku へのアプリデプロイ

先ほど作成した Slash Command に設定した URL にデプロイする Heroku アプリを作成します
基本的にはすでにあるアプリを自分の Heroku アカウントにデプロイして完了です

https://github.com/karan/slack-hn の下の方にある「Deploy to Heroku」をクリックします
slack_with_hn_deploy_app.png

すると自分の Heroku アカウント配下に slack-hn というアプリをデプロイすることができます
( あらかじめブラウザで Heroku にログインしておくといいと思います )

アプリの設定画面に移動するので「App Name」と「Runtime Selection」を設定すれば OK です
設定したら「Deploy for free」をクリックしてデプロイします
slack_with_hn_configuration_app.png
App Name は Heroku の世界でユニークなので被ってしまう可能性があります
被ってしまった場合は適宜変更し、設定済みの Slash Command の URL の部分も変更してください

問題なくデプロイできれば完了です
slack_with_hn_completed_deploy.png

あとはデプロイしたアプリに Incoming WebHook 時に取得した URL をアプリに設定してあげます
ターミナルで heroku-toolbelt を使って以下のコマンドを実行します

heroku config:set SLACK_WEBHOOK_URL="https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxx" --app  test-slack-hn

事前に heroku login でログインしておくといいと思います
これで WebHook 用の URL をアプリに設定することができました

動作確認

実際に動作するか確認してみましょう
対象のチャネルに移動してコメント欄に「/hn」と入力してみると HackerNews の一覧が表示されると思います
slack_with_hn_result.png

最後に

如何でしたでしょうか
Incoming WebHook と Slash Command という Slack のアプリを組み合わせて HackerNews の情報を取得してみました
基本的に Incoming WebHook を使った通知系はこれの応用なので、覚えておいて損はないと思います

あとはこういったニュース系のやつは cron を使って定期的に通知したいという要望があると思うので cron に対応してもいいかなと思います

その辺もおいおい紹介できればなと思います

Tips

Incoming WebHooks も Slash Commands も該当の URL (https://test.slack.com/apps/manage) にまだ存在しない場合は https://test.slack.com/apps/ から「Slash Commands」で検索して、そこから「Add Configuration」を実行すれば OK です
slack_with_hn_search_slash_commands.png

参考サイト

0 件のコメント:

コメントを投稿