LINE WORKSで初めてのBot開発！(前編)

LINE WORKSでBotを開発してみたい！ということで、今までBotを開発したことがない方向けに、手順を紹介したいと思います。

プログラミング初心者の方でも（多分）気軽にチャレンジできる内容になっていると思いますので、是非試してみてください^^
LINE WORKSってそもそもなーに？って方はこちら→[LINE WORKS](https://line.worksmobile.com/jp/)
また、この記事は、前編・後編に分かれています。
> 後編はこちら→**　[LINE WORKSで初めてのBot開発！(後編)](https://qiita.com/tokotan/items/976d35ca56132e0bb5c1)**

#出来上がりイメージ
今回の記事は、トークでつぶやかれたメッセージをそのまま投稿し返すBotを作ります。
出来上がりはこんな感じです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/c8bc29be-e08c-b300-b173-6688b8ce2247.png)

BotサーバーとしてHeroku、言語はNode.jsを使います。
あと、Macでの開発方法を紹介しています。Windows版も書いて！という方はコメントください。

#Developer ConsoleでAPIを使うための設定とBotを登録する
##Developer Console設定
###Developer Consoleへアクセス
①[Developer Console](https://developers.worksmobile.com/jp/console/openapi/main)へアクセスします。
②LINE WORKSのIDを入力してログインします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/3a90a492-582f-08dc-a1f7-01c79e1d4646.png)

>下記画面が出力された場合は、Developer Consoleへのアクセス権限がありません。Developer Consoleへアクセスするためには、ライトプラン以上のテナントの「最高管理者」もしくは「副管理者」の権限が必要です。権限の付与手順は、[こちら](https://help.worksmobile.com/service/main.nhn?serviceNo=7&categoryNo=883)を参考にしてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/f5c73005-7b49-caab-a66c-d5b19a7ca702.png)

③[LINE WORKS APIサービス利用規約]を確認し、[APIサービス利用規約の内容を理解し、これに同意します。]にチェックを入れ、[利用する]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/5ff01eb7-53e9-5c32-87e8-e2647068c5f1.png)

###API IDを発行する
LINE WORKS Bot Platform APIを使うにあたり、ドメインごとに「API ID」が必要となります。「API ID」はDeveloper Consoleで発行します。

①[Developer Console]へアクセスします。
②[API]メニューの一番上にある[API ID]の[発行]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/4a5c8575-eb71-1716-219e-c5c60ea58cf4.png)

③API IDが発行されました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/749fac90-d45c-3471-e28f-fcb03f8348a9.png)

### サーバーAPIのコンシューマーキーを発行する
Botがユーザーにメッセージを送信する時には「サーバーAPI」を利用します。
また、サーバーAPIを利用する時には、「サーバーAPIコンシューマーキー」と「Server Token」をヘッダーに含める必要があります。まず、Developer Consoleで「サーバーAPIコンシューマーキー」を発行します。
①Developer Consoleへアクセスします。
②[API]メニューの真ん中にある[Server API Consumer Key]の[発行]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/7cb18d82-7306-e07a-4776-02c014ee5405.png)

③サーバーAPIの利用範囲を聞かれるダイアログが表示されます。今回はBotのみ利用するため、[トークBot]を選択し、[次へ]をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/c41ff83b-fd50-142c-5729-cc9db12ce3b1.png)

④[Tokenの有効期間]はデフォルト90日となっていますが、ここで値を変更することが可能です。また、Tokenを利用した時に自動的にTokenの有効期限を延長する場合は、[Tokenの使用時に有効期間を自動延長しますか？]にて、[はい]を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/7c97bebe-0b8a-b66e-01c6-a619d4d2024d.png)

⑤サーバーAPIコンシューマーキーが発行されました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/02d719dc-4f4a-c0d0-eb5b-54d504ba23ae.png)

###Server Listを追加する
次に、サーバーAPIを利用する時にヘッダーに含める必要がある「Server Token」についてですが、「Server Token」を取得するためには「サーバーID」と「認証キー」が必要となります。Developer Consoleでこの２つを発行しましょう。
ちなみに、このServer Tokenも２種類「固定IPタイプ」と「ID登録タイプ」があります。今回は、Botをホストするサーバーはクラウド上のサーバーを使いたいのでIPアドレスが変わります。そのため、今回は「ID登録タイプ」を使います。

①Developer Consoleへアクセスします。
②[API]メニューの一番下にある[追加]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/748d057f-43f5-0afd-d882-630b641531fd.png)

③表示されたダイアログの[サーバー名]欄には任意の値を入力してください。 [Keyの選択]で、先程発行したService API Consumer Keyを選択し、[保存]します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/c192a7cc-8d18-31e2-4ef6-14a478746e07.png)

④サーバーIDが追加され、認証キーがダウンロードできるようになりました！ 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/690dde79-fa25-0d46-b0e8-f23af7e414cb.png)

###Bot登録
①左の[Bot]メニューをクリックし、[Botを登録]もしくは[登録]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/999c1715-817e-0b4f-6611-fe7641819920.png)

②Botの設定をしていきます。

|項目名                           |設定値                        |
|--------------------------------|-----------------------------|
|Bot名                           |任意の名前を設定します。           |
|説明                             |Botの説明文を設定します。<br>ユーザーがBotを選ぶ時にわかりやすい文を追加しましょう。                                       |
|Callback URL     |[On]を選択します。 <br>URL欄は、HerokuのWebアプリケーションURLを入力します。今回は、「**https://＜HerokuのWebアプリケーション名＞.herokuapp.com/callback**」と入力しましょう。<br>[メッセージが送信可能なメッセージタイプ]にて、Botが送信できるメッセージタイプを選びます。今回はテキストだけ送るため、[テキスト]にチェックを入れます。|
|Botポリシー-トークルームへの招待        |グループトークでBotを使う場合は、[複数人のトークルームに招待可]にチェックを入れます。|
|管理者-主担当       |Botの管理者を設定します。|


全部設定すると、下記のようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/135983/17c9b50f-e59c-7074-7f96-e3e4b0d91bdb.png)

③[保存]ボタンをクリックします。

#Botサーバーを用意する
##Botサーバーの用意
ユーザーのメッセージを受信して返信するBotを運用するサーバーを用意します。今回は無料でWebアプリケーションの公開ができるHerokuを使います。

###Herokuアカウント作成
Herokuアカウント作成します。[こちら](https://signup.heroku.com/signup/dc)から作成してください。

###ローカル端末設定
下記をローカル端末へインストールをしてください。

- [Node.js, npm](https://nodejs.org/en/download/)
- [Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)
- [Git](https://git-scm.com/downloads)

###Botサーバー初期設定・起動 
①ローカルにBot用のディレクトリを作成します。

```
$ mkdir oumubot
$ cd oumubot
```
②Botのプロジェクトを作成します。

```
$ npm init
```

上記コマンドを実行するといくつか質問が聞かれるので、それに回答していきます。(※取り急ぎ、全てEnterでも動作に支障はありません。)全て回答すると、package.jsonファイルが作成されます。
下記は実行例です。

```
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (oumubot) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/.../Projects/oumubot/package.json:

{
  "name": "oumubot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)
＄
```


③Bot用のディレクトリに配下に下記２ファイル作成します。

- **.gitignore**
Gitの管理に含めないファイルを指定するファイルです。

```:.DS_Store
.gitignore
npm-debug.log
node_modules
```
- **Procfile**
アプリの起動に必要なファイルです。

```:Procfile
web: node index.js
```

④Node.jsで利用できるWebアプリケーションフレームワークであるexpressというパッケージをインストールします。

```
$ npm install express --save
```

> —saveオプションをつけることによって、package.jsonに記載します。

⑤Expressを使ってWebアプリケーションが起動するindex.jsファイルを作成します。
まずは、サーバー起動の部分だけ記載しておきます。

```index.js
"use strict";

// モジュールインポート
const express = require("express");
const server = express();

// Webアプリケーション起動
server.listen(process.env.PORT || 3000);

// サーバー起動確認
server.get('/', (req, res) => {
    res.send('Hello World!');
});

// Botからメッセージに応答
server.post('/callback', (req, res) => {
    res.sendStatus(200);
});
```

###Gitリポジトリの作成とコミット
Herokuへデプロイするためには、Gitレポジトリで管理する必要があります。そのため、Gitレポジトリを作成します。
①Gitリポジトリを作成します。

```
$ git init
```

②ローカルのファイル・ディレクトリをインデックスに登録します。

```
$ git add .
```

③に追加されたファイルをコミットします。

```
$ git commit -m 'commit message'
```

④Herokuへログインします。

```
$ heroku login
heroku: Enter your login credentials
Email: ＜HerokuアカウントのEメールアドレス＞
Password: ***********
Logged in as ＜HerokuアカウントのEメールアドレス＞
```

⑤Herokuでアプリケーションを作成します。

```
$ heroku apps:create <アプリケーション名＞
Creating ⬢ <アプリケーション名＞... done
https:// <アプリケーション名＞.herokuapp.com/ | https://git.heroku.com/<アプリケーション名＞.git
```

> **[注意]**
Herokuアプリケーション名は、Herokuの世界の中で重複が不可です。「Name ＜アプリケーション名＞is already taken」というメッセージが出力されたら、違うアプリケーション名に修正しましょう。

⑥ローカルのGitリポジトリをHerokuアプリと紐付けます。

```
$ git remote add heroku https://git.heroku.com/<アプリケーション名＞.git
```

⑦Herokuへプッシュします。

```
$ git push heroku master
```

⑧下記URLへアクセスし、「Hello World!」とページに出力されていたら成功です。

⑨ログを確認する場合は、下記コマンドで確認できます。

```
$ heroku logs –tail
```

#後編に続きます
ここまででBotを開発する基盤がほぼ整いました。
いよいよBotを開発していきますが長くなってしまったので、少し休憩してから後編にいきましょう！

> 後編はこちら→**[LINE WORKSで初めてのBot開発！(後編)](https://qiita.com/tokotan/items/976d35ca56132e0bb5c1)**