line-bot-sdk-pythonを使ったDatetime picker actionの実装およびImage Carouselの実装サンプル


## はじめに

つい先日、LINE Messaging APIに `Datetime picker action` と `Image Carousel` が追加されたのでそれのサンプル

`Image Carousel` に関しては私がPRを出しました。クソPR出してすみませんでした...

https://github.com/line/line-bot-sdk-python/pull/59

## 環境

- ngrok <- localhostで簡単にテストしたかったので入れています
- line-bot-sdk-python==1.4.0
- Python3.6.2
- Django==1.10.5

`signature` 等のチェックは今回省略します。

## Datetime picker action サンプル

https://github.com/line/line-bot-sdk-python/blob/master/tests/api/test_send_template_message.py

上記テストコードのサンプルコード([L129~202](https://github.com/line/line-bot-sdk-python/blob/master/tests/api/test_send_template_message.py#L129))では動かなかったので自分が実装した時に動いたサンプルで

```python
from django.http import HttpResponse
from linebot import LineBotApi, WebhookParser
from linebot.models import TemplateSendMessage, ButtonsTemplate, DatetimePickerTemplateAction

line_bot_api = LineBotApi('LINE_CHANNEL_ACCESS_TOKEN')
parser = WebhookParser('LINE_CHANNEL_SECRET')


def webhook(request):
    # Signatureチェック等
    
    for event in events:
        date_picker = TemplateSendMessage(
            alt_text='予定日を設定',
            template=ButtonsTemplate(
                text='予定日を設定',
                title='YYYY-MM-dd',
                actions=[
                    DatetimePickerTemplateAction(
                        label='設定',
                        data='action=buy&itemid=1',
                        mode='date',
                        initial='2017-04-01',
                        min='2017-04-01',
                        max='2099-12-31'
                    )
                ]
            )
        )

        line_bot_api.reply_message(
            event.reply_token,
            date_picker
        )

    return HttpResponse()
```

LINEアプリ側で時間が送信されたらサーバ側には `PostbackEvent` で値が取得できます。
エンドユーザが設定した時間は以下で取得できました

```python
if isinstance(event, PostbackEvent):
    event.postback.params['date'] # dictのキーはmodeのもの
```

![Screen Shot 2017-09-13 at 22.40.03.png](https://qiita-image-store.s3.amazonaws.com/0/97280/0622e91b-e858-d5d8-eb52-2786869779f4.png "Screen Shot 2017-09-13 at 22.40.03.png")

`DatetimePickerTemplateAction` の `mode` には `date` `time` `datetime` が設定できます。
詳しくは以下リファレンスを

[Datetime picker action | LINE API Reference](https://devdocs.line.me/en/#datetime-picker-action)


## Image Carousel サンプル

```python
from line.models import ImageCarouselTemplate, ImageCarouselColumn
```

```python
image_carousel_template_message = TemplateSendMessage(
    alt_text='Image carousel template',
    template=ImageCarouselTemplate(
        columns=[
            ImageCarouselColumn(
                image_url='https://example.com/item1.jpg',
                action=PostbackTemplateAction(
                     label='postback1',
                     data='action=buy&itemid=1'
                )
            ),
            ImageCarouselColumn(
                image_url='https://example.com/item2.jpg',
                action=MessageTemplateAction(
                    label='message2',
                    text='message text2'
                )
            ),
            ImageCarouselColumn(
                image_url='https://example.com/item3.jpg',
                action=URITemplateAction(
                    label='uri1',
                    uri='https://example.com/1'
                )
            )
        ]
    )
)
```

![Screen Shot 2017-09-13 at 22.50.52.png](https://qiita-image-store.s3.amazonaws.com/0/97280/831a14d1-b972-0638-a94a-3c3a84b1f575.png "Screen Shot 2017-09-13 at 22.50.52.png")