見出し画像
Photo by yamoyamori

第11話　予約の確認メッセージを作成

Ken

さて、前回は希望の時間帯を問うリプライをするところまでを実装しました。

今回は予約確定前の最終メッセージの実装です。今までの知識でできる割とゆるい回です（笑）

こんなメッセージをリプライすることを目標とします。

画像1

Postbackイベントの処理

前回は希望時間帯選択メッセージを作成しました。

時間帯ボタンをタップするとどのようなイベントが返ってくるのでしょうか。まずはそこから見てみましょう。

ev: {
type: 'postback',
replyToken: 'xxxxxxxxxxxxxxxxxxx',
source: { userId: 'yyyyyyyyyyyyy', type: 'user' },
timestamp: 1601554070567,
mode: 'active',
postback: { data: 'time&4&2020-09-30&3' }
}

イベントオブジェクトはもうお馴染みですね。

重要なのはev.postback.dataとなります。

お客様の回答を&で数珠つなぎにしております。

■time→希望時間帯の回答を示す
■4→希望メニューを示す（4はマッサージ＆パック）
■2020-09-30→来店希望日を示す
■3→希望時間帯を示す（3は12時台）

ev.typeがpostbackの場合、handlePostbackEvent関数内で処理されます。

関数の冒頭で、ev.postback.dataはsplit('&')メソッドにより、配列へ分解されます。上の例では次のような配列へと分解されます。

[ 'time', '4', '2020-09-30', '3' ]

配列の0番目の要素によって場合分けしてあげます。

const handlePostbackEvent = async (ev) => {
   console.log('postback ev:',ev);
   const profile = await client.getProfile(ev.source.userId);
   const data = ev.postback.data;
   const splitData = data.split('&');
   if(splitData[0] === 'menu'){
       const orderedMenu = splitData[1];
       askDate(ev,orderedMenu);
   }else if(splitData[0] === 'date'){
       const orderedMenu = splitData[1];
       const selectedDate = ev.postback.params.date;
       askTime(ev,orderedMenu,selectedDate);
   }else if(splitData[0] === 'time'){
       const orderedMenu = splitData[1];
       const selectedDate = splitData[2];
       const selectedTime = splitData[3];
       confirmation(ev,orderedMenu,selectedDate,selectedTime);
   }
}

confirmation()は確認メッセージをリプライする関数です。

Flex Messageの作成

もう完璧に慣れたことかと思いますが、リプライのFlex MessageをSimulatorで作りましょう。

画像2

あまり解説することもありませんが、「次回予約は〜」のくだりがデフォルトだと折り返しが有効となってませんので、wrapをtrueとします。

はい、いいえボタンのAction type はpostback、dataはとりあえず、yes&、no&としておきます。

confirmation( )関数の実装

メッセージテキスト、dataを編集したconfirmation関数のコードが以下となります。

const confirmation = (ev,menu,date,time) => {
 const splitDate = date.split('-');
 const selectedTime = 9 + parseInt(time);
 
 return client.replyMessage(ev.replyToken,{
   "type":"flex",
   "altText":"menuSelect",
   "contents":
   {
     "type": "bubble",
     "body": {
       "type": "box",
       "layout": "vertical",
       "contents": [
         {
           "type": "text",
           "text": `次回予約は${splitDate[1]}月${splitDate[2]}日 ${selectedTime}時〜でよろしいですか？`,
           "size": "lg",
           "wrap": true
         }
       ]
     },
     "footer": {
       "type": "box",
       "layout": "horizontal",
       "contents": [
         {
           "type": "button",
           "action": {
             "type": "postback",
             "label": "はい",
             "data": `yes&${menu}&${date}&${time}`
           }
         },
         {
           "type": "button",
           "action": {
             "type": "postback",
             "label": "いいえ",
             "data": `no&${menu}&${date}&${time}`
           }
         }
       ]
     }
   }
 });
}

dateの形式は例えば、'2020-09-30'といった形式なので、'-'で分割してあげて、月と日の部分だけをメッセージ中に使用してます。

selectedTimeと言う変数を用意してあげてます。postback.dataの中のtimeは7ではなく'7'なのです。これは、文字列型か数値型かを意味してます。postback.dataで返ってくるのは全て文字列型です。ですので、&で分割した時間を表す数値も文字列型なのです。時間を表す数値は0→9時を表す、1→10時を表すように設定しましたね。ですので、時刻を求める際は 9+timeにより求められます。しかしながら、timeが文字列型なのでこの算術式は使えません。よってtimeを数値型へ変換する必要があります。その変換式が、parseInt(time)です。以下を参照してください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt

dataにはいつものように`yes&${menu}&${date}&${time}`といった形で今までの回答を&で数珠つなぎで全て記録してあげてます。

さて、デプロイしてメッセージ確認してみましょう。

画像3

成功ですね！！

今回はこの辺にしておきましょう。

次回は「はい」をタップされた時に、予約データベースへ予約データを格納する処理を実装したいと思います。

最後までお読みいただきありがとうございます！！

少しでも参考になりましたら「スキ」をいただけると幸いです。

MENTA でLINEBOT開発サポートをしております。お気軽にご相談ください。


いいなと思ったら応援しよう！