ClovaスキルをAlexaに移植してみる

Clovaスキルとして作った[言えまてんクイズ](https://www.line-community.me/awards/workdetail/5bba17ee851f745ac301dfb4)というのがあります。
これもPythonで作ってて、[zappa](https://github.com/Miserlou/Zappa)を使ってawsにdeployしてました。

LINE BOOT AWORD 2018にも応募してたんだけど、箸にも棒にも引っかからなかったのかなぁ。音沙汰なし。
じゃあ、せっかく作ったしalexaにも移植してみよう。
最近[chalice](https://github.com/aws/chalice)でよく遊んでるし、deployもこっちにしてみよう。lambdaとalexa skillkitだとこっちの方が相性いいんじゃないかな。

## なにはともあれchalice

1. まずgithubでレポジトリ作る
1. chaliceでnew-project
1. .chalice/config.jsonを編集したり
1. app.pyをひとまずHelloWorld的に

という感じでだいたい[いつもの流れ](https://qiita.com/ikegam1/items/6dbde1041fe4dded14a2)と一緒。

``` app.py
from chalice import Chalice
import logging
import json
import random
import re
import os
import sys
import alexa-speech

app = Chalice(app_name='tokyo.ikegami.yeahma10.alexa')
logger = logging.getLogger()
debug = os.environ.get('DEBUG_MODE')
if debug == '1':
logger.setLevel(logging.INFO)
else:
logger.setLevel(logging.ERROR)

@app.lambda_function()
def default(event, context):
return welcomeIntent()

def welcomeIntent():
return alexa-speech.QuestionSpeech('こんにちわーるど').build()
```

## Echo Spot（とか）に対応

今回はDisplayインターフェースに対応してみる事にします。
https://developer.amazon.com/ja/docs/custom-skills/display-interface-reference.html

シンプルなパターンだとこれをdirectiveに入れればいいらしい

```
{ "type":"Display.RendorTemplate",
  "template":
    {
      "type":"BodyTemplate1",
      "token": "string",
      "backButton": "VISIBLE"(default) | "HIDDEN",
      "backgroundImage": Image,
      "title": "string",
      "textContent": TextContent
    }
}
```

画像がいるみたいなのでS3に適当なのを用意しました。

Intentはこうしよう。

1. HelloIntent 入り口
1. QuizInIntent ~~Dialogで発話を回収~~ 結局、ただの力業になった。。
2. QuizIntent ~~Dialogで発話を回収~~ 結局、ただの力業になった。。
3. AnswerIntent 画面送る
4. MenuIntent AMAZON.HelpIntentの時に

## そして作った

作ってみたけども、結局サックリ移植にはならなくてけっこう作り直しました。
Display対応してみようってのもあったし、clovaとslotの感じがちょっと違ったりもあったし。

で、Display対応についてはそんなにめんどくなかった。
必要になるのは以下の4点くらいかな。

+ requestの["context"]["System"]["Display"]["supportedInterfaces"]にDisplayがあるかどうかチェック -> あればDisplay対応のレスポンス返す
+ 背景画像用意する。いくつかのサイズを用意しておけばデバイスに応じて読み込んでくれるらしい。340x340と576x576を用意してみた
+ Desplay用のテキストを考える。RichTextにすると簡単な装飾ができる
+ [actionタグに対応する](https://developer.amazon.com/ja/docs/custom-skills/display-interface-reference.html#textcontent-object-specifications)。requestのタイプに```Display.ElementSelected```ってのが入ってきて、さらにtokenでイベントの判断できるみたいだけど、シミュレータでは対応してないっぽい

背景画像の所はこんな感じで、デフォルトと正解時、不正解時の3パターンx2サイズを用意しまいした。

``` 
   _imgs =  [
                {"sources": [
                    { "url": img_340 },
                    { "url": img_576 }
                ]},
                {"sources": [
                    { "url": correct_340 },
                    { "url": correct_576 }
                ]},
                {"sources": [
                    { "url": incorrect_340 },
                    { "url": incorrect_576 }
                ]}
            ]
    _params = {
        "backgroundImage": _imgs[_img-1],
```

画像はS3においてある。
詳しくは[このへん](https://developer.amazon.com/ja/docs/custom-skills/display-template-reference.html)ですかね。とりあえず今回はBodyTemplate1固定で使ってる。

画面はこんな感じになった。

<img src="https://qiita-image-store.s3.amazonaws.com/0/308709/5cb84665-374a-9fab-ae96-6b126c9f7998.png" width=40%> <img src="https://qiita-image-store.s3.amazonaws.com/0/308709/08cf4d05-f29a-cbb8-bfaa-7ce9de97ff35.png" width=40%>


あ、そういえば。下のようにalexaのスキルきっとでDisplayインターフェースをonにしたわけだけど、

![8.png](https://qiita-image-store.s3.amazonaws.com/0/308709/55fa00ff-056b-0d7b-dd20-b59701ea6620.png)

ビルトインインテントがいっぱい増えた。これ、対応できてないけど審査には影響ないかな。。

![7.png](https://qiita-image-store.s3.amazonaws.com/0/308709/2c1c4791-cbde-fa8d-9614-d8e224bed8e5.png)

実機ないし、あんまりようわからん。

なにはともあれ、一通り動作するようにして審査だしてみました。
これが通れば今月4つめなのでEcho Showもらえるで。
なんか[APL](https://developer.amazon.com/ja/docs/alexa-presentation-language/apl-overview.html)っての気になるし試してみたい。

[tokyo.ikegami.yeahma10.alexa](https://github.com/ikegam1/tokyo.ikegami.yeahma10.alexa)

一旦これでalexa関連は一息かな。そろそろawsのDevopsのProfessional受けたいからこのへんを記事にしていければと。年明けに受けよう。