【魅惑ライブラリ試用②】わずかなステップでSlack BOTが作成・操作が可能なNode.jsライブラリ「Slackbots.js」を試用。

- 日常に溶け込み、多大なる恩恵を頂いているライブラリやパッケージを心おきなく試用する記事第二弾。
- 「ふと思いつきで」という言葉を信条にしてきた私の活動遍歴の変遷が、だんだん速度を増して進行中。
- 今回は、SlackBOT作成の際に便利なライブラリの「Slackbots.js」を試用することにしよう。

## ライブラリ概要
- Slack BOTをAPIを利用して、簡単に作成・操作が可能なNode.jsライブラリ。
- メッセージ投稿やユーザーリストの取得等の、Slackの基本操作の処理が豊富に用意されている。
- [公式Github](https://github.com/mishk0/slack-bot-api)

## 作成BOT概要
- 下記の機能を持つ、最低限のSlack BOT。
    - 指定した地域の天気情報を取得・投稿
    - helpコマンドで、利用方法等を投稿
- **※今回はチュートリアル作成のため、より高機能なBOT作成は行わない。**

## 結果
- 下記のように、BOTに対して指定のメッセージを投稿すると、基づいた情報を返してくれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/4ae20e70-5ba0-a97e-5774-750f13b19229.png)

- また、操作不明・コマンド忘れの際に、「help」投稿でBOT詳細情報も返してくれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/d83f3b64-92ec-a20d-c0fb-ae85b7e00ec0.png)


## 作成環境
- Mac OS X 10.13.4
- NodeJs v11.10.0
- yarn 1.13.0
    - **※npmを利用する場合、下記の手順以降で「yarn」との読み替えを行う。**

## 手順
- **※Node.jsを利用するため、インストールが未完了の場合、[こちら](https://www.sejuku.net/blog/72545)を参考にインストールする。**

### 必要フォルダ・ファイルの作成
- 下記のコマンドをうち、作業に必要なフォルダとファイルを作成する。

```bash
# 作業フォルダ作成
$ mkdir ~/slack_bot
# 作業フォルダ移動
$ cd ~/slack_bot
# jsファイル作成
$ touch index.js
# 環境変数利用ファイル作成
$ touch .env
```

### 必要ライブラリのインストール

- 今回BOT作成の際に、利用するライブラリはSlackbots.jsを含めて下記。
    - 「Slackbots.js」
        - BOT作成フレームワークとして利用
    - 「axios」
        - PromiseベースのHTTPクライアント。json変換やapi通信等のHTTP通信処理が容易に可能。
    - 「dotenv」
        - 環境変数参照ライブラリ。Slackのトークンを参照する際に利用。

- 下記のコマンドをうち、Node.jsパッケージ管理の`yarn`を利用して、パッケージ管理ファイル(package.json)を作成する。

```bash
# パッケージ管理初期化
# コマンド実行後に、問われる質問は基本全てEnterで良い。
$ yarn init
```

- 実行後、作成された`package.json`の中身を下記のように修正して、必要ライブラリ等を明記する。

```json
{
  "name": "slack_bot",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "devDependencies": {
    "dotenv": "^8.0.0"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "slackbots": "^1.2.0"
  },
  "license": "MIT"
}
```

- 修正後、下記のコマンドをうち、`package.json`に記載されたライブラリをインストールする。

```bash
# 必要ライブラリのインストール
$ yarn install
```

- 必要ファイル作成・ライブラリインストールまで完了後、最終的なファイル構造が下記になっていることを確認する。

```
├─ slack_bot
    ├── .env
    ├── index.js
    ├── node_modules
    ├── package.json
    └── yarn.lock
```

### Slack BOTの作成・設定

#### ボットアプリの作成

- Slackへボット用のアプリを追加するため、[こちらのサイト](https://api.slack.com/apps)にアクセス。
- アクセス後、ページ内の「Create New App」をクリックして、下記の情報を入力。
- **※「Create New App」をクリックしなくても、入力画面が表示される場合がある。**
    - 「App Name」: アプリの名前（作成内容がわかりやすい名前）
    - 「Development Slack Workspace」: アプリを追加するチャンネル
- 入力後、「Create App」をクリックして、作成。
- 作成後に下記のページが表示されるため、ページ内の「Bots」をクリック。

<img width="739" alt="tyty.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/10595aca-bdec-9581-33f3-83b0a30a414a.png">

- クリック後、下記のページが表示されるため、「Add a Bot User」をクリックして、その後に表示される入力画面に以下の情報を入力して、「Add Bot User」をクリックして、追加する。
    - 「Display name」: 表示するアプリの名前
    - 「Default username」: ユーザー名

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/bafb8a46-b35b-f314-eae8-d1e36fe6844d.png)

<img width="742" alt="sdfhjsdh.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/5c5e8c87-32f4-1416-437a-7dbf26ecdbd2.png">

- 追加後、左サイドメニューの「Install App」をクリックして、下記の画面が表示されたら、「Install App to Workspace」をクリック。その後に表示される画面で「許可する」をクリックすれば、指定したSlackのワークスペースにボットアプリが追加される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/4f5012a3-187e-22ee-6b2f-388a399f746f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/ddaf92e8-94ff-967a-0ef6-c6ccfcd9a5ce.png)

#### SlackBOTトークンの取得

- 作成したSlack BOTのトークンを取得するため、左サイドメニューの「OAuth & Permissions
」をクリックして、下記の「OAuth Tokens & Redirect URLs」ページの、「Bot User OAuth Access Token」欄のトークンをメモしておく。

<img width="822" alt="token.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/c7f6708e-a852-66d9-1f2b-e980c42fa43f.png">

### 必要ファイルの記述

#### jsファイルの記述
- Slack上でのボットアプリ作成・設定等が完了したら、上記で作成した必要ファイルを編集していく。
- まず作成した`index.js`の中身を下記のように編集する。
  - **※Slackbots.jsでより高機能に利用するためのメソッド等は、[こちら](https://github.com/mishk0/slack-bot-api#methods)を確認。**
  - **※ファイル内で利用している天気APIはライブドアAPIを利用。「city=ID」で地域指定。地域一覧は[こちら](http://weather.livedoor.com/forecast/rss/primary_area.xml)を参考。**

```js
// 必要ライブラリの読み込み
const SlackBot = require('slackbots');
const axios = require('axios');
const dotenv = require('dotenv');
dotenv.config();

// URL(天気)・Slackチャンネル情報の定義
// SLACK_CHANELは、Slack上に存在するチャンネル(例: general)を指定
const APP_NAME = 't_o_d_bot';
const WEATHER_URL = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=471010';
const SLACK_CHANEL = 'test-app';
const PARAMS = {icon_emoji: ':robot_face:'}

// botインスタンスの作成
const bot = new SlackBot({
    token: `${process.env.TOKEN}`,  // .envファイルのトークンを参照
    name: APP_NAME
});

// Slackでのメッセージ投稿の際の処理
bot.on('message', (data) => {
    if(data.type !== 'message') {
        return;
    }
    sendMessage(data.text);
})

// エラー時の処理
bot.on('error', (err) => {
    console.log('エラー : ' + err);
})

// メッセージごとの投稿処理
function sendMessage(message) {
    if(message.includes(' weather')) {
        getWeather()
    } else if(message.includes(' help')) {
        getHelp()
    }
}
// 天気取得処理
function getWeather() {
    axios.get(WEATHER_URL)
      .then(res => {
        const title = res.data.title;
        const telop = res.data.forecasts[0].telop;
        const summary = res.data.description.text;

        bot.postMessageToChannel(
            SLACK_CHANEL,
            `${title}\n天候 : ${telop}\n内容 : ${summary}`,
            PARAMS
        );
      })
}
// help情報投稿処理
function getHelp() {
    bot.postMessageToChannel(
        SLACK_CHANEL,
        `【コマンド一覧】\nweather : 天気情報を取得\nhelp : ヘルプ情報を取得`,
        PARAMS
    );
}
```

#### 環境変数ファイルの作成
- jsファイルで利用するSlackのアクセストークンを定義するため、作成した`.env`ファイルに、先ほどメモしたトークンを記述して、下記のように編集する。
  - **※アクセストークン記述の際は、シングルクォーテーション等で囲む必要はない。**

```env
TOKEN=アクセストークン
```

### 起動・実行
- 必要な「jsファイル・環境変数ファイル」の記述が完了したら、BOTを起動していく。
- 下記のコマンドをうち、jsファイルを実行して、BOTを起動する。

```bash
# 実行
$ yarn start
```

- 起動後、Slack上でBOTアプリが下記のように起動していることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/e90afcee-9906-03f0-1bb2-ae78bd3e1e9a.png)

- slack上で、下記のように、「`@t_o_d_bot weather`」や「`@t_o_d_bot help`」等でメッセージを投稿して、結果が返されることが確認できれば完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/1e93a747-51c4-faaa-5cd0-8763d9b7ccbb.png)

- **※`yarn`で起動するだけではなく、BOTとして長時間起動しておきたい場合、別途サーバー等を準備する必要がある。**

## まとめ
- 今回は、BOT作成ということで、久々の対話マシーン構築作業に、名作ドラマの再会シーンが脳内の9割を占めながら、記事を書く。
- 「BOTは、略語で深い意味が込められているはず」と思い込んでいた私の、「ただの短縮形」と知った時の表情。
- その表情をしたまま、更なる高機能BOTへの改善作業・賢人ライブラリ調査をすることにしよう。

## 参考
- https://github.com/mishk0/slack-bot-api  
→公式Gihubです。大変お世話になりました。
- https://bolajiayodeji.hashnode.dev/building-a-slackbot-with-nodejs-and-slackbotsjs-cjz8gh7zg000exfs1tq2z5zzu  
→こちらを参考にしました。大変お世話になりました。