「初心者向け」GitHub運用⑤：Hubotを作ってみる

# この記事はこんな方向けです！
**細かいことは置いといて**
・GitHubの基本的な使い方を知りたい!
・GitHubでのチケットベース開発を知りたい！
・Slackと連携の取り方を知りたい！

そんな方への**手っ取り早いハウツーな記事**です。

[コードはこちら](https://github.com/practiceDev-GitHub/testHubot)


## この記事を読み終えますと、

**HubotをHeroku上での自動デプロイができるようになります。**

## いくつか記事を分けます

本記事では**「Hubotを使ってみよう〜Herokuデプロイまで」**についてです。

基礎
1. [OrganizationとTeamを作ってみる](https://qiita.com/kotaro_bayashi/items/dd70fbf14b8bf43143a9)
2. [Projectを作ってみる](https://qiita.com/kotaro_bayashi/items/aa62989350c4367caa60)
3. [Issueを作ってみる](https://qiita.com/kotaro_bayashi/items/36d10f030c5dfbaaed1c)
4. [他人を招待し、権限付与](https://qiita.com/drafts/76a7fd5e5b70b1d04183/edit)

応用
5. **Hubotを使ってみよう〜Herokuデプロイまで**
6. [HubotとSlackを連携](https://qiita.com/kotaro_bayashi/items/26ec3ff24a41fa942190)
 
# 1 Hubotとは

- GitHubは、イベント(Merge,Pull Request, Pushなど)が起きた時、Postリクエストを行うことができます。(webhook)
- Hubotは、そのリクエストを受け、リクエストの内容に応じて、処理を行うBotです。
例えば、誰かがPull Requestをすれば、HubotがSlackのチャネルにコメントする。など

## 2. Hubotをインストール

[詳細はこちら](https://hubot.github.com/docs/)

- Hubotを作成

```shell
mkdir testHub
cd testHub
npm install -g yo generator-hubot
yo hubot
```
※すでに、globalインストール済みなら、「yo hubot]

- 質問に答える

```shell
Owner test <1test@gmail.com>
Bot name testBot
Description A simple helpful robot for your Company
Bot adapter **slack**
```


## 3 Hubotとあいさつをしてみましょう！

**あいさつができるようにしてみます**

- testHubot/scripts直下に、「hello.scripts」を作成
- 以下のようにコードを記入

```coffee.scripts/hello.coffee
module.exports = (robot) ->
  robot.hear /おはよう/i, (res) ->
    res.reply "おはよう"
  
  robot.hear /こんにちは/i, (res) ->
    res.reply "こんにちは"

  robot.hear /こんばんは/i, (res) ->
    res.reply "こんばんは"
```

res.sendという書き方もありますが、**slack上で**
sendの場合は返信相手が指定されず、replyなら返信相手が指定されます。

- hubotを起動

```shell
./bin/hubot
おはよう
testBot> Shell:おはよう
こんにちは
testBot> Shell:こんにちは
こんばんは
testBot> Shell:こんばんは
```

**さて、ここまでHubot自体はできました！
次はこれをHerokuにデプロイし、ネット上に上げてみましょう！
次の記事でSlackとの連携をご紹介します。**

## Heroku上でアプリを作成

ここら先はHerokへの会員登録し、クレジットカードの登録も必要になります。
なぜクレジットカード登録が必要かといいますと、Heroku上の拡張機能(addon)を使うためです。

**ご紹介する実装方法では費用がかかることはないので、安心してください**
※すでにHeroku上でアプリを起動中でしたら、費用がかかるかもしれません。

[登録はこちら]("https://signup.heroku.com/")
[登録方法はこちら](https://wp.developapp.net/?p=5250)

**アプリを作成**

- Herokuにログインし、「New」をクリック 
※(https://dashboard.heroku.com/apps) ←に「New」ボタンがあります。

- 「Create New App」をクリック　
![toNewApp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/53196700-2c31-4d39-870b-e00140945bbb.jpeg)

- App nameを記入し、「create App」をクリック ※他はデフォルトのまま触らずに。

**拡張機能(addon)を設定します**

- 「Resources」をクリック      
![toResources.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/db870045-d468-a44d-c5b4-c56b9afea460.jpeg)

- 「Papertrail」と記入し、選択
- デフォルトのまま、「Provision」をクリック
![find one of Addons.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/da2bb620-a2e9-3848-22d1-63d4fbe3fa7f.jpeg)

![paper.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/0026b339-c35a-f008-24f0-fac7dca733ed.jpeg)

### 補足 Papertrailについて

これは、アプリのログを確認するための拡張機能です。
後ほど、Heroku上にデプロイしたHubotがちゃんと動いているのか確認するために、
今回はこの拡張機能を設定しました。

**後ほどGitHubとSlackを連携できるように設定します。**

## GitHubのレポジトリ作成

- 作成したOrganizationにレポジトリを作成　※[詳しくはこちら](https://qiita.com/kotaro_bayashi/items/dd70fbf14b8bf43143a9)
- ここまでに作成した「testHubot」ディレクトリをレポジトリにpush

```shell
cd testHubot
git init
git add .
git commit -m "first commit"
git remote add origin <レポジトリ>
git push origin master
```
**HerokuがGitHubにアクセスできるうように、認証する**
- 以下へ飛び
https://github.com/settings/applications
- アプリ一覧から、「Heroku Dashboard」を選択
- 対象のorganizationの「grant」をクリック
![grantHeroku.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/603959a9-9b8f-1155-8a8a-dc07c7d13c9e.jpeg)


## GitHubへのPushから、Herokuへの自動デプロイ

**Herokuから、連携するGitHubのレポジトリを選ぶ**

- 「Deploy」をクリック
![toDeploy.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/57a21d74-ba1f-736b-edc2-fb7b24a5b47d.jpeg)

- Deployment method は「GitHub」を選択
- 該当するOrganizationを選択肢、該当するレポジリ名を記入し、「Search」をクリック
- 「Connect」をクリック

![connect Repo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/9865e648-7031-5bb9-81d2-9fb178a33a0b.jpeg)

**一度、手動デプロイしてみましょう！**

- 「Deploy Branch」をクリック
![click Deploy.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/f067e1d2-98c3-88a2-f149-5fe7fb463d82.jpeg)

**結果を確認してみましょう**

- 「Resources」画面を開く

先ほどまでなかった 「web bin/hubot -a slack」というメッセージが出てますね。
これは、**デプロイした直後に起動するProcfile**の内の記述です。（お手元のProcfileを確認してみてください。
これで、デプロイはできたということが確認できました。

![app run.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/ae95f8b4-b943-55ff-b618-7e74a97a0baf.jpeg)

**念のためログを確認**

- 同じ画面に表示されている「Papertrail」をクリック

```shell
Aug 12 22:31:31 testhubot11 app/api Deploy 989ad246 by user test@gmail.com
Aug 12 22:31:31 testhubot11 app/api Release v9 created by user test@gmail.com
Aug 12 22:31:31 testhubot11 app/api Build succeeded
Aug 12 22:31:33 testhubot11 heroku/web.1 Starting process with command `bin/hubot -a slack`
Aug 12 22:31:38 testhubot11 app/web.1 [Thu Aug 13 2020 05:31:38 GMT+0000 (Coordinated Universal Time)] INFO hubot-slack adapter v4.8.0
Aug 12 22:31:38 testhubot11 app/web.1 warn: SlackDataStore is deprecated and will be removed in the next major version. See project documentation for a migration guide.
Aug 12 22:31:38 testhubot11 app/web.1 warn: SlackDataStore is deprecated and will be removed in the next major version. See project documentation for a migration guide.
```
「app/api Build succeeded」と書いてますね。 ※Buildは、ソースコードをDeployできる形にする工程です。 Buildが失敗すると、Deployはできません。

**注告(warn)が出ていますね。**

エラーを読みますと、次のメジャーバージョンで、SlackDataStoreは削除されるとのこと。
念のため[hubot-slack](https://www.npmjs.com/package/hubot-slack)で確認すると、最新はバージョン4.8です。
ただ、手元のhubot-slackも4.8ですので、このまま進めます。

### 自動デプロイを設定

- デフォルトのままで「Enable Automatic Deploys」をクリック
![auto deployment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534534/175d0b09-9cd8-fa35-f768-d31a4c7bbf28.jpeg)


**一度、ローカルのHubotのディレクトリ内のファイルを適当に編集してみましょう。**

例えば、以下のコードを追加

```coffeescript:scripts/hello.coffe
  robot.hear /test/i, (res) ->
    res.reply "test"
```

### アプリのログを確認してみましょう

```shell

Aug 12 22:52:06 testhubot11 app/api Build succeeded
Aug 12 22:52:06 testhubot11 heroku/web.1 Process exited with status 0
Aug 12 22:52:07 testhubot11 heroku/web.1 Starting process with command `bin/hubot -a slack`
```

**お！ビルドされ、Profileが実行されてますね！**

## まとめ

これで、GitHubからHerokuへHubotをデプロイができました。
次回は、Heroku上のHubotとSlackと連携させ、Slack上での会話ができるようにしましょう！