1時間でLINE Botを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest


last updated 2023/6/04

<details>
<summary>記事アップデート履歴</summary>

- 2018/3/14 ngrokのインストールをnpm経由に変更
- 2018/8/28 本体のディベロッパー画面が更新されてるので変更
- 2018/11/24 nowのバージョンアップに伴ってnow.jsonの記述を追加
- 2019/5/14 [LINE@アカウントのLINE公式アカウントへの統合](https://linecorp.com/ja/pr/news/ja/2018/2517)に伴ったフロー変更などを適用、事例に市川市追加、nowのデプロイ方法の更新
- 2019/6/11 疎通確認でエラーが出るのは問題ないですが、そこで接続できないと問い合わせが多いためserver.jsに疎通確認用のコードを追加。
- 2019/6/14 nowをv2に対応
- 2019/7/31 ngrokでのトンネリング箇所をserveoにも対応
- 2019/8/24 Webhookの設定方法を公式アカウントマネージャー側へ
- 2020/4/4 nowのデプロイ手順更新、サンプルコード更新
- 2020/5/22 デプロイの部分をVercelに変更かつ、外部記事へ
- 2020/6/14 天気APIのコードを微修正
- 2021/6/14 ライブドアの天気APIの箇所を互換APIに変更
- 2022/10/01 LINE DevelopersのUI変更に追従
- 2023/6/4 サンプルコードにエラー出力部分を追加
- 2023/9/1 LINE Bot管理画面のWebhook検証ボタンの処理を変更(削除)

</details>


## この資料について

* [東京Node学園祭2017](http://nodefest.jp/2017/)の2日目(2017/11/26)に開催したハンズオンの資料です。

![](https://i.gyazo.com/7db87e2c5f84ca616c105df0ea8ad8c7.png)

* この資料をハンズオンなどに活用してNode.js普及を促進させてもらえたら幸いです。
	* 使うときにコメント欄にコメント貰えると嬉しいです！
	* ハンズオン進めてみた感想などもコメント貰えると嬉しいです！
* 会の流れとしては`ハンズオン` -> `もくもく会` -> `(可能な人は)もくもく会で作ったBOTを発表`という流れです。
	* 当日のツイートはこちら -> [東京Node学園祭2017 LINE BOTハンズオンツイートまとめ！](https://togetter.com/li/1175406)
	* 参加者の人が作ったBOTについては最後に掲載します。
		* [参加者の方々が作ったBOTたち](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#%E5%8F%82%E5%8A%A0%E8%80%85%E3%81%AE%E6%96%B9%E3%80%85%E3%81%8C%E4%BD%9C%E3%81%A3%E3%81%9Fbot%E3%82%92%E7%B4%B9%E4%BB%8B%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3%E5%BE%8C%E3%81%AB%E8%BF%BD%E8%A8%98)
* どこまでやるか
	* 手元で確認するだけであればSTEP3まででOK
	* ホスティングしてハンズオン後も使いたいならSTEP4まで

![](https://i.gyazo.com/c2cf245cfb34b0301f2fbf81b871f27c.png)

---

## はじめに

* 対象者: Node.js初心者向け
* 目的: LINE BOTを作ってNode.jsに触れる
* ゴール目標: LINE BOTを作ってデプロイする
* 性質上、Node.js以外の話の方が多いかも
* 1Hしかないのでコード理解よりも動くものを
* 早く終わった人はもくもくタイム

---

## 自己紹介

* のびすけ (@n0bisuke)
* [プロトアウトスタジオ](https://protoout.studio)
	* https://twitter.com/protooutstudio <- フォローしてね！笑
* 国内最大のIoTコミュニティ[IoTLT主催](https://iotlt.connpass.com/)
* 認定など
	* LINE API Experts
		* [LINE API Expert第一期メンバーを発表します](https://engineering.linecorp.com/ja/blog/detail/248)
		* [LINE BOOT AWARDS](https://www.line-community.me/awards/)運営
	* Microsoft MVP (Node.js)
	* IBM Champion

---

## LINE Bot

- LINE上で動作するBOT
- 様々なプログラムと連携させることができる
- LINE自体のユーザー数が多いことで、追加でアプリインストールがほぼ不要なことが利点
- LINEがUIになるのでUIを考える手間が少なく、サーバーサイドエンジニア的に嬉しい

---

### 事例: みずほ、出前館
![](https://i.gyazo.com/6e259f208b7502d18f1b40927c6833e5.png)

---

### 事例: ヤマト運輸
![](https://i.gyazo.com/38120bbeab46320c3f67e7bbc08fb023.png)

---

### 行政事例: 市川市

![](https://scdn.line-apps.com/stf/linecorp/ja/pr/Residentcard.jpg)

https://linecorp.com/ja/pr/news/ja/2019/2642

---

## LINE Messaging API

LINE BOTを作るためのAPIです。

* https://developers.line.biz/ja/docs/messaging-api/overview/

>Messaging APIを利用することで、あなたのサービスをLINEのトークルーム上で提供することができます。
LINEユーザー一人一人に合わせたユーザー体験を提供できます。

---

![スクリーンショット 2017-02-05 9.10.01.png](https://qiita-image-store.s3.amazonaws.com/0/35387/ca7384c9-7593-4f98-8ccc-56a7f5da9d53.png "スクリーンショット 2017-02-05 9.10.01.png")

---

### Push APIとReply API

![スクリーンショット 2017-02-05 9.09.22.png](https://qiita-image-store.s3.amazonaws.com/0/35387/2ab80936-f5b2-e7f2-9845-7de0ba4f5abf.png "スクリーンショット 2017-02-05 9.09.22.png")

基本的にPushとReplyの二つのAPIがあります。

PushはBotアプリケーション側が起点となってユーザーにアクションします。
Replyはユーザーの発言を起点としてBotアプリケーションを呼び出します。

---

## 作ってみよう

---

### 1. Botアカウントを作成する

LINEのBotはTwitterなどと違い、通常のユーザーのアカウントをBot化することは出来ず、専用のアカウントを作る必要があります。

---


#### LINEディベロッパーサイトへログイン

まずは[LINE developersのサイト](https://developers.line.biz/ja/)にアクセスし、`ログインしましょう。`

![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/b3ae8109-adfd-a3aa-1ce9-d0ecc77e38c0.png)

LINEアカウントでのログインを求められます。`メールアドレスとパスワード`もしくは`QRコード`でログインできます。ログインできない場合はLINEのスマートフォンアプリ側で設定を確認しましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/13a50a10-2ef9-0f5e-c3c9-dd9e5ce0f260.png" width="500px" />

> 設定がまだの方はLINEのスマートフォンアプリ画面から `設定>アカウント`でメールアドレスを設定できます。
> [LINEでメールアドレスを新規登録・確認・変更・登録解除（削除）する方法](http://appllio.com/line-mail-address-settings)

---


#### プロバイダーの作成

ログインしたらプロバイダーの作成を行います。プロバイダーは自分が作るLINE BOTなどの開発者名やチーム名、企業名になります。初回だけディベロッパー登録で個人情報を聞かれると思うので回答してから進めましょう。

> ![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/fbf4e822-7554-dba9-f879-bc17d9900460.png)


`新規プロバイダー作成`ボタンを押して進み、プロバイダー名を入力して進めましょう。

> ![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/57c0a2cd-862a-94a2-d332-77417bc4bc0e.png)
---


#### Messaging APIの新規チャンネルを作成

チャンネルを作成します。今回はLINE BOTを作るMessaging APIを選択します。

> ![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/c45226f6-da2b-e90a-9987-19482f0b0d42.png)

**Messaging API** を選択しましょう。

---

#### BOTの情報入力

BOTの情報を入力していきます。

> ![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/1f91dcd5-5e02-f2bd-da41-448099a20a64.png)

| 項目                                                | 説明                                                                    |
|-----------------------------------------------------|-------------------------------------------------------------------------|
| チャネルの種類（必須）                              |  変更不要です                                                              |
| プロバイダー（必須）                                |  変更不要です                                                            |
| 会社・事業者の所在国・地域（必須）                  |    自分のいる国や地域を選択します                                           |
| チャネルアイコン                                    | BOTのアイコンになる画像を選びましょう。                                 |
| チャネル名（必須）                                  | BOTの名前を入力しましょう。`LINE`という文字列は使えなかった気がします。 |
| チャネル説明（必須）                                | BOTの説明を入力しましょう。取り急ぎは適当でも大丈夫                     |
| メールアドレス（必須）                              | BOTの開発者にLINE側からお知らせがあるときに受け取るメールアドレス     |
| 大業種/小業種（必須）                               | BOTのカテゴリを選択します。取り急ぎは適当でも大丈夫。                   |
| プライバシーポリシーURL/サービス利用規約URL（任意） | 取り急ぎなくて大丈夫です                                              |

> ※昔はここでプラン設定(Developer Trial or FREE)をしていましたが、公式アカウントへの統合に伴って選択肢がなくなりました。

- 規約を確認、チェックして「作成」

> ![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/3d1efc5d-c131-4c8e-c450-79ecd1bb047e.png)

- 内容を確認して「OK」
> ![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/c3529989-33cc-1769-5e74-d3acdccc5cdd.png)

- 規約を読んで「同意する」
![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/2f78da9a-99d8-56d0-2b14-746596964d7f.png)

---

#### BOTの設定確認

作ったBOTの設定画面が開かれます。
> ![スクリーンショット 2022-09-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/c230cc2b-762d-58ac-fe84-abe8a7300c32.png)

「Message API設定」のタブを開き、「LINE公式アカウント機能設定」を変更します。
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/c0c05f38-4c5e-900e-6c0a-e642d05c1d43.png)

「編集」を押すとLINE公式アカウントマネージャーに遷移し、そちらで「応答設定」を選択します。
次のように設定を変更します。

* あいさつメッセージ: オフ
* 応答メッセージ: オフ
* Webhook: オン

> ![.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/32c7b757-d2f5-dcc3-4b2d-2df63ecc38e0.png)

変更は自動で保存されます。

---

#### BOTと友達になろう

LINE Developersのタブに戻り、画面上の方にある`LINEアプリへのQRコード`を確認します。

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/5732cc13-05be-4ffe-c5cb-a15947a6abc9.png)



ここで表示されるQRコードを使って、自分が作成したBotアカウントと友達になりましょう。

**ここからはスマートフォン画面のキャプチャになります。**

QRコードリーダーを開きBotを友達追加しましょう。

> <img src="https://i.gyazo.com/a15ca7b0b537017ab81511c990b6f6a6.png" width="500px" />

**「追加」**を選択します。

> <img src="https://i.gyazo.com/d4b9b67bf512c17b5a229667e72badb0.png" width="500px" />

**「同意する」**を選択します。

> <img src="https://i.gyazo.com/b196efbe36e740bd2659caf7af73fb96.png" width="500px" />

Botが友達に追加されました。

> <img src="https://i.gyazo.com/160693839f3d28e2ed07ad2aa7efeee3.png" width="500px" />

---

### 2. Node.jsでBOT開発

ここからは手元のターミナルなどでの作業がメインになります。
Node.jsのインストールがまだの方は参考記事などをもとに準備をして下さい。

> * nvm編: [いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜](https://liginc.co.jp/web/programming/node-js/85318)
> * nodebrew編: [僕がMacを買い換えてすぐにいれるツール&すぐにする初期設定【2016年9月版】](https://dotstud.io/blog/setup-new-mac-app/)

---

ちなみに、筆者の環境は以下になります。 (2019/5/14時点)

* Node.js v12.2.0 
* npm v6.9.0
* macOS Mojave 10.14

---

#### プロジェクトを作成とハローワールド

Node.jsのプロジェクトは`package.json`があるディレクトリが起点となります。
まずは`npm initコマンド`で`package.json`を作成します。

```bash

$ mkdir mylinebot
$ cd mylinebot
$ npm init -y
```

```
Wrote to /Users/n0bisuke/dotstudio/2_events/20171125_nodefest/linebot/mylinebot/package.json:

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

---

次に依存モジュールを追加します。 今回は[こちらのSDK](https://github.com/line/line-bot-sdk-nodejs)を利用します。

> ちなみに以前は公式のNode.js SDKが無かったので[依存なし](https://qiita.com/n0bisuke/items/56d7ace2193fbc106639)でも書いてました。

```
$ npm i @line/bot-sdk express
```

---

次にプログラムのメインとなる`server.js`をmylinebotフォルダ内に作成します。

* Macだとtouchコマンド

```
$ touch server.js
```

* windowsだとnulコマンド(らしい)

```
$ type nul > server.js
```

コマンドじゃなくてもエディタの新規作成などで大丈夫です。

ディレクトリ内は現状こんな感じです。 (Windowsの人はlsが使えないのでdirを使いましょう)

```
$ ls
server.js            node_modules      package-lock.json package.json
```

---

エディタで`server.js`を編集します。
以下をコピー&ペーストしましょう。

```server.js
'use strict';

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

const config = {
    channelSecret: '作成したBOTのチャンネルシークレット',
    channelAccessToken: '作成したBOTのチャンネルアクセストークン'
};

const app = express();

app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない)
app.post('/webhook', line.middleware(config), (req, res) => {
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result))
      .catch((err) => {
 	    console.error(err);
        res.status(500).end();
      });
});

const client = new line.Client(config);

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

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: event.message.text //実際に返信の言葉を入れる箇所
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);
```

> 後ほどの書き換えに備えて`function handleEvent()`の箇所はasyncにしました。 (2020/4/4)

---

#### Channel Secretとアクセストークンの確認

先ほどの「LINE developers」の画面で**チャネルシークレット**と**チャネルアクセストークン**を確認し、コピーしておきます。
この値は他の人に教えないよう注意しましょう。


* 「チャネル基本設定」で チャネルシークレット確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/3dc8f245-d5b9-2220-9d52-15e04652c992.png)


* 「Messaging API設定」でチャネルアクセストークン発行

「発行」を押すと次のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/064874cc-ce31-de47-ea21-d42c60fde6fe.png)


---

`server.js`のソースコードの`channelAccessToken`と`channelSecret`の部分に、上でコピーしたチャネルアクセストークン、チャネルシークレットの値を指定しましょう。

アプリケーションを起動してみます。

```bash
$ node server.js
```

---

起動すると以下がターミナルに表示されることを確認しましょう。

```
Server running at 3000
```

↓↓↓↓↓↓↓ あなたの記事の内容
ここで問題なければブラウザで http://localhost:3000 にアクセスすると`Hello LINE BOT!`と表示されると思います。
───────
ここで問題なければブラウザでhttp://localhost:3000にアクセスすると `Hello LINE BOT!`と表示されると思います。
↑↑↑↑↑↑↑ 編集リクエストの内容

---

### 3. ngrokでトンネリング

---

LINE Botを作るためにはWebhookURLをLINE developersに登録する必要があります。

![](https://camo.qiitausercontent.com/6dba73bce7404b7f78fb17990a9c1c79f5fa3f67/68747470733a2f2f692e6779617a6f2e636f6d2f31303030343434666533656531633761383833353561323432393363353233622e706e67)

---

この際SSLが必須になるのですが証明書取得などの手間もありますし、PaaSなどにホスティングして試すのはデバッグが大変なので、手元のPCのlocalhostにグローバルからアクセスできるようにするトンネリングツールを利用しましょう。

* [ngrok](https://ngrok.com/)
* [localtunnel](https://localtunnel.github.io/www/)
* [serveo](https://serveo.net/)

などが有名です。今回はngrokを利用します。

---

![](https://ngrok.com/static/img/webhooks.png)

~~まずは[ngrokのサイト](https://ngrok.com/)にいき、本体をダウンロードして解凍します。~~
> この辺の手順を更新しました。(2018/3/14)

npm経由でngrokをインストールできます。

> https://www.npmjs.com/package/ngrok

```bash
$ npm i -g ngrok
```

次にトンネリングサーバーを起動します。 `ngrok http ポート名`と指定します。
今回はNode.jsアプリケーションを3000番ポートで利用するので3000を指定しましょう。

```bash
$ ngrok http 3000
```

---

```
ngrok by @inconshreveable                                    (Ctrl+C to quit)

Session Status                online
Account                       n0bisuke (Plan: Free)
Version                       2.1.18
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1148cbd9.ngrok.io -> localhost:3000
Forwarding                    https://1148cbd9.ngrok.io -> localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
```

---

起動すると表示される`https://`で始まるアドレスを利用します。
この場合は`https://1148cbd9.ngrok.io`です。このアドレスは起動の度に変わるため、ngrokは起動し続けて開発を行うことをおススメします。

---

以下のように、ngrokのプロセスとNode.jsアプリケーションのプロセスを並行して実行しての開発になります。

![](https://i.gyazo.com/b615dab976259aa0fbb8245375d914e6.png)

---

#### Webhook URLの更新

`https://1148cbd9.ngrok.io/webhook`がWebhook URLになります。

LINE developersに戻り、「Messaging API設定」のタブに移動して、**Webhook URL**を更新します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154885/f0ee0b81-b89c-4a9a-1b2a-434a852ee214.png)


ここに先ほどのアドレスを指定しましょう。 **URLの末尾に`/webhook`をつけるのを忘れずに**

---

この状態でBotに話しかけてみて下さい。

![](https://i.gyazo.com/abaf8f06efea5d9b3840c4aa1c8b1932.png)

Botがおうむ返ししてくれます。

#### 補足: serveoの利用 - ngrokのインストールがうまくいかない場合など

2019年7月頃、[ngrokよりserveoがすごい。０秒で localhostを固定URLで公開
](https://qiita.com/kaba/items/53b297e2bfb5b4f20a48)の記事がバズってました。

serveoでのやり方も紹介します。そのうちこの記事もngrokから差し替えるかもしれません。

> [ポリシー的にどうなん？みたいな会話](https://qiita.com/kaba/items/53b297e2bfb5b4f20a48#comment-ed1891f61013703fcf91)もあるのでとりまこれくらいの追記で......笑

serveoはインストールなど不要です。利用したいドメイン名を指定してngrokを立ち上げるように`Node.jsのプロセスとは別タブや別ウィンドウを新規に立ち上げて`以下を実行しましょう。

```bash
$ ssh -o ServerAliveInterval=60 -R <利用したいドメイン名>:80:localhost:<Node.jsなどのプログラムを立ち上げてるポート> serveo.net
```

例えば`localhost:3000`を`https://n0bisuke.serveo.net`で利用したい。とかであれば以下のように実行します。

```bash
$ ssh -o ServerAliveInterval=60 -R n0bisuke:80:localhost:3000 serveo.net
```

```
Forwarding HTTP traffic from https://n0bisuke.serveo.net
Press g to start a GUI session and ctrl-c to quit.
```

> <img src="https://i.gyazo.com/187ed92e45cba5c6bd532fd956b22b7c.png" width="500px">

あとは今回のプログラムだと`https://n0bisuke.serveo.net/webhook`をLINEの管理画面に設定すればOKです。

---

### 4. プログラムをデプロイして永続化する

ngrokだと、手元のパソコン上でプログラムが動作するため、パソコンを閉じると動作しなくなってしまいます。

永続的にLINE BOTを動かすために何かしらのサーバーにデプロイしましょう。

#### Vercelにデプロイ (2020/5/22更新)

今回は、[Vercel](https://vercel.com)を使ってみます。

Vercelとは

* Node.js向けのPaaS / FaaS
	* RubyやGoなども使える
	* Docker対応した模様なのでかなり色々使える
* 旧名称はnow.sh
* CLIからコマンド一つでデプロイできる
* Herokuなどよりもデプロイ手順が簡単

> <img src="https://i.gyazo.com/40a94b4f0ce79a97a384d8b92eba0935.png" width="300px">
 
**こちらの手順↓で進めてみましょう。**

> [VercelでLINE BOTを動かす 2020年5月版](https://qiita.com/n0bisuke/items/a5f49193fa68f28a7f25)


---

## 補足資料

補足内容です。
 
### 補足資料その1 - if文で条件分岐

* event.message.textがユーザーから送られてきた文字列
* `こんにちは`とBOTに送ると`こんばんわの時間ですよ`と言われて、それ以外だと`うざ`と返されるプログラムが以下になります。
* client.replyMessage()でBOTのリプライになります。

```server.js
・
省略
・
・
async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }

  let replyText = '';
  if(event.message.text === 'こんにちは'){
    replyText = 'こんばんわの時間ですよ';
  }else{
    replyText = 'うざ';
  }

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: replyText
  });
}
・
省略
・
・
```

![](https://i.gyazo.com/2d6d44a97ed7ecae2e51111e3ff09e91.png)

---

### 補足資料その2 - 天気APIを使う応用 (2021/6/14更新)

天気を教えてくれるBOTを作ってみましょう。

~~ライブドアの天気APIを利用してみます。~~

> ~~http://weather.livedoor.com/weather_hacks/webservice~~

ライブドアの天気APIが2020年7月にサービス終了してしまい、利用できなくなっていたのですが、互換APIを公開してくれている方がいました。こちらのAPIを利用してみましょう。

> https://weather.tsukumijima.net/
> [livedoor 天気互換の天気予報 API をリリースした話](https://blog.tsukumijima.net/article/weather-api/)

* axiosのインストール

外部のAPIにアクセスするために[axios](https://github.com/axios/axios)をmylinebotのプロジェクトにインストールします。

```bash
npm i axios
```

* `server.js`の冒頭箇所に`const axios = require('axios');`を追記します。

```server.js
'use strict';

const axios = require('axios'); //追記
const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 3000;
・
・
・
(省略)
```

* `server.js`の該当箇所(`async function hendleEvent(){}`の中)を書き換えます。

```server.js
・
・
省略
・
・

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

  //"天気教えて"以外の場合は反応しない
  if(event.message.text !== '天気教えて') {
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: '"天気教えて"と言ってね'
    });
  }

  let replyText = '';
  replyText = 'ちょっと待ってね'; //"ちょっと待ってね"ってメッセージだけ先に処理
  await client.replyMessage(event.replyToken, {
      type: 'text',
      text: replyText
  });

  //axiosを使って天気APIにアクセス
  const CITY_ID = `400040`; //取得したい地域のIDを指定
      const URL = `https://weather.tsukumijima.net/api/forecast?city=${CITY_ID}`;
  const res = await axios.get(URL);
  const pushText = res.data.description.text;
  return client.pushMessage(event.source.userId, {
      type: 'text',
      text: pushText,
  });
}

・
・
省略
・
・
```

地域ごとのIDもライブドアのAPIで利用されていた値がそのまま使えるように作られてるAPIなので[ドキュメントページ](https://weather.tsukumijima.net/)を元に利用したい地域のIDを調べましょう。

---

### 補足資料その3 - スクレイピングと組み合わせる

APIが無いサイトでもスクレイピングすると情報を取得できます。
が、ご利用は自己責任でお願いします。

[花粉ボットと実装サンプル](https://qiita.com/n0bisuke/private/2d474506e43ebdb2711e)

---


## 応用

* Node.jsの最新バージョンを教えてくれるBOTを作ってみよう
* `時間までもくもくLINE BOT開発しましょう！`
* もっと色々な機能を使い多人は[LINE BOOT AWARDS 公式夏期講習 ～2018 年 7 月時点での LINE Bot の機能を振り返る～](https://qiita.com/kenakamu/items/b2580f2546b925832045)の記事を見ましょう。この記事のチュートリアルの続きとなる実装です。
	* リッチメニュー
	* URLスキーム
	* FlexMessage
	* LINE Pay
	* などの機能が紹介されています。

---

### 応用回答例: Node.jsの最新を教えてくれるBOT 答え合わせ

![](https://i.gyazo.com/dca739db49d691a8bc10b07542e38a66.png)

* `Node.jsの最新バージョン教えて！`と言われたらとりあえず`ちょっと待ってね`とリプライメッセージ
* https://nodejs.org/ja/ にスクレイピングしにいって、完了したらプッシュメッセージで教えてくれる
* async/awaitでaxiosのHTTPリクエストとLINE MASSAGING APIへのリクエストを同期処理的に記述

[axios](https://www.npmjs.com/package/axios)を追加インストール

```
npm i axios
```

```server.js
'use strict';

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

const config = {
    channelSecret: '',
    channelAccessToken: ''
};

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 mes = ''
  if(event.message.text === 'Node.jsの最新バージョン教えて！'){
    mes = 'ちょっとまってね'; //待ってねってメッセージだけ先に処理
    getNodeVer(event.source.userId); //スクレイピング処理が終わったらプッシュメッセージ
  }else{
    mes = event.message.text;
  }

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: mes
  });
}

const getNodeVer = async (userId) => {
    const res = await axios.get('https://nodejs.org/ja/');
    const item = res.data;
    const version = item.match(/最新版"  data-version="(.*?)">/)[1]; //正規表現で(無理やり)取得
    console.log(version);

    await client.pushMessage(userId, {
        type: 'text',
        text: `今の最新は${version}だよ！`,
    });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);
```

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Node.jsの最新バージョンを教えてくれる会長BOT <a href="https://twitter.com/yosuke_furukawa?ref_src=twsrc%5Etfw">@yosuke_furukawa</a><a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a> <a href="https://t.co/JSNKGkyFKU">pic.twitter.com/JSNKGkyFKU</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934672144608325633?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


---

## レポート: 参加者の方々が作ったBOTを紹介(ハンズオン後に追記)

もくもくタイムは20min程度でしたが、皆さんすごいです。

### 1. Node.jsの最新バージョン+ヤフー検索ができるBOT

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE BOTハンズオン作品1<br><br>Node.jsの最新バージョンを教えてくれてYahoo検索もできるBOT！<a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a> <a href="https://t.co/paBzzivTLG">pic.twitter.com/paBzzivTLG</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934689698747793408?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

応用課題で出していたNode.jsのバージョンを教えてくれる機能もLTSと最新版の両方に対応してくれました。
スクレイピングの勢いでヤフー検索まで繋いでいます。

### 2. 調べたい単語を入れるとWikipediaの検索結果を返してくれるBOT

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE BOTハンズオン作品2<br><br>調べたい単語を入れるとWikipediaの検索結果を返してくれるBOT！<a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a> <a href="https://t.co/BM1sXyYH2p">pic.twitter.com/BM1sXyYH2p</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934689998242070528?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これめっちゃ便利です。
Wikipediaまでわざわざ調べに行かなくても色々な言葉の概要を知ることができます。

### 3. URLを入れると話題のdev.toとどっちが速いかを教えてくれるBOT

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE BOTハンズオン作品3<br><br>URLを入れると話題のdev.toとどっちが速いかを教えてくれるBOT！<a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a> <a href="https://t.co/6sfwn6QUYq">pic.twitter.com/6sfwn6QUYq</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934690503995531264?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


話題ですね。

> [dev.toと阿部寛のホームページについてちゃんと計測させてくれ](https://qiita.com/naru0504/items/7d652681d698f6d88c4f)

dev.toと入力したサイトのどちらが早いか計測してくれます。
トレンドを捉えるアイディアの柔軟性がすごい。

### 4. 今日のご飯何にするかを絵文字で提案してくれるBOT！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE BOTハンズオン作品4<br><br>今日のご飯何にするかを絵文字で提案してくれるBOT！<a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a> <a href="https://t.co/y1a0uOIMpq">pic.twitter.com/y1a0uOIMpq</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934691494622924805?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ご飯何にしようか迷いますよね。
絵文字で推薦してくれるのでもう迷わない......!

コード指定すればNode.jsからも絵文字扱えるんだよっていう良い例だと思います。 

### 5. 何でも人に聞く人にググらせるBOT

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE BOTハンズオン作品5<br><br>何でも人に聞く人にググらせるBOT！<a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a> <a href="https://t.co/WikKQqehr4">pic.twitter.com/WikKQqehr4</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934692000690929665?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**「調べる前になんでも人に聞く人を駆逐したい」**らしいです笑

検索ワードを入れるとググれってことでGoogleに飛ばされます。
ハンズオンで触れていないリッチメニューまで活用してくれました。

### 6. Polymerと会話？できるBOT

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE BOTハンズオン作品6<br><br>Polymerと会話？できるBOT！<a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a> <a href="https://t.co/sQPTfg1hWA">pic.twitter.com/sQPTfg1hWA</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934692315981012992?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Polymerが好きすぎてPolymerちゃんと会話できるBOTを作ったそうです笑

### 7.検索ワードを入れるとunsplash.comから画像を取得してくるBOT

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LINE BOTハンズオン作品7<br><br>検索ワードを入れると<a href="https://t.co/wlaiKRxOyd">https://t.co/wlaiKRxOyd</a>から画像を取得してくるBOT！<a href="https://twitter.com/hashtag/nodefest?src=hash&amp;ref_src=twsrc%5Etfw">#nodefest</a></p>&mdash; のびすけ / sugawara (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/934692768743440384?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

画像検索も出て来ました。
画像扱えるとビジュアルが圧倒的に良くなりますね。


---

## まとめと所感

**Node.jsとNowを使うと爆速でLINE BOTを作れますし、細かいものを作るときにこの組み合わせはかなり使えます。** **(デバッグの際はngrokがおすすめ)**

**応用してどんどん開発していきましょう。**


見て回った限り、大半の人がデプロイまでたどり着くことができて、7人もオリジナルBOTを作って発表までできるのはさすがの学園祭的なレベルの高さを感じます。

時間内に終わらなかった人もこの記事を見直してチャレンジしてもらえたら幸いです。

参加してくださった皆さんありがとうございました！