初学者が作って学ぶLINE BOT ～3文字の魔法でBotを起動する～

# はじめに

今やLINEやSlackなどのチャットツールはコミュニケーションをとる上で必要不可欠となっています。
その中でもLINEが提供している[Messaging API](https://developers.line.biz/ja/services/messaging-api/)を使ったLINE BOT開発方法についてハンズオン形式でご紹介します。
今回は`Node.js`と`Now`を使用します。

例：LINE BOTとのトーク画面
<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/9d4c97f3-8086-c3eb-0c94-9b02d57e4eb6.png" width=40%>

# 想定読者
* LINE BOTを作成してみたい方
* Node.jsとNowを触ってみたい方

# Messaging APIとは

> Messaging APIは、あなたのサービスとLINEユーザーの双方向コミュニケーションを可能にする機能です。

#### [Messaging API](https://developers.line.biz/ja/services/messaging-api/)の仕組み

Messaging APIを使うと、ボットアプリのサーバーとLINEプラットフォームの間でデータを交換できます。
ユーザーがボットにメッセージを送るとWebhookがトリガーされ、LINEプラットフォームからボットアプリのサーバーのWebhook URLにリクエストが送信されます。
すると、ボットアプリのサーバーからLINEプラットフォームに、ユーザーへの応答リクエストが送信されます。リクエストは、JSON形式でHTTPSを使って送信されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/e3a3f23f-7034-fd3e-9950-135699ba8fc7.png" width=75%>

#### Messaging APIの特徴

##### - プッシュメッセージと応答メッセージ

プッシュメッセージとは、任意のタイミングでユーザーに送信するメッセージです。
応答メッセージとは、ユーザーからのメッセージに対して応答するメッセージです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/6888373b-8c9a-1baa-3186-54d5cd8e9775.png" width=75%>


##### - 1対1、グループでトーク可能

Botアカウントの友だちになったユーザーにメッセージを送信できます。
また、グループに追加されていれば、グループ内でメッセージを送信することも可能です。

# ハンズオン開始

以下の流れで作業していきます。

[1. LINE DevelopersでBotを登録する](#1-line-developersでbotを登録する)
[2. Node.jsでBotのプログラムを作成する](#2-nodejsでbotのプログラムを作成する)
[3. Nowを使ってBotを動かす](#3-nowを使ってbotを動かす)

## 1. LINE DevelopersでBotを登録する

ではさっそくBotに必要な設定を行いましょう。

まずは[LINE Developers](https://developers.line.biz/console/register/provider/)でBotを登録します。

#### LINEアカウントでログインする
<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/db8d9b24-59d4-11f8-703c-3f440d9f10a7.png" width=75%>

#### プロバイダーを新規作成する

好きな名前をつけてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/cb9635f9-9811-c56c-96df-52f646d08d2c.png" width=75%>

#### Messaging APIを設定する

Messaging APIのチャネル作成をクリックしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/5e678566-547d-d63e-1806-32feeb13cb01.png" width=75%>

#### 新規チャネルを作成する

＜ポイント＞
Botからメッセージを送りたい場合は プランを「`Developer Trial`」 にしてください

>○ Developer Trial
MessagingAPIを利用したBotを試すプランです。友だちとメッセージの送受信を行うことができます。
※追加可能友だち数は50人に制限されています。また、Developer Trialからプランの切り替えやプレミアムIDの購入はできません。

>○ フリー
MessagingAPIを利用したBotを開発するプランです。友だちの人数に制限はありませんが、Push messagesを利用してBotから友だちにメッセージを送信することはできません。
※サービス拡張に向けプラン変更が可能です。


<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/f87eff33-cfc1-d521-9f90-a74f451a486e.png" width=75%>

#### チャネルを設定しよう

Messaging APIを選択してください
<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/33b3cf8e-1a9c-26fb-085d-fabe67cbba5b.png" width=75%>
<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/63de9198-1ad7-8fe9-98d9-14d84be38d75.png" width=75%>
Webhook送信を`利用する`にして更新してください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/71bb0eb0-a7db-02ae-41ee-ad6c6e4c646c.png" width=75%>

あとは以下を好みに合わせて設定してください。

* Botのグループトーク参加を`利用する`
* 自動応答メッセージを`利用しない`
* 友達追加時あいさつを`利用しない`

## 2. Node.jsでBotのプログラムを作成する

Botの動作を`Node.js`を使ってプログラムしていきます。

### Node.jsとは

>Node.jsはサーバサイドで動くJavaScriptです

参考：[初心者向け！3分で理解するNode.jsとは何か?](https://eng-entrance.com/what-is-nodejs)

### インストール

Node.jsをインストールしていない人は下記サイトを参考にインストールしましょう。

[【Node.js入門】各OS別のインストール方法まとめ(Windows,Mac,Linux…)](https://www.sejuku.net/blog/72545)

### プロジェクト作成

任意の場所でコマンドプロンプトを開き、必要なファイルを作成します。

```
$ mkdir 【任意のフォルダ名】
$ cd 【任意のフォルダ名】
$ npm init -y
$ npm i --save @line/bot-sdk express
```

作成したフォルダに`package.json`が作成されているため
scriptsに`"start": "node server.js",`を追加します。

```json:package.json
 "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }, 
```

Botのプログラム本体となる`server.js`をpackage.jsonと同階層に作成します。
以下を参考に作成してください。
※ `channelAccessToken`と`channelSecret`の値は必ず設定してください。

```js:server.js

'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 3000;

const config = {
    channelAccessToken: '【LINE Developers チャネル基本設定の「アクセストークン」の値】',
    channelSecret: '【LINE Developers チャネル基本設定の「channelSecret」の値】'
};

const app = express();

app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);

function handleEvent(event) {
if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }

  let replyText = '';
  if(event.message.text.match(/おはよう/)){
    replyText = 'おはようございます';
  }else if(event.message.text.match(/こんにちは/)){
    replyText = 'こんにちは';
  }else if(event.message.text.match(/こんばん/)){
    replyText = 'こんばんわ';
  }else if(event.message.text.match(/おやすみ/)){
    replyText = 'おやすみなさい';
  }else{
    return;
  }

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: replyText
  });
}
app.listen(PORT);
console.log(`Server running at ${PORT}`);

```

サンプルで載せている`server.js`は、「おはよう」と言ったら「おはようございます」と返すくらいのコードなので、自由に修正してください。


## 3. Nowを使ってBotを動かす

プログラムができあがったら、Botを動かせるようにします。
今回は無料で使用でき、かつ簡単な`Now`を使用します。

### Now とは

[Now 公式サイト](https://zeit.co/now)

>Now makes serverless application deployment easy. 
Don’t spend time configuring the cloud. Just push your code.

WEBアプリケーションの公開を簡単に行ってくれるサービスのことです。

* 認証はメールのみ（パスワード不要）
* 設定をpackage.jsonに記載するだけ
* `now`というコマンドを打つだけ

### Nowを使ってみよう

#### アカウントを作成してください
https://zeit.co/signup

<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/6fb4fc46-2fca-f065-d45e-95fe47439ba3.png" width=75%>

#### インストール

以下コマンドでNowをインストールします。

```
$ npm i -g now
```

#### Nowへログイン

以下コマンドを実行してください。
※ 登録したメールアドレスに認証用のメールが飛んでくるので、許可してください。

```
$ now login 【登録したメールアドレス】
> We sent an email to XXXXXXXXXX. Please follow the steps provided
  inside it and make sure the security code matches Witty Snowshoe.
√ Email confirmed
> Ready! Authentication token and personal details saved in "~\.now"

```

#### Nowコマンド実行

ログインした状態で`now`コマンドを実行すると、
`package.json`をもとに自動でデプロイします。

```
$ now
> ▲ npm install
> npm WARN XXXXX@1.0.0 No description
> npm WARN XXXXX@1.0.0 No repository field.
>
> added 71 packages in 1.457s
> ▲ Snapshotting deployment
> ▲ Saving deployment image (1.7M)
> Build completed
> Verifying instantiation in sfo1
> [0]
> [0] XXXXX@1.0.0 start /home/nowuser/src
> [0] node server.js
> [0]
> [0] Server running at 3000
> √ Scaled 1 instance in sfo1 [37s]
> Success! Deployment ready
```

#### （参考）デプロイ確認

デプロイに失敗しても不要なnow.shができあがってしまうため、
不要なものはlsでurlを確認して削除しましょう

```
$ now ls
> 7 total deployments found under XXXX[995ms]
> To list more deployments for an app run `now ls [app]`

  app      url               inst #    type    state    age
  XXXXX    XXXXXXX.now.sh         1    NPM     READY    60s
```

#### （参考）削除

[y/N]と聞かれるので[y]を入力する

```
$ now rm XXXXXX.now.sh
・
・
> Are you sure? [y/N] y
```

#### LINE Developersに設定する

最後にNowで公開しているURLをLINE Developersに設定します。
`LINE Developers ＞ プロバイダー ＞ Messaging API ＞ チャネル基本設定`

Webhook URLに、「Nowで公開しているURL」 + 「/webhook」を設定する。

<img src="https://qiita-image-store.s3.amazonaws.com/0/138566/487dfe1a-0ce6-8f2c-ad0f-aef1a8b6bbcb.png" width=75%>

これでLINE BOTに必要な設定は完了です。  

あとはLINEアプリでQRコードなどを用いて、作成したBotを友達追加して
Botとの楽しいメッセージのやりとりを行ってください。  

# まとめ

今回は最小限の機能しかご紹介していないため、
毎朝天気を通知してくれるBotなどを作るともっと楽しくなるかもしれません。