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


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

[俺くん](https://twitter.com/messiah_ore)を知らない人はこちらを見ましょう。

> [【爆笑必須】Twitterに超大物新人現るｗｗｗｗｗ 【メシア俺@Messiah_ore】](https://matome.naver.jp/odai/2146766479677681901)


## LINE Messaging APIのDatetime picker action

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

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

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

![](https://i.gyazo.com/54b4c0a549d6898df64ef51bb8830a4b.png)

### 新しいアクション

もともと、[テンプレートメッセージ](https://devdocs.line.me/ja/?node.js#template-message)を送った際にボタンを押したりすると、[テンプレートアクション](https://devdocs.line.me/ja/?node.js#template-action)という色々なアクションを発火させることができました。
 
* Postback action: 指定したdataをwebhookに送れる
* Message action: 指定したテキストを発言させる
* URI action: 指定したURLを開かせる
* **Datetime picker action(今回追加)** : 日付や時刻を選択するダイアログを表示して、選択した情報を`Postback action`のようにデータを送れる

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

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

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

> [俺くんスタンプ](https://store.line.me/stickershop/product/1376377/ja)でちょうどいい感じのスタンプを使って

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

![S__5316627.jpg](https://qiita-image-store.s3.amazonaws.com/0/35387/40a9ebfd-e513-e97d-a347-46ccfa821d01.jpeg "S__5316627.jpg")

* 2. いいよと答えると例の`Datetime picker`が表示されるので答える 

![S__5316626.jpg](https://qiita-image-store.s3.amazonaws.com/0/35387/7d43ad24-3169-4816-519b-0e01a22d3d9b.jpeg "S__5316626.jpg")

* 3. 予定が合わないらしい

![S__5316625.jpg](https://qiita-image-store.s3.amazonaws.com/0/35387/f74af623-9919-536f-d3dc-e85d39f0042b.jpeg "S__5316625.jpg")

まぁこれだけです。

## 実装

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端末では使えなかったというところが致命的でした苦笑

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