プログラミング未経験者向け Node.js で LINE Bot 開発講座 資料2（テンプレートメッセージ編）


資料1はこちらになります
https://qiita.com/shinbunbun_/private/b1d82f5bd85786a7f06e
#はじめに
LINE Messaging APIには日本語のリファレンスがあり、全てのメッセージのコードが書いてあります。
今回はそれを見ながらテンプレートメッセージを返信する事ができるようにしていきます。
#テンプレートメッセージとは
詳しくは[こちらのページ](https://developers.line.biz/ja/docs/messaging-api/message-types/#template-messages)に載っています

テンプレートメッセージとは、以下の画像のようなに少しリッチなメッセージのことです。
テンプレートメッセージには「ボタン」、「確認」、「カルーセル」、「画像カルーセル」の4つがあります。
※画像、説明は上記リンクの公式リファレンスから引用しております
###ボタンテンプレート
<img height="500" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://developers.line.biz/media/messaging-api/messages/buttons-86e14165.png">
>画像、タイトル、テキストに加えて、複数のアクションボタンが含まれたテンプレートです。

###確認テンプレート
<img height="500" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://developers.line.biz/media/messaging-api/messages/confirm-444aead5.png">
>2つのアクションボタンを表示するテンプレートです。

###カルーセルテンプレート
<img height="500" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://developers.line.biz/media/messaging-api/messages/carousel-c59baef6.png">
>複数のカラムを表示するテンプレートです。カラムは横にスクロールして順番に表示できます。

###画像カルーセルテンプレート
<img height="500" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://developers.line.biz/media/messaging-api/messages/image-carousel-301701f6.png">
>複数の画像を表示するテンプレートです。画像は横にスクロールして順番に表示できます。

#確認テンプレートを返信してみよう！
<b>確認テンプレートとは</b>
こんな感じのメッセージです
<img height="500" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://firebasestorage.googleapis.com/v0/b/picture-e5254.appspot.com/o/mui30-95r79.gif?alt=media&token=3f9ac883-352d-44de-bde0-4acb02b52cc4">
1. [Messaging APIリファレンスの確認テンプレートの項目](https://developers.line.biz/ja/reference/messaging-api/#confirm)を開きます
2. 右側にあるコードをコピーします
<img width="1440" alt="スクリーンショット 2019-02-10 11.57.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/ba8d10e8-dc63-2b94-7dcd-eb0c2e84c5d6.png">
3. 先程書いたコード(index.js)の以下の部分を削除して、今コピーしたコードを貼り付けます
<img width="395" alt="スクリーンショット 2019-02-10 18.40.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/91dd9e76-ab43-288a-de9e-e4196e368a5a.png">
4. 以下のような状態になります
<img width="745" alt="スクリーンショット 2019-02-10 11.58.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/e935faa7-fef7-76a3-cb27-8d256a42df50.png">

3. control+S(Macはcommand+S)キーを押して保存をして下さい。
4. コードを変更をサーバに反映させるために、サーバを再起動します。「node index.js」を行ったterminalをcontrol+Cキーで終了してから、再度「node index.js」と入力して実行して下さい。
5. 「Server running at 3000」と表示されたことを確認して下さい
<img width="1099" alt="スクリーンショット 2019-02-10 11.59.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/0f0f457e-52ec-f511-008b-0c9061ad6894.png">

6. botに「こんにちは」と送信して、最初の画像のようなメッセージが返ってきたら成功です
##コード解説
```json
{
  "type": "template",
  "altText": "this is a confirm template",
  "template": {
      "type": "confirm",
      "text": "Are you sure?",
      "actions": [
          {
            "type": "message",
            "label": "Yes",
            "text": "yes"
          },
          {
            "type": "message",
            "label": "No",
            "text": "no"
          }
      ]
  }
```
1行目：送信するメッセージのタイプを指定しています。テキストメッセージであれば「text」、画像メッセージであれば「image」、テンプレートメッセージであれば「template」というようになります
2行目：通知などに表示されるメッセージです
4行目：テンプレートメッセージのタイプを指定しています。今回は確認テンプレートなので「confirm」になっています
5行目：ボタンの上に表示するメッセージを指定しています
6行目：ここから、ボタンを押した時のアクションについて設定しています
7行目：ここから11行目までが左側のボタンを押した時の処理になっています
8行目：左側のボタンが押された時に「ユーザーがbotに対して行う」アクションになります。今回はユーザーがbotに対してメッセージを送信するアクションになっているため、「message」になっています。
9行目：ボタンに表示する文字を指定しています
10行目：左側のボタンが押された時に、ユーザーがbotに送信するメッセージを指定しています
12行目：ここから16行目までが右側のボタンを押した時の処理になっています

###要するに
- 3行目のaltTextを変更すると、通知に表示されるメッセージを変更する事が出来ます
- 5行目のtextを変更するとボタンの上に表示されるメッセージを変更する事が出来ます
- 9行目のlabelを変更するとボタンに表示するメッセージを変える事が出来ます
- 10行目のtextを変更すると、左側のボタンが押された時に、ユーザーがbotに送信するメッセージを変更することが出来ます
- 12行目からは左ボタンの設定です。右ボタン同じように設定出来ます
<br><br><br>

```json
{
	"type": "template",
	"altText": "てんぷれーとめっせーじだよん",
	"template": {
		"type": "confirm",
		"text": "どっちかえらんでね♡",
		"actions": [
			{
				"type": "message",
				"label": "ひだり",
				"text": "left"
			},
			{
				"type": "message",
				"label": "みぎ",
				"text": "right"
			}
		]
	}
}
```

例えばこのようなコードにした場合は以下のようなメッセージになります
<img height="500" alt="スクリーンショット 2019-02-07 16.40.27.png" src="https://firebasestorage.googleapis.com/v0/b/picture-e5254.appspot.com/o/6qzak-8eorc.gif?alt=media&token=99b7386a-ae6f-4811-ad56-f4f41726546f">

#Azure Functionsにデプロイしてみよう！
##Azure Functionsとは
先ほどまではローカルPCで実行していたプログラムを ngrok 経由で LINE に返していました。Azure Functions のようなサービスを使うと、自分のコードをパブリックのサーバーで実行できるようになります。

また、Azure Functionsには機能限定版とフル機能版があります
<b>Azure Functions 機能限定版</b>

- 60分の制限
- 追加の npm パッケージを使うことができない
- クレジットカードは不要

<b>Azure Functions フル機能版</b>

- Azure サブスクリプションが必要
- 無料体験版があるが、クレジットカードの登録が必要

まずは前者の機能限定版で作っていきます。
##実装してみよう！（機能限定版）
1. [こちらのページ](https://tryfunctions.com/ng-min/try?trial=true)にアクセスします
2. 「Webhook + API」と「JavaScript」を選択して、「Create the function」をクリックします
<img width="834" alt="スクリーンショット 2019-02-10 18.05.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/b25550a8-a411-f08f-3ff3-0cd869cb8527.png">

3. 自分が持っているアカウントのいずれかでログインします
<img width="784" alt="スクリーンショット 2019-02-10 18.06.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/f9cbe793-8ad2-2e25-7eeb-4acceefb3e87.png">

4. ログインが完了すると以下のような画面になります
<img width="1440" alt="スクリーンショット 2019-02-10 18.07.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/5702b2fa-caad-99a8-ba0b-2c8f6cab6ecb.png">

5. 今あるコードを全て削除します
<img width="1440" alt="スクリーンショット 2019-02-10 18.09.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/cace13dd-decb-2607-08f8-e80de3efef90.png">

6. [こちら](https://github.com/shinbunbun/2019-2-11-hands-on/blob/master/%20Azure_limited.js)にアクセスして、書いてあるコードを全てコピーします
7. 先程のページ(Azure Functions)に貼り付けます
<img width="1162" alt="スクリーンショット 2019-02-10 18.12.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/874aa262-3ab7-b48f-f6b6-063ac5cdd742.png">

8. 先程書いたコード(index.js)の「const messageFunc = (e) => {」から先をコピーします
<img width="1067" alt="スクリーンショット 2019-02-10 18.13.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/b1193915-ccef-d5c3-4f3b-cb6a8f736cde.png">

9. 先程のページ(Azure Functions)に戻り、一番下に1行開けて貼り付けます
<img width="1169" alt="スクリーンショット 2019-02-10 18.14.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/c448efd2-b84a-4231-8e2c-c68a7f412b23.png">

10. control+F(Macはcommand+F)ボタンを押します
11. 右上にボックスが表示されるので、以下のような作業をして下さい（「console」を全て「context」に置き換える処理です）
<img width="457" alt="スクリーンショット 2019-02-10 18.32.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/b6a51bd6-1846-bae5-8683-f95c754eb5e1.png">

13. 「const messageFunc = (e) => {」を「const messageFunc = (context, e) => {」に書き換えて下さい
<img width="372" alt="スクリーンショット 2019-02-10 18.38.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/fee2ea32-33ae-9287-78df-84a995614bbe.png">

12. 「save」ボタンを押します
<img width="1440" alt="スクリーンショット 2019-02-10 18.15.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/685d37ca-1aea-4499-3f27-bbcbe334f4fb.png">

13. 「Get function URL」を押します
<img width="1440" alt="スクリーンショット 2019-02-10 18.15.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/0f7914bf-e1f6-1650-5f1d-2e0228852b05.png">

14. 「copy」を押します
<img width="623" alt="スクリーンショット 2019-02-10 18.16.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/0452bfcd-da5e-efcf-ccf8-8cd8ce53b694.png">

15. 「LINEDevelopers」サイトの「Webhook URL」に貼り付けます<br>※行頭の「https://」は削除してください。また、今回は行末に「/webhook」をつける必要はありません。
<img width="1162" alt="スクリーンショット 2019-02-10 18.17.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/ad79fdec-9439-9cee-7b8d-89eba29d5f93.png">

16. 「アクセストークン（ロングターム）」をコピーしてください
![スクリーンショット 2019-02-10 18.28.18.png](https://qiita-image-store.s3.amazonaws.com/0/260292/fa44d272-e769-8177-e5f2-3ea9ebb8afe2.png)

17. 3行目のシングルクォートの間（下の画像の「とーくん」のところ）に貼り付けて下さい
<img width="407" alt="スクリーンショット 2019-02-10 18.28.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/001cd54d-5553-fd56-9470-1825412a7324.png">

18. 「save」ボタンを押します
<img width="1440" alt="スクリーンショット 2019-02-10 18.15.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/685d37ca-1aea-4499-3f27-bbcbe334f4fb.png">

19. LINE（スマホアプリ）からメッセージを送り、先程と同じテンプレートメッセージが返って来れば成功です

##実装してみよう！（フル機能版）
※Azureサブスクリプションを購入していない場合は体験版を申し込む必要があります
1. [Azure ポータル](https://portal.azure.com/#home)にアクセスしてください
<img width="1440" alt="スクリーンショット 2019-02-10 21.15.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/04c418fd-fddb-fe7d-a8b8-d3190bc9b5a8.png">

2. 「リソースグループ」をクリックしてください
<img width="532" alt="スクリーンショット 2019-02-10 21.15.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/601324d4-23f1-2caf-31cd-c88a7c0b2918.png">

3. リソースグループを選択して下さい（この説明では、事前に作成していた「linedc」と言うリソースを使用します）
<img width="1309" alt="スクリーンショット 2019-02-10 21.15.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/45f1a72b-51d3-86ef-5dd1-de67ccefc1c3.png">

4. 「追加」をクリックします
<img width="1083" alt="スクリーンショット 2019-02-10 21.15.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/682646ba-9a82-ef36-78e8-0b12ed351cd0.png">

5. 「Function」と検索すると「Function App」が出てくるので、これを選択します
<img width="900" alt="スクリーンショット 2019-02-10 21.16.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/d18a0a96-e008-4cdf-5c33-5859b985a4cd.png">

6. 「作成」を押します
<img width="1432" alt="スクリーンショット 2019-02-10 21.16.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/96225605-735c-9aa2-9c84-d03df0f24bb8.png">

7. 必要事項を入力してから「作成」を押します
![スクリーンショット 2019-02-10 21.17.17.png](https://qiita-image-store.s3.amazonaws.com/0/260292/bbb5fe6c-b4a0-1b55-8974-729f8fee3bf8.png)

8. ベルのマークを押すと以下のような画面が出るので、「デプロイを実行しています」が「展開が完了しました」になるまで待機して下さい
<img width="713" alt="スクリーンショット 2019-02-10 21.18.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/f934d175-ef69-c2f9-850b-9a7176a9418b.png">

9. 「リソースに移動」を押します
<img width="757" alt="スクリーンショット 2019-02-10 21.19.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/48825ed6-a9e8-bb4f-4a90-89a7d6a3a281.png">

10. CMDを使ってモジュールのインストールをするため、「プラットフォーム機能」を押します
<img width="1421" alt="スクリーンショット 2019-02-10 21.20.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/ea97a979-03e8-4964-91d5-233dbf6eeee3.png">

11. 「コンソール（CMD/PowerShell）」を選択します
<img width="1134" alt="スクリーンショット 2019-02-10 21.21.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/3158672d-2fb8-fd4e-1a3e-4293691a824a.png">

12. 以下のコマンドを入力して下さい

```terminal
npm install @line/bot-sdk -g
```

13.以下のような画面になれば成功です
<img width="556" alt="スクリーンショット 2019-02-10 21.27.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/68f130f6-1134-bfd6-366e-eaef09c94f1d.png">

14. 「概要」を押します
<img width="1423" alt="スクリーンショット 2019-02-10 21.27.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/95b55cb9-8697-9101-6b30-a9b63db82283.png">

15. 再起動してモジュールを読み込むため、「再開」を押します
<img width="737" alt="スクリーンショット 2019-02-10 21.28.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/476abc3a-a373-c332-0709-129eb166935a.png">

16. 「OK」を押します
<img width="523" alt="スクリーンショット 2019-02-10 21.28.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/15960b13-8b3f-b4f2-d26c-f73b48baae35.png">

17. 「関数」の隣にある「+」を押します
<img width="749" alt="スクリーンショット 2019-02-10 21.28.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/1c768c11-739c-0b64-10c8-cf0da60eda97.png">

18. 「ポータル内」を選択して、「続行」を押します
<img width="929" alt="スクリーンショット 2019-02-10 21.31.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/a533034f-4ae8-2120-6278-89b2d3e9a28e.png">

18. 「Webhook + API」を選択して「作成」を押します
<img width="954" alt="スクリーンショット 2019-02-10 21.31.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/82d87a9b-66ce-d415-a3de-c765d8e4c1be.png">

19. 画面上のコードを全て[こちら](https://github.com/shinbunbun/2019-2-11-hands-on/blob/master/Azure.js)にあるコードに置き換えます
20. 「保存」を押します
<img width="875" alt="スクリーンショット 2019-02-10 21.36.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/f6e3c16e-dba6-f600-7b81-ad0026602a57.png">

21. 「関数のURLの取得」→「コピー」を押します
<img width="1027" alt="スクリーンショット 2019-02-10 21.36.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/260292/67641b2c-aca7-7586-9559-c91d8f286250.png">

22. このURLをLINEDevelopersの「Webhook URL」のところに追加して下さい
23. 送ったメッセージがおうむ返しされてきたら完成です