資料1はこちらになります
https://qiita.com/shinbunbun_/private/b1d82f5bd85786a7f06e
#はじめに
LINE Messaging APIには日本語のリファレンスがあり、全てのメッセージのコードが書いてあります。
今回はそれを見ながらテンプレートメッセージを返信する事ができるようにしていきます。
#テンプレートメッセージとは
詳しくはこちらのページに載っています
テンプレートメッセージとは、以下の画像のようなに少しリッチなメッセージのことです。
テンプレートメッセージには「ボタン」、「確認」、「カルーセル」、「画像カルーセル」の4つがあります。
※画像、説明は上記リンクの公式リファレンスから引用しております
###ボタンテンプレート
画像、タイトル、テキストに加えて、複数のアクションボタンが含まれたテンプレートです。
2つのアクションボタンを表示するテンプレートです。
複数のカラムを表示するテンプレートです。カラムは横にスクロールして順番に表示できます。
複数の画像を表示するテンプレートです。画像は横にスクロールして順番に表示できます。
#確認テンプレートを返信してみよう!
確認テンプレートとは
こんな感じのメッセージです
- Messaging APIリファレンスの確認テンプレートの項目を開きます
- 右側にあるコードをコピーします
![スクリーンショット 2019-02-10 11.57.00.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fba8d10e8-dc63-2b94-7dcd-eb0c2e84c5d6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e3696cd8ca3ea1c6b2f9154c59bb2acb)
![スクリーンショット 2019-02-10 18.40.44.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F91dd9e76-ab43-288a-de9e-e4196e368a5a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3c4a95c11e6d86564b7c7bbbca4d6915)
![スクリーンショット 2019-02-10 11.58.18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fe935faa7-fef7-76a3-cb27-8d256a42df50.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c41a270781353d158f07ff03e55ac70f)
- control+S(Macはcommand+S)キーを押して保存をして下さい。
- コードを変更をサーバに反映させるために、サーバを再起動します。「node index.js」を行ったterminalをcontrol+Cキーで終了してから、再度「node index.js」と入力して実行して下さい。
- 「Server running at 3000」と表示されたことを確認して下さい
![スクリーンショット 2019-02-10 11.59.55.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F0f0f457e-52ec-f511-008b-0c9061ad6894.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d63a2590e05273258d2673ff8f620da6)
- 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 機能限定版
- 60分の制限
- 追加の npm パッケージを使うことができない
- クレジットカードは不要
Azure Functions フル機能版
- Azure サブスクリプションが必要
- 無料体験版があるが、クレジットカードの登録が必要
まずは前者の機能限定版で作っていきます。
##実装してみよう!(機能限定版)
- こちらのページにアクセスします
- 「Webhook + API」と「JavaScript」を選択して、「Create the function」をクリックします
![スクリーンショット 2019-02-10 18.05.17.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fb25550a8-a411-f08f-3ff3-0cd869cb8527.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ee58395948e1beca0dddad7ad8177dfb)
- 自分が持っているアカウントのいずれかでログインします
![スクリーンショット 2019-02-10 18.06.39.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Ff9cbe793-8ad2-2e25-7eeb-4acceefb3e87.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ce18f66efc7078caf737ef35301c186a)
- ログインが完了すると以下のような画面になります
![スクリーンショット 2019-02-10 18.07.32.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F5702b2fa-caad-99a8-ba0b-2c8f6cab6ecb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=422f3bf92614ac339ceaa2e5f23b7c77)
- 今あるコードを全て削除します
![スクリーンショット 2019-02-10 18.09.02.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fcace13dd-decb-2607-08f8-e80de3efef90.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bf3712a96973cda114b0f336a889d6e9)
- こちらにアクセスして、書いてあるコードを全てコピーします
- 先程のページ(Azure Functions)に貼り付けます
![スクリーンショット 2019-02-10 18.12.41.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F874aa262-3ab7-b48f-f6b6-063ac5cdd742.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fe500515ae8fd71a57a5848a5a0bb97e)
- 先程書いたコード(index.js)の「const messageFunc = (e) => {」から先をコピーします
![スクリーンショット 2019-02-10 18.13.34.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fb1193915-ccef-d5c3-4f3b-cb6a8f736cde.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b2f5bb0814cb6da0c453534dc8e62d13)
- 先程のページ(Azure Functions)に戻り、一番下に1行開けて貼り付けます
![スクリーンショット 2019-02-10 18.14.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fc448efd2-b84a-4231-8e2c-c68a7f412b23.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=714c36ed5e58dbcfc2b40fe4f8733f04)
- control+F(Macはcommand+F)ボタンを押します
- 右上にボックスが表示されるので、以下のような作業をして下さい(「console」を全て「context」に置き換える処理です)
![スクリーンショット 2019-02-10 18.32.32.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fb6a51bd6-1846-bae5-8683-f95c754eb5e1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9d8aceb0394f386cfda9f735b739b163)
- 「const messageFunc = (e) => {」を「const messageFunc = (context, e) => {」に書き換えて下さい
![スクリーンショット 2019-02-10 18.38.13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Ffee2ea32-33ae-9287-78df-84a995614bbe.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=43bc77a91ed1c0b79cab703857803fee)
- 「save」ボタンを押します
![スクリーンショット 2019-02-10 18.15.15.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F685d37ca-1aea-4499-3f27-bbcbe334f4fb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=37d051c02b67ddfba06464cc1d880345)
- 「Get function URL」を押します
![スクリーンショット 2019-02-10 18.15.54.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F0f7914bf-e1f6-1650-5f1d-2e0228852b05.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=23b9cdbeeab99bbb6d0e215828cbc798)
- 「copy」を押します
![スクリーンショット 2019-02-10 18.16.01.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F0452bfcd-da5e-efcf-ccf8-8cd8ce53b694.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5a51a213e73064b01d6a2f1c3f6263f5)
- 「LINEDevelopers」サイトの「Webhook URL」に貼り付けます
※行頭の「https://」は削除してください。また、今回は行末に「/webhook」をつける必要はありません。
![スクリーンショット 2019-02-10 18.17.21.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fad79fdec-9439-9cee-7b8d-89eba29d5f93.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=045b579830e6828e6d136e51d16c45f8)
![スクリーンショット 2019-02-10 18.28.55.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F001cd54d-5553-fd56-9470-1825412a7324.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b75a9b6919c77a6509d1b00a3ab9a686)
- 「save」ボタンを押します
![スクリーンショット 2019-02-10 18.15.15.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F685d37ca-1aea-4499-3f27-bbcbe334f4fb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=37d051c02b67ddfba06464cc1d880345)
- LINE(スマホアプリ)からメッセージを送り、先程と同じテンプレートメッセージが返って来れば成功です
##実装してみよう!(フル機能版)
※Azureサブスクリプションを購入していない場合は体験版を申し込む必要があります
- Azure ポータルにアクセスしてください
![スクリーンショット 2019-02-10 21.15.45.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F04c418fd-fddb-fe7d-a8b8-d3190bc9b5a8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9fff491ca42069247140fd6224031670)
- 「リソースグループ」をクリックしてください
![スクリーンショット 2019-02-10 21.15.45.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F601324d4-23f1-2caf-31cd-c88a7c0b2918.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0ea0db748db22575d34ef0c31a9c5aa3)
- リソースグループを選択して下さい(この説明では、事前に作成していた「linedc」と言うリソースを使用します)
![スクリーンショット 2019-02-10 21.15.48.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F45f1a72b-51d3-86ef-5dd1-de67ccefc1c3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=13022e4128440915c8b3788ef58f2479)
- 「追加」をクリックします
![スクリーンショット 2019-02-10 21.15.54.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F682646ba-9a82-ef36-78e8-0b12ed351cd0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1c072bfbe9fbbe24bc93cf4ca4e02531)
- 「Function」と検索すると「Function App」が出てくるので、これを選択します
![スクリーンショット 2019-02-10 21.16.12.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fd18a0a96-e008-4cdf-5c33-5859b985a4cd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=565f66ee6ea341217385491b29d171ba)
- 「作成」を押します
![スクリーンショット 2019-02-10 21.16.26.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F96225605-735c-9aa2-9c84-d03df0f24bb8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=90daa55b0cf6cc87938c5dbf1ee5243c)
![スクリーンショット 2019-02-10 21.18.07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Ff934d175-ef69-c2f9-850b-9a7176a9418b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e806f1d571cb1f6f2145af0c37120c1d)
- 「リソースに移動」を押します
![スクリーンショット 2019-02-10 21.19.39.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F48825ed6-a9e8-bb4f-4a90-89a7d6a3a281.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fa105d29fa924f38705e563abade47a9)
- CMDを使ってモジュールのインストールをするため、「プラットフォーム機能」を押します
![スクリーンショット 2019-02-10 21.20.00.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fea97a979-03e8-4964-91d5-233dbf6eeee3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9db286751b60b8d8f078d86b48c38eae)
- 「コンソール(CMD/PowerShell)」を選択します
![スクリーンショット 2019-02-10 21.21.26.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F3158672d-2fb8-fd4e-1a3e-4293691a824a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=92acb1bf68efe9070ce10d72a3a9d585)
- 以下のコマンドを入力して下さい
npm install @line/bot-sdk -g
- 「概要」を押します
![スクリーンショット 2019-02-10 21.27.52.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F95b55cb9-8697-9101-6b30-a9b63db82283.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0bc3cbb76f65fa2200212127c316d088)
- 再起動してモジュールを読み込むため、「再開」を押します
![スクリーンショット 2019-02-10 21.28.03.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F476abc3a-a373-c332-0709-129eb166935a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f74d227b87ac1d384dca1615f1fbe0a0)
- 「OK」を押します
![スクリーンショット 2019-02-10 21.28.07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F15960b13-8b3f-b4f2-d26c-f73b48baae35.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4ef4af552cac956da54bc5c3c20a64ae)
- 「関数」の隣にある「+」を押します
![スクリーンショット 2019-02-10 21.28.48.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F1c768c11-739c-0b64-10c8-cf0da60eda97.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9d556f3950277761617ccd39868c9a8f)
- 「ポータル内」を選択して、「続行」を押します
![スクリーンショット 2019-02-10 21.31.41.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Fa533034f-4ae8-2120-6278-89b2d3e9a28e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d9d3113a0b8cb1e8de0626147f89d0ad)
- 「Webhook + API」を選択して「作成」を押します
![スクリーンショット 2019-02-10 21.31.48.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F82d87a9b-66ce-d415-a3de-c765d8e4c1be.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=069ef17efc8d66a30118681750c5f44a)
- 画面上のコードを全てこちらにあるコードに置き換えます
- 「保存」を押します
![スクリーンショット 2019-02-10 21.36.37.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2Ff6e3c16e-dba6-f600-7b81-ad0026602a57.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5e109be4b3bfd059cb8c29215a6cbd51)
- 「関数のURLの取得」→「コピー」を押します
![スクリーンショット 2019-02-10 21.36.42.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F260292%2F67641b2c-aca7-7586-9559-c91d8f286250.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e76097136f1c81ebef3effd5097b5137)
- このURLをLINEDevelopersの「Webhook URL」のところに追加して下さい
- 送ったメッセージがおうむ返しされてきたら完成です