More than 5 years have passed since last update.

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

Last updated at 2019-02-11Posted at 2019-02-11

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

テンプレートメッセージとは、以下の画像のようなに少しリッチなメッセージのことです。
テンプレートメッセージには「ボタン」、「確認」、「カルーセル」、「画像カルーセル」の4つがあります。
※画像、説明は上記リンクの公式リファレンスから引用しております
###ボタンテンプレート

画像、タイトル、テキストに加えて、複数のアクションボタンが含まれたテンプレートです。

###確認テンプレート

2つのアクションボタンを表示するテンプレートです。

###カルーセルテンプレート

複数のカラムを表示するテンプレートです。カラムは横にスクロールして順番に表示できます。

###画像カルーセルテンプレート

複数の画像を表示するテンプレートです。画像は横にスクロールして順番に表示できます。

#確認テンプレートを返信してみよう！
確認テンプレートとは
こんな感じのメッセージです

Messaging APIリファレンスの確認テンプレートの項目を開きます
右側にあるコードをコピーします

3. 先程書いたコード(index.js)の以下の部分を削除して、今コピーしたコードを貼り付けます

4. 以下のような状態になります

control+S(Macはcommand+S)キーを押して保存をして下さい。
コードを変更をサーバに反映させるために、サーバを再起動します。「node index.js」を行ったterminalをcontrol+Cキーで終了してから、再度「node index.js」と入力して実行して下さい。
「Server running at 3000」と表示されたことを確認して下さい

botに「こんにちは」と送信して、最初の画像のようなメッセージが返ってきたら成功です
##コード解説

{
  "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行目からは左ボタンの設定です。右ボタン同じように設定出来ます

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

例えばこのようなコードにした場合は以下のようなメッセージになります

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

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