Tech Sketch Bucket of Technical Chips by TIS Inc.

チーム開発を円滑にするチャット環境づくり ~IdobataとHubotの連携~

Pocket

前回の記事ではHubotのインストール、基本的な使い方やScriptの作成、Herokuへのデプロイの方法を紹介しました。
本記事ではIdobataというチャットサービスとHubot、外部サービスを連携し、チーム開発を円滑にする環境を構築していきます。

まずは導入後の開発環境の全体図を示します。最終的にIdobataでGitHub、Travis CI、New Relicなどのサービスからの通知を受け取り、Idobata上でコマンドを実行することでHubotを通じて外部サービスの情報を表示することが出来るようになります。

architecture.png

今回の環境は、Webアプリケーションをチームで開発するシーンを想定して構築してみました。(記事中では1人ですが...)
Webアプリケーションは、Sinatraで作成したアプリケーションをHerokuにデプロイしています。また、前回と同様、HubotはHerokuにデプロイしています。

Idobataの利用

チャットサービスは前回はHipChatを使いましたが、今回はIdobataを利用しています。Idobataは株式会社永和システムマネジメントが開発したグループチャットサービスで、先日正式リリースとなりHubotとの連携やiOSアプリが追加されました。

Idobataは他サービスのWebHookを追加することができ、通知を受け取ることが出来ます。現在Hookを追加出来るサービスは以下の通りです。

この中から、Github、Heroku、New Relic、Travis CIのWebHookを利用しました。

WebHookの追加は、追加したいRoomのROOM SETTINGSから行います。

room_settings.png

+Add a HookからHookを追加していきます。

add_hook.png

WebHookの設定や、どのように通知されるのかについて、"Hello world!"と表示するサンプルWebアプリケーションの作成を通じて説明していきます。

サンプルアプリケーションの作成

サンプルアプリケーションを作成していきます。サンプルアプリケーションは、アクセスすると"Hello World!"と表示するだけの簡単なものです。

まずは、GitHubでリポジトリを作成し、cloneします。

次に以下の通りGemfileを作成し、

bundle installします。

次に"Hello world!"と表示するルートを作成していきますが、その前にテストの設定とテストコードを作成しておきます。テスティングフレームワークはrspecを利用します。

テスト用のディレクトリを作成し、テストコードを書いていきます。

テストコードが書き終わったらテストを実行し、失敗することを確認します。この時点ではまだテスト対象が無いので、エラーになります。

次にテストが通る実装を書いていきます。

再度テストを実行し、テストが通ることを確認します。

ブラウザで表示確認もしておきます。localhost:4567にアクセスすると、"Hello world!"と表示されることが確認できると思います。

hello_world.png

ここまで来たらコミットしてGitHubにpushしてしまいましょう。
と、その前にIdobataでWebHookの設定をしておきます。

GitHubとTravis CIのWebHook設定

まずはGitHubの設定。

github_hook.png

正しく設定されると以下の様に通知が行われます。

github_configure_success.png

以下はTravis CIを追加する際の設定画面です。

travis_hook.png

記述にある通り .travis.yml を作成します。webhooksの値は、IdobataでEndpoint URLを確認してください。

ではコミットしてGitHubにpushします。

Githubにpushされると、Idobataに通知が行われます。

github_push.png

Travisからもテストが通ったと通知されます。

travis_fixed.png

次にGitHubでissueを作ってみます。

github_issue.png

すると、以下のようにissueが作成されたと通知されます。

github_issue_notification.png

では、このissueに対応しましょう。

pushとissueがクローズされた通知が届きます。

github_issue_close_notification.png

おっと、テストコードを修正するのを忘れていました。

travis_failed.png

テストコードを先に修正し、失敗することを確認してからプロダクトコードを修正しなければいけませんね。
テストコード修正用のissueを作成し、修正していきます。

github_issue2.png

テストコードを修正し、テストが通ることを確認してからコミット、pushを行います。

push、issueのクローズ、Travisの通知が届きます。

github_issue_close_travis_fixed.png

HerokuのWebHook設定

修正が完了したので、ここまでの内容でHerokuへデプロイすることにします。
まずはProcfileを作ります。

次にHerokuアプリを作成し、環境変数を設定します。

WebHookを利用する為にHerokuにアドオンを追加する際のコマンドは、IdobataでHerokuのWebHookを追加した際に表示されます。

heroku_hook.png

設定が完了したらHerokuにデプロイし、表示を確認します。

Hello World!と表示されたでしょうか。また、HerokuにデプロイされたとIdobataに通知されたと思います。

heroku_deploy_notification.png

New RelicのWebHook設定

次に、デプロイされたアプリケーションのパフォーマンス監視を行います。パフォーマンス監視にはNew Relicを利用します。New Relicを利用することで、とても簡単に様々なパフォーマンスに関する統計情報を確認することが出来ます。

newrelic.png

New RelicにはHerokuのアドオンがあるので、アドオンを利用します。

次に、今回のアプリケーションで利用している言語はRubyなので、Ruby用の設定を行っていきます。Ruby用の設定ではライセンスキーを取得し、New Relic用のgemのインストール、設定ファイルの配置を行います。

newrelic_setup.png

app.rbからnewrelic_rpmを読み込むように修正します。

ダウンロードした newrelic.yml は、configディレクトリ配下に配置します。

再度Herokuにデプロイします。

デプロイが完了すると、デプロイしたアプリケーションのダッシュボードを見ることができるようになります。
WebHookの設定は Account settings > Integrations > Alerting notificationsから行います。

newrelic_webhook_settings.png

設定が完了すると、New Relicからテスト通知が行われます。

newrelic_test_notification.png

実際は、エラーが発生したり、CPU使用率やディスク使用率が設定した値を上回った際に通知が行われます。

New Relic自体で確認できる監視画面は以下になります。他にも様々な設定項目や画面があるので是非利用してみてください。

newrelic_monitoring_overview.png

WebHookとは関係無いですが、追加で死活監視の設定もしておきます。Herokuにデプロイしたアプリケーションは一定時間以上リクエストが無いとアイドリング状態になってしまうのですが、New Relicによる死活監視を設定しておくと1分に1回pingを行ってくれ、アイドリング状態にならず便利です。

newrelic_availability_monitoring.png

ここまでサービスの状態変更を契機に通知を行うような設定をしてきましたが、以下ではこちらから情報を取得する方法を紹介します。

Hubot Scriptを追加し、外部サービスから情報を取得する

Hubot Scrioptを追加し、今回設定したWebHookで利用しているサービスの情報を取得してみます。
また、HubotはHerokuにデプロイされているものとして進めていきます。HubotのHerokuへのデプロイ方法は前回記事をご参照ください。

IdobataにHubotを参加させる

前回記事からの差分として、HubotをIdobataに参加させる方法について説明します。手順はidobata/hubot-idobataを参考にしました。

Hubotは作成済かつHerokuで動いている状態が前提ですので、3番から行います。

必要なライブラリをインストールし、

IdobataにBotを追加します。

idobata_add_hubot.png

追加した際に表示されるAPI Tokenを環境変数に追加します。

adapterをhipchatからidobataに変更します。

これでIdobataからHubotのコマンドを実行することが出来るようになりました。

idobata_hubot_ping.png

GitHubのアクティビティを表示

まずはGitHub上のリポジトリのアクティビティを取得してみます。取得には以下のスクリプトを利用しました。

記事のスペースの関係上、ローカル環境での動作確認は省略しています。ローカル環境で動作確認する場合は、各自の環境の環境変数に必要な値を追加してください。

Herokuへのデプロイが完了すると、以下のコマンドが追加され、Idobataから実行できるようになります。

hubot_github_activity.png

GitHubのissueを表示

以下のスクリプトを利用します。

今回は依存するライブラリがあるので、合わせてインストールを行います。

issueのステータスがopenでないと表示されないので、新しいissueを登録し、コマンドを実行してみます。

追加されたコマンドは以下の通りです。

コマンドを実行すると、issueが表示されます。ユーザ、リポジトリを指定しての表示や、表示件数の上限の指定なども可能です。

hubot_show_issue.png

また、以下のスクリプトを合わせて利用すると、#nnnrepo#nnnの形式がコメントに含まれていた場合に、自動的にissueのリンクを表示してくれるので便利です。

hubot_github_issue_link.png

Travis CIのビルドステータスを表示

以下のスクリプトを利用します。

以下のコマンドが追加されました。

コマンドを実行すると、Travis CIのビルド結果が返ってきます。

hubot_travis.png

New Relicのステータスを表示

以下のスクリプトを利用しようとしたのですがAPIバージョンが古く利用できなかった為、

新しいバージョンのAPIに対応したコードを書いてみました。applications/showにしか対応していませんが...。他のAPIを利用できるように整えてプルリクを送ろうかと思います。

環境変数は以下の2つを設定します。

API keyは以下から確認します。
Account settings > Integrations > Data sharing > API access

newrelic_api_key.png

New RelicのURLは以下のような形式になっているので、APP_IDはURLから判断します。

スクリプトを追加し、Herokuにデプロイすると利用可能になります。

コマンドは以下の形式です。

実行すると、Herokuにデプロイしたアプリケーションのステータスが表示されます。

hubot_newrelic.png

ネコの画像を表示する(おまけ)

pugmeコマンドに対抗し、The Cat APIを利用してネコの画像を表示するHubot Scriptを作成してみました。

npmのモジュールとして公開してありますので、npmを使ってインストールします。
スクリプトを追加した際にexternal-script.jsonに追記することを忘れないようにしてください。

スクリプトを追加すると以下のコマンドが追加されます。

実行してみます。

hubot_cat_bomb.png

これで殺伐としたチャットルームになっていても、みんな笑顔になりますね!

まとめ

今回構築した環境のように開発で利用している各サービスからの通知や情報の取得をチャットサービスに集中することで、チャットを見れば情報、コンテキストの共有ができるようになるというメリットがあります。

また、利用したツールは簡単に導入することができ、無料から利用できるので、スタートアップや小さなチームで試すのに向いているのではないでしょうか。今回は利用しませんでしたが、JenkinsやJIRA、Redmineなどのツールと連携することも可能ですし、公開されているスクリプトや、独自のスクリプトを作成することで様々なサービスとの連携が可能になります。まずは小さい範囲で始めてみて、徐々に自分たち好みの環境に育ててみてはいかがでしょうか。

エンジニア採用中!私たちと一緒に働いてみませんか?