Hubot(Slack-bot)開発環境の構築[WSL環境]


各種パッケージのインストールには`yarn`を用いますので、
この記事を参考にして下さる方の中に、
インストールがまだの方がいれば [こちら >>][yarn]


#はじめに
`wsl`環境に`Hubot`開発環境を構築します。

おもに、備忘録として投稿主が活用する予定です。

#環境
`wsl`上に構築していきます。

```
Editor: VSCode
Shell : bash version 4.4.20
yarn  : v1.21.1
```

#目次
1. Yeomanの導入[ >>](#1yeomanの導入)
2. generator-hubot-yarnの導入[ >>](#2generator-hubot-yarnの導入)
3. CoffeeScriptの導入[ >>](#3coffeescriptの導入)
4. プロジェクトを作成[ >>](#4プロジェクトを作成)
5. ボットの動きを実装[ >>](#5ボットの動きを実装)
6. コンソールで試走[ >>](#6コンソールで試走)
7. Slack上で試走[ >>](#7slack上で試走)

#1.Yeomanの導入
Googleさんが開発されたジェネレータをインストールします。
開発用のひな型を対話的な処理で作成できます。

```bash:wsl
$ yarn global add yo@3.0.0
yarn global v1.21.1
[1/4] Resolving packages...
(中略...)
success Installed "yo@3.0.0" with binaries:
      - yo
      - yo-complete
Done in 110.73s.
```
一応バージョン確認

```bash:wsl
$ yo --version
3.0.0
```
無事インストールができていました。

#2.generator-hubot-yarnの導入
今回私は、<font color=#CC99FF>yarn</font>を使っています。(というかwslにyarnしか導入していない)

<font color=#66CC00>generator-hubot</font>というものもありこれは内部で<font color=#66CC00>npm</font>を用います。
<font color=#CC99FF>yarn</font>は内部的に<font color=#66CC00>npm</font>を行ってくれていますが、
<font color=#CC99FF>**generator-hubot-yarn**</font>という<font color=#66CC00>generator-hubot</font>を
<font color=#CC99FF>yarn</font>ユーザ向けに拡張してくれているものがあるので、
こちらを用いていこうと思います。

以下のコマンドを実行します

```bash:wsl
$ yarn global add generator-hubot-yarn
yarn global v1.21.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
warning "generator-hubot-yarn@0.9.6" has no binaries
Done in 8.57s.
```

> Done in 8.57s.

でインストール完了です。

#3.CoffeeScriptの導入
バージョンなど特にこだわりがなければ、
以下のコマンドを実行します。

```bash:wsl
$ yarn global add coffeescript@1.12.7
yarn global v1.21.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "coffeescript@1.12.7" with binaries:
      - coffee
      - cake
Done in 10.69s.
```
> Done in 10.69s.

でインストール完了です。

#4.プロジェクトを作成
今回ボットちゃんの名前を決めます。
わたしは`wetter`とします。
お好きな名前をお付け下さい！

```bash:wsl
$ mkdir wetter
$ cd wetter/
```
以降、`wetter`ディレクトリで作業を行います。

---
`yo`コマンドで`hubot`の作成を対話的に行っていきます。
`--adapter=slack`でSlackのボット作成であることを示しています。

```bash:wetter
$ yo hubot-yarn --adapter=slack
(前略-ロボットが表示されます)
? Owner (yosse95ai <Qiita@qiita.com>) Run-async wrapped function (sync) returned a promise but async() callback must be executed to resolve.
```
`Enter`を押下して、`Git`の設定に準拠していきます。
(Gitの設定がまだの人は[ こちら >>][git])

```bash
? Bot name (wetter)
```
`Enter`を押下して、ボット名を`wetter`で決定します。

```bash
? Description (A simple helpful robot for your Company)
```
`Enter`を押下して、今回は特にボットの説明はつけませんでした。

```bash
? Description A simple helpful robot for your Company
   create package.json
   create bin/hubot
   create bin/hubot.cmd
   create Procfile
   create README.md
   create .gitignore
   create scripts/example.coffee
(中略-ロボットが表示されます)
yarn add v1.21.1
info No lockfile found.
[1/5] Validating package.json...
(中略-パッケージなどが様々設定されます)
├─ winston@2.4.4
└─ ws@1.1.5
Done in 20.34s.
```
> Done in 20.34s.

でプロジェクト作成完了です。

#5.ボットの動きを実装
[4](#4プロジェクトを作成)で作成されたものの中に`script`ディレクトリがあります。
その中に、実装するJavaScriptのプログラムを任意の方法で作成します。

今回は、ただ挨拶を返してくれる`sample.js`というファイルを作成します。
###ソースコード
```js:sample.js
'use strict';
module.exports = robot => {
  robot.hear(/hello/i, msg => {
    const id = msg.message.user.id;
    msg.send('おはようございます');
  });
  robot.respond(/こんにちは/i, msg => {
    const id = msg.message.user.id;
    msg.send(`こんにちは <@${id}> さん!!`);
  });
};
```
###雑に説明
コード自体は
HubotのAPIの記述方法に沿って書いていきます。
> 
```js
robot.hear(/hello/i, msg => {
```

の`here`は指定文字列が来た時にレスポンスを返します。
また、`i`で大文字、小文字を問わない設定とします。

> 
```js
robot.respond(/こんにちは/i, msg => {
```

の`respond`はボットの名前が指定されたときのみレスポンスを返します。

`<@${id}> `はユーザのIDを指定する方法です。

#6.コンソールで試走
`wetter`ディレクトリ内で`bin/bash`をすると実行できます。

```bash:wetter
$ bin/hubot
yarn install v1.21.1
[1/5] Validating package.json...
[2/5] Resolving packages...
success Already up-to-date.
Done in 0.31s.
wetter> [Sun Apr 26 2020 17:17:34 GMT+0900 (GMT+09:00)] INFO /mnt/c/Programming/slackbot/wetter/scripts/sample.js is using deprecated documentation syntax
[Sun Apr 26 2020 17:17:34 GMT+0900 (GMT+09:00)] INFO hubot-redis-brain: Using default redis on localhost:6379

```
`Enter`を押下します。

```bash
wetter> hello
wetter> おはようございます

wetter> Hello
wetter> おはようございます

wetter> heLLo
wetter> おはようございます

wetter> wetter こんにちは
wetter> こんにちは <@1> さん!!
```

#7.Slack上で試走
前提として、Slackのアカウントを作成しておいてください。
###〇Slack上にワークスペースを作成
[新規作成][slack-new]にアクセスして、流れに沿って行けば
簡単に作成していけますので、特に説明はありません。
**社名：ワークスペース名**
**プロジェクト名：チャンネル名**
**メールを一番送信する相手：「後で」でいいと思います。**

###〇ボットを追加する
画像のように`Slack-Botチャンネル`内で追加を行っていきます。
![追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/06ae12be-071b-2a9e-6d85-b655deae2b72.png)

`hubot`と検索し、インストールします。
![検索](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/4f6fa59e-391c-d314-92af-fcb51b5fd27b.png)

Slackに追加します。
![追加する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/eb5aa407-5f1f-42cb-71ce-dfd4895bcc2b.png)

ボットの名前を決めHubot インテグレーションの追加をします。
![名前決め](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/d07dd8fd-26c6-8702-c202-560e5a3e7c02.png)

セットアップの手順のところに`HUBOT_SLACK_TOKEN=xoxo-@@-$$-**`があるので
各自`xoxo-@@-$$-**`を控えておきましょう。

控え終えたら、インテグレーションを保存しましょう。
![保存](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/56211663-e603-968a-9a7d-87b42b1b195d.png)

###〇SlackBotを起動する
`wsl`に戻り、先ほど控えていたキーとともに以下を実行します。

```bash:wetter
$ env HUBOT_SLACK_TOKEN=xoxo-@@-$$-** bin/hubot --adapter slack
yarn install v1.21.1
[1/5] Validating package.json...
[2/5] Resolving packages...
success Already up-to-date.
Done in 0.35s.
(以下略)
```
実行待ち状態のようになれば、Slackへ移動します。
すると、先ほど作成したボットちゃんがログイン状態になってます。
![ボットログイン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/1407cde3-1e6d-99c6-f794-2e30f0410874.png)

それでは、作成したチャンネルなどで、[コンソールと同じように](#6コンソールで試走)
ボットちゃんとお話していきます。
![talk](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/2a133315-d2e4-36ce-00d6-1cdfcc89ab0d.png)

ちゃんと動きました！

#おわりに
これにて、`Slack-Bot`もとい`Hubot`開発環境の構築と
デモンストレーションが終了です:coffee:

色々使いまわしながら面白いボット、役立つボット作っていきましょう。

たのしいBot開発ライフをお送りください:sparkles:

さよなら:wave:

#関連記事
- [Linux環境におけるNode.jsの導入から利用][node]
- [Linux環境におけるNode.jsのためのyarn導入から利用][yarn]

#参考
- [N予備校 2020年 プログラミング入門][n]

[node]:https://qiita.com/RoaaaA/items/17df30bf9400edfb7fb3
[yarn]:https://qiita.com/RoaaaA/items/28405818d2f14dc007b5
[n]:https://www.nnn.ed.nico/courses/668/chapters/9516
[git]:https://qiita.com/RoaaaA/items/8709eb9a320d22e5cd95
[slack-new]:https://app.slack.com/create#email