Edited at

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

資料1はこちらになります

https://qiita.com/shinbunbun_/private/b1d82f5bd85786a7f06e


はじめに

LINE Messaging APIには日本語のリファレンスがあり、全てのメッセージのコードが書いてあります。

今回はそれを見ながらテンプレートメッセージを返信する事ができるようにしていきます。


テンプレートメッセージとは

詳しくはこちらのページに載っています

テンプレートメッセージとは、以下の画像のようなに少しリッチなメッセージのことです。

テンプレートメッセージには「ボタン」、「確認」、「カルーセル」、「画像カルーセル」の4つがあります。

※画像、説明は上記リンクの公式リファレンスから引用しております


ボタンテンプレート

スクリーンショット 2019-02-07 16.40.27.png


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



確認テンプレート

スクリーンショット 2019-02-07 16.40.27.png


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



カルーセルテンプレート

スクリーンショット 2019-02-07 16.40.27.png


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



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

スクリーンショット 2019-02-07 16.40.27.png


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



確認テンプレートを返信してみよう!

確認テンプレートとは

こんな感じのメッセージです

スクリーンショット 2019-02-07 16.40.27.png

1. Messaging APIリファレンスの確認テンプレートの項目を開きます

2. 右側にあるコードをコピーします

スクリーンショット 2019-02-10 11.57.00.png

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

スクリーンショット 2019-02-10 18.40.44.png

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

スクリーンショット 2019-02-10 11.58.18.png


  1. control+S(Macはcommand+S)キーを押して保存をして下さい。

  2. コードを変更をサーバに反映させるために、サーバを再起動します。「node index.js」を行ったterminalをcontrol+Cキーで終了してから、再度「node index.js」と入力して実行して下さい。

  3. 「Server running at 3000」と表示されたことを確認して下さい

    スクリーンショット 2019-02-10 11.59.55.png



  4. 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"
}
]
}
}

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

スクリーンショット 2019-02-07 16.40.27.png


Azure Functionsにデプロイしてみよう!


Azure Functionsとは

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

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

Azure Functions 機能限定版


  • 60分の制限

  • 追加の npm パッケージを使うことができない

  • クレジットカードは不要

Azure Functions フル機能版


  • Azure サブスクリプションが必要

  • 無料体験版があるが、クレジットカードの登録が必要

まずは前者の機能限定版で作っていきます。


実装してみよう!(機能限定版)



  1. こちらのページにアクセスします

  2. 「Webhook + API」と「JavaScript」を選択して、「Create the function」をクリックします

    スクリーンショット 2019-02-10 18.05.17.png


  3. 自分が持っているアカウントのいずれかでログインします

    スクリーンショット 2019-02-10 18.06.39.png


  4. ログインが完了すると以下のような画面になります

    スクリーンショット 2019-02-10 18.07.32.png


  5. 今あるコードを全て削除します

    スクリーンショット 2019-02-10 18.09.02.png


  6. こちらにアクセスして、書いてあるコードを全てコピーします


  7. 先程のページ(Azure Functions)に貼り付けます

    スクリーンショット 2019-02-10 18.12.41.png


  8. 先程書いたコード(index.js)の「const messageFunc = (e) => {」から先をコピーします

    スクリーンショット 2019-02-10 18.13.34.png


  9. 先程のページ(Azure Functions)に戻り、一番下に1行開けて貼り付けます

    スクリーンショット 2019-02-10 18.14.19.png


  10. control+F(Macはcommand+F)ボタンを押します


  11. 右上にボックスが表示されるので、以下のような作業をして下さい(「console」を全て「context」に置き換える処理です)

    スクリーンショット 2019-02-10 18.32.32.png


  12. 「const messageFunc = (e) => {」を「const messageFunc = (context, e) => {」に書き換えて下さい

    スクリーンショット 2019-02-10 18.38.13.png


  13. 「save」ボタンを押します

    スクリーンショット 2019-02-10 18.15.15.png


  14. 「Get function URL」を押します

    スクリーンショット 2019-02-10 18.15.54.png


  15. 「copy」を押します

    スクリーンショット 2019-02-10 18.16.01.png


  16. 「LINEDevelopers」サイトの「Webhook URL」に貼り付けます
    ※行頭の「https://」は削除してください。また、今回は行末に「/webhook」をつける必要はありません。

    スクリーンショット 2019-02-10 18.17.21.png


  17. 「アクセストークン(ロングターム)」をコピーしてください

    スクリーンショット 2019-02-10 18.28.18.png


  18. 3行目のシングルクォートの間(下の画像の「とーくん」のところ)に貼り付けて下さい

    スクリーンショット 2019-02-10 18.28.55.png


  19. 「save」ボタンを押します

    スクリーンショット 2019-02-10 18.15.15.png


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



実装してみよう!(フル機能版)

※Azureサブスクリプションを購入していない場合は体験版を申し込む必要があります

1. Azure ポータルにアクセスしてください

スクリーンショット 2019-02-10 21.15.45.png


  1. 「リソースグループ」をクリックしてください

    スクリーンショット 2019-02-10 21.15.45.png


  2. リソースグループを選択して下さい(この説明では、事前に作成していた「linedc」と言うリソースを使用します)

    スクリーンショット 2019-02-10 21.15.48.png


  3. 「追加」をクリックします

    スクリーンショット 2019-02-10 21.15.54.png


  4. 「Function」と検索すると「Function App」が出てくるので、これを選択します

    スクリーンショット 2019-02-10 21.16.12.png


  5. 「作成」を押します

    スクリーンショット 2019-02-10 21.16.26.png


  6. 必要事項を入力してから「作成」を押します

    スクリーンショット 2019-02-10 21.17.17.png


  7. ベルのマークを押すと以下のような画面が出るので、「デプロイを実行しています」が「展開が完了しました」になるまで待機して下さい

    スクリーンショット 2019-02-10 21.18.07.png


  8. 「リソースに移動」を押します

    スクリーンショット 2019-02-10 21.19.39.png


  9. CMDを使ってモジュールのインストールをするため、「プラットフォーム機能」を押します

    スクリーンショット 2019-02-10 21.20.00.png


  10. 「コンソール(CMD/PowerShell)」を選択します

    スクリーンショット 2019-02-10 21.21.26.png


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


npm install @line/bot-sdk -g

13.以下のような画面になれば成功です

スクリーンショット 2019-02-10 21.27.39.png


  1. 「概要」を押します

    スクリーンショット 2019-02-10 21.27.52.png


  2. 再起動してモジュールを読み込むため、「再開」を押します

    スクリーンショット 2019-02-10 21.28.03.png


  3. 「OK」を押します

    スクリーンショット 2019-02-10 21.28.07.png


  4. 「関数」の隣にある「+」を押します

    スクリーンショット 2019-02-10 21.28.48.png


  5. 「ポータル内」を選択して、「続行」を押します

    スクリーンショット 2019-02-10 21.31.41.png


  6. 「Webhook + API」を選択して「作成」を押します

    スクリーンショット 2019-02-10 21.31.48.png


  7. 画面上のコードを全てこちらにあるコードに置き換えます


  8. 「保存」を押します

    スクリーンショット 2019-02-10 21.36.37.png


  9. 「関数のURLの取得」→「コピー」を押します

    スクリーンショット 2019-02-10 21.36.42.png


  10. このURLをLINEDevelopersの「Webhook URL」のところに追加して下さい


  11. 送ったメッセージがおうむ返しされてきたら完成です