俺くんと予定調整をするLINEのDatetime picker action

ちなみにこの俺くんLINEアカウントは非公式です。

俺くんを知らない人はこちらを見ましょう。

【爆笑必須】Twitterに超大物新人現るｗｗｗｗｗ 【メシア俺@Messiah_ore】

LINE Messaging APIのDatetime picker action

さて、俺くんについてはこれくらいで

今日公式リリースがあったLINE Botの新機能です。

https://twitter.com/LINE_DEV/status/903109797431590913

新しいアクション

もともと、テンプレートメッセージを送った際にボタンを押したりすると、テンプレートアクションという色々なアクションを発火させることができました。

• Postback action: 指定したdataをwebhookに送れる
• Message action: 指定したテキストを発言させる
• URI action: 指定したURLを開かせる
• Datetime picker action(今回追加) : 日付や時刻を選択するダイアログを表示して、選択した情報をPostback actionのようにデータを送れる

俺くんとの日程調整をしよう

作ったものはこんな感じ。

パーティーのお誘いをするところからスタート

俺くんスタンプでちょうどいい感じのスタンプを使って

• 1. 「空いてる日教えてよ」とレスがある / Buttonsテンプレート使ってます

• 1. いいよと答えると例のDatetime pickerが表示されるので答える

• 1. 予定が合わないらしい

まぁこれだけです。

実装

Node.jsで書いてます。

こんな感じのJSONを書いてBOTにリプライさせます。

"type": "datetimepicker"の指定の部分です。
気をつけるのがdatetimepickerを指定する場合はmodeのキーも追加しないといけません。

動作モード
date：日付を選択する
time：時刻を選択する
datetime：日付と時刻を選択する

    const messageObject = {
        "type": "template",
        "altText": "this is a buttons template",
        "template": {
            "type": "buttons",
            "title": "空いてる日程教えてよ",
            "text": "Please select",
            "actions": [
                {
                  "type": "datetimepicker",
                  "label": "いいよ",
                  "mode": "date",
                  "data": "action=datetemp&selectId=1"
                },
                {
                  "type": "postback",
                  "label": "やっぱりやめたい",
                  "data": "action=cancel&selectId=2"
                },
            ]
        }
    };

expressとbody-parserを使ってます。

weoの中身がMessagingAPIでいうところのWebhookEventObjectです。
Datetime Pickerで選択した際にはweb.typeがpostbackが返って来て、weo.postback.paramsに日付情報が入っています。

dateモードを指定していた場合weo.postback.params.dateで日付が取れます。

timeモードを指定してたらweo.postback.params.timeみたいな感じで指定

bot.js

/*色々省略*/
	 
app.post('/ore', (req, res) => {

	const weo = req.body.events[0];
	if(weo.type === 'postback'){
	        console.log(weo.postback.params.date);
	        const mes = `${weo.postback.params.date}ね。その日は予定があるんだ、ごめんね。`;
	        const smo = [{type: 'text', text: mes}];
	        const res = await reply({replyToken: weo.replyToken, messages: smo});
	        console.log(res.status);
	        return;
	    }
	    
	 /*色々省略*/
});

/*色々省略*/

おわりに

この機能、出たばかりすぎてなのか

iOS:7.9.0/Android:7.12.0以降で対応しています

とのことで。

普段使ってるAndroid端末では使えなかったというところが致命的でした苦笑

でもオシャレですよね。
日程調整などに是非活用しましょう笑