LINE Bot Designerで初めてのテンプレート作成

#0. 前提

#1. プロジェクトの作成
###1-1. プロジェクト作成ボタンを押して、任意のプロジェクト名にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/0d73d614-f81e-c243-3375-157412f90084.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/c9748f70-613c-cd81-eef8-036eadacb52f.png)

###1-2. メッセージタブから、確認型テンプレートメッセージを選択
確認型テンプレートメッセージとは、一つの質問に対して二択の答えを選択できる形式

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/e206f01c-dd40-ffc8-b330-33b2a12bbeba.png)

###1-3.プロパティの選択とメッセージオブジェクトの作成
ラベル：　ボタンの表示
テキスト：ユーザーが送信する内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/981a1ae5-1ebf-b0bf-8923-bcc5424143a4.png)

すると、右下にメッセージオブジェクトが生成された

```
{
  "type": "template",
  "altText": "this is a confirm template",
  "template": {
    "type": "confirm",
    "actions": [
      {
        "type": "message",
        "label": "はい",
        "text": "はい"
      },
      {
        "type": "message",
        "label": "いいえ",
        "text": "いいえ"
      }
    ],
    "text": "現行のオピオイドを変更しますか？"
  }
}

```

###1-4.メッセージオブジェクトの挿入
これをコピーしておいて、以下のオウム返しBotのコードを修正
+変更前

```server.js
'use strict';

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

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

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

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

+ 変更後

```server.js
'use strict';

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

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

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

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

  // ===================================ここから
  let message = {
    type: 'text',
    text: event.message.text
  };

  if (event.message.text === '確認') {
    message = {}; // ←ここにBot Designerで生成したメッセージオブジェクトを貼り付ける
  }

  return client.replyMessage(event.replyToken, message);
  // ===================================ここまで変更
}

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

とした上で、`←ここにBot Designerで生成したメッセージオブジェクトを貼り付ける`　

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

  // ===================================ここから
  let message = {
    type: 'text',
    text: event.message.text
  };

  if (event.message.text === '確認') {
    message = {
        "type": "template",
        "altText": "this is a confirm template",
        "template": {
          "type": "confirm",
          "actions": [
            {
              "type": "message",
              "label": "はい",
              "text": "はい"
            },
            {
              "type": "message",
              "label": "いいえ",
              "text": "いいえ"
            }
          ],
          "text": "現行のオピオイドを変更しますか？"
      }
    }; // ここにBot Designerで生成したメッセージオブジェクトを貼り付ける
  }

  return client.replyMessage(event.replyToken, message);
  // ===================================ここまで変更
}
```
★注★　　`control+C` で`server.js`　を一時停止して、`node server.js`で再実行

###1-5.結果
　
![IMG_8516.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/e35a0dbc-cc91-bfeb-37e6-352e9ff43dd1.jpeg)

`確認`と入力すると、1-3で生成した確認型メッセージテンプレートが生成された。

ここで更にメッセージアクションを設定すると、ユーザーがそのメッセージを送信したようにもできるし、URLアクションを設定すると、WEBページを開くことができる。

#2.リッチメニューを作る

[公式ドキュメント](https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/#using-rich-menus-introduction)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/12d0fbb1-b92e-47ff-d49e-a616f702129c.png)

から、今回、私が選択したツールは、簡単な方のLINE Official Account Manager。

開いておくページは２つ
①[公式ドキュメント] (https://www.linebiz.com/jp/manual/OfficialAccountManager/rich-menus/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/e927c0ff-01cf-41b1-fd5d-c2cd5c332b82.png)

②リッチメニューを作るチャネルの`LINE Official Account Manager `

###2-1.表示設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/9c6f4ab7-3976-13a3-9276-679e9251392a.png)

`LINE Official Account Manager ` にて　ホーム>トークルーム管理>リッチメニューをクリックして　作成ボタンを押すと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/8c90531b-ca25-f22e-6c19-25fb1de76546.png)


入力する内容

+ タイトル：ユーザー表示はされないので、作成者がわかればOK
+ 表示期間：リッチメニューが表示される期間　　　ここでは適当に５年くらいにしておく
+ メニューバーのテキスト：↓の `チェック`　に相当する部分
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/138f84b6-75bc-25e1-0115-5cd7e9edc0cb.png)
+ メニューのデフォルト表示：トークルームを開いたときに、自動的にリッチメニューを表示するか否か

とりあえずは、↓のように入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/9f54c0ac-7967-a161-f1d4-b446a61f997e.png)


###2-2.コンテンツ設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/b02481f0-cc0f-3882-166a-10b97bacc7f8.png)

テンプレートボタンをクリックして、小２つのものを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/ff6dc9b2-17fc-522b-dcd2-241cca3d50b6.png)

`画像を作成`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/0e0914f8-88d4-38de-a1aa-96e869abd30b.png)

`背景画像をアップロード`して自前で作りたい場合は↓を参考に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/9fba791d-6e5b-c23e-8cd6-bceff78466e7.png)

###2-3.画像を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/dfb035e4-51d8-f5ea-025f-46b7cde9e393.png)
パワーポイント感覚で、テキスト入力
左側を`公式ホームページ`　右側を`お問い合わせ`　した。

###2-4.アクションを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/c2c17603-5b3f-c096-9380-8d2590341ab1.png)

ショップカード：スタンプラリー機能
アクションラベル：音声読みあげ機能のときに、どのように読ませるか？　　

#3.結果
![IMG_A2F3B099987E-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1565008/e083badb-e738-eae5-f473-a6caf1467efd.jpeg)

無事、リッチメニューの表示ができた。