Paiza Cloud で LINE Bot を試してみる

プロトアウトスタジオアドベントカレンダー4発目の記事です！

昨日は @tkyko13 さんの「word2vecの勉強で「[word2vecの勉強で「ナダルリバースエボリューション」が再現できるのではないかと思いついたのでやってみた](https://qiita.com/tkyko13/items/0e5d5db8477a64209635)」でした。

## Paiza Cloud とは

[クラウド開発環境 PaizaCloudクラウドIDE \- クラウドIDEでWeb開発\!](https://paiza.cloud/ja/)

![2019-12-03_01h00_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/c8751369-2152-9c0f-0fb1-3180a212fbc1.png)

> ブラウザを開くだけでLinuxサーバが使える!
クラウド開発環境PaizaCloudクラウドIDEでは、ブラウザだけでLinuxサーバを操作できます。ファイル操作、テキスト操作、コマンド操作、Webサーバ/DBサーバの立ち上げなど、全てブラウザだけで行えます。 もう、面倒なコマンドでのログイン(ssh)やファイル操作(vim)、ファイルのアップロードは必要ありません。 目の前のコンピュータと同じように、クラウド上のLinuxサーバを操作できます。

とのことで、以前、Katacodaで [LINE Messaging API Playground \(ja\)](https://www.katacoda.com/1ft-seabass/scenarios/line-messaging-api-playground) を作った身としては興味があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/d4835497-f848-fefd-f6c8-c75595ff7cd7.png)

料金表をみてみても1つのサーバーが無料で24時間使えるので、Katacodaよりも長時間使えます。（2019/12/03現在）

## サーバーを立ち上げる

Paiza Cloud のアカウント登録をして、まず、Node.jsサーバを立てあげてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/2ac86924-2ec2-6139-5141-ac64038348cc.png)

新規サーバーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/60004490-fa7d-bd2c-d48f-db9341e3e258.png)

Node.jsをクリックして新規サーバ作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/f72bced3-fe6d-7712-3d43-0f2687be08c3.png)

このような形で起動します。

## LINE Bot をつくる

[1時間でLINE BOTを作るハンズオン \(資料\+レポート\) in Node学園祭2017 \#nodefest \- Qiita](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)

こちらの資料をベースに、「1. Botアカウントを作成する」を進めてBotと友達になるところまで進めましょう。

「2. Node.jsでBot開発」からはじめます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/3c9836c6-33e1-018d-c925-8b2f03f317d1.png)

左のメニューのターミナルを押して、ターミナルを起動します。

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

を実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/1000f70f-7196-382a-3b1b-7405cba2e7db.png)

無事インストールされました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/9a25db7a-bebe-3150-63fd-13e1431ced59.png)

新規ファイルを押して、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/ccfe06e9-b272-a1be-b488-2595034b98e0.png)

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) => {
    console.log(req.body.events);

    //ここのif分はdeveloper consoleの"接続確認"用なので削除して問題ないです。
    if(req.body.events[0].replyToken === '00000000000000000000000000000000' && req.body.events[1].replyToken === 'ffffffffffffffffffffffffffffffff'){
        res.send('Hello LINE BOT!(POST)');
        console.log('疎通確認用');
        return; 
    }

    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);
  }

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/31838e21-30b8-c274-9c37-adea9fbe6997.png)

保存します。

## 自分のBotとして動くように、Channel SecretとChannel Access Tokenを反映

自分のBotとして動くように、Channel SecretとChannel Access Tokenを反映させます。

[1時間でLINE BOTを作るハンズオン \(資料\+レポート\) in Node学園祭2017 \#nodefest \- Qiita](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#channel-secret%E3%81%A8%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E7%A2%BA%E8%AA%8D)

の流れに沿ってChannel SecretとChannel Access Tokenをメモしておきます。

左上のファイルツリーから server.js を選択してエディタで編集できるようにします。

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

server.jsのこちらを変更します。仮に Channel Secret が ABCDEFGHIJ 、channelAccessTokenが 1234567890 とすると。

```js
const config = {
    channelSecret: 'ABCDEFGHIJ',
    channelAccessToken: '1234567890'
};
```

と、なります。

ファイルを保存します。

## server.jsを動作させてWebhook URLを設定

ターミネルウィンドウで以下のコマンドを打ち込んで起動します。

```
node server.js
```

起動すると Server running at port 3000 と表示されたらOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/d33fe048-efb8-5840-8693-068f449f1a13.png)

## 公開URL確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/54ebdf7c-00ce-50d2-3afb-2c54c9263c50.png)

起動すると左のメニューに 3000 というボタンが出来るので、公開URLを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/52153fe2-6382-bd29-fb54-423ca218e722.png)

内部ブラウザが開いてURLが確認できるのでメモしておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/63360a04-d774-94ee-c066-ffc0547b5c79.png)

こちらをLINEの管理画面のメッセージ送受信設定＞Webhook URLに反映します。

これで準備完了です。

## 動かしてみる

実際にLINEでBotを会話してオウム返しを体験しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/cd2f0591-22a1-16f0-7b2c-8199dcd5a1ef.png)

LINEで話しかけてみると無事返答されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/0498fc9d-c836-f3f1-5869-b8f4342a223d.png)

ターミナルを見てみると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/920371ba-046d-3377-969e-b158d30acd23.png)

サーバーのやり取りも確認できます。

## 明日の記事は…

@doikatsuyuki さんの「Firebaseを利用した中耳炎診療支援Webアプリの作成　(1.Firebaseの設定～認証方法の追加)」です！