「Alexa、Skill を Azure Bot Service で開発してみたい」「はい、対応しました」

# はじめに
5月の中頃に [Microsoft の Build](https://mybuild.microsoft.com/) でしれっと追加されていた、Bot Service の Alexa Channel を試してみました。当方、Alexa Skill というかスマートスピーカの開発は初めてなので、とりあえず Sample 的な動きの確認までを行ってみることにします。

[公式の手順はこちらからどうぞ](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-service-channel-connect-alexa?view=azure-bot-service-4.0#feedback)

なお、Azure Bot Service の基本的な開発の進め方やDeployの仕方に関しては過去の投稿を参考にしていただけると。

*日をまたいで作成したらコンソールの画面の言語が変わっているところがあります。
# Alexa Skill の作成
## リソースの作成
まずは下のリンクより、alexa developer console へ向かいます。
Amazonアカウント持ってない人は登録が必要になります。
https://developer.amazon.com/alexa/console/ask

まずはCreate Skill より、Skill 名の入力をして、
1. スキルに追加するモデル：カスタム
2. スキルのバックエンドリソースをホスティングする方法：ユーザ定義のプロビジョニング
をそれぞれ選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/3b1b3ba5-d195-ffa8-c8d0-7a02f3213ffa.png)

次のテンプレートの選択は「最初から開始」（規定のもの）を選びましょう（これは英語選択の場合に発生したような気がするがうろ覚え）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/0444afd0-651e-3448-c164-e08a28916c60.png)

## 作成後の設定
作成した Skill を開き json エディターを選択。この画面はなんどか見ることになるのでぼんやりで良いので覚えておいてください。右側にステップのようなのが表示されているのよさげですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/2acd964a-7eec-5884-936a-a42dd9c896e7.png)

json エディタから以下のものを編集して「モデルを保存」と「モデルをビルド」をしちゃいましょう。

- YOUR SKILL INVOCATION NAME
    - Alexa に話しかけてスキルを起こす時に使う名前。
    - 画像はミスってますが、全部小文字で入力してあげてください。（英語の場合）
- EXAMPLE PHRASES
    - このスキルになんかしてもらうときに使うフレーズ
    - 今回のサンプルだと関係なかったりする。
    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/f85c4a5a-0a6b-909b-c14e-444ad2190895.png)

ちなみに、後ほど日本語でモデルを作りなおした際の json は以下の通りです。

```setting.json
{
    "interactionModel": {
        "languageModel": {
            "invocationName": "マイ アダプター",
            "intents": [
                {
                    "name": "GetUserIntent",
                    "slots": [
                        {
                            "name": "phrase",
                            "type": "phrase"
                        }
                    ],
                    "samples": [
                        "{phrase}"
                    ]
                },
                {
                    "name": "AMAZON.StopIntent",
                    "samples": []
                },
                {
                    "name": "AMAZON.NavigateHomeIntent",
                    "samples": []
                }
            ],
            "types": [
                {
                    "name": "phrase",
                    "values": [
                        {
                            "name": {
                                "value": "ダンスして"
                            }
                        },
                        {
                            "name": {
                                "value": "歌って"
                            }
                        },
                        {
                            "name": {
                                "value": "踊って"
                            }
                        }
                    ]
                }
            ]
        }
    }
}
```



# Azure Bot Service との接続
ここからは先ほど作成したskillと Azure Bot Service を Alexa channel で接続させます。
ここからポータルを行ったり来たりするので、気をつけて進めましょう！
とりあえず、Echo Bot で Test しますので、もしも作り方が分からない方は[こちらの記事](https://qiita.com/MinoMinoMinoru/items/410ea775baa9943f59ce#azure-%E3%81%A7%E3%81%AE%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E4%BD%9C%E6%88%90)を参考にして Echo Bot を作成してください。

まずは Alexa の Skill ID を Bot に登録します。
alexa developer console の画面にもどって先ほど作成した skill の「スキルIDの表示」を選択すると、その skill の ID が表示されるので、これをコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/b02a25b9-8dc6-95ca-a622-3e9ae3412a04.png)

次に Azure Bot Service の Bot App 部分（App Service側ですね）に行きましゅ。
channel からAlexa を選択して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/0fa0958d-59ad-4589-2e92-3bbbe3664223.png)

スキルIDを入力 の部分に先ほどの Skill ID を潜影蛇手します。（貼り付けます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/e590e1a3-6c59-0d77-d247-cc133e7bbfdb.png)


下にちらっと見えているサービスエンドポンポイントURLはこの後すぐに使います。

次にエンドポイントを設定します。
alexa developer console の画面から先ほど作成したskillを選択して、画面右側のエンドポイントをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/002e0d9f-25b1-aa87-2e7f-21ebdf8bc25b.png)

そしたらこんな感じのページが表示されるのでデフォルトの地域のURLに先ほどの Bot のサービスエンドポンポイントURL を貼り付けます。
SSL証明書の種類は「開発用のエンドポイントは、証明機関が発行したワイルドカード証明書をもつドメインのサブドメインです」にしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/8d898d0c-05bd-29a7-bf11-6972ed88640c.png)



# Test Test Test!
ここまで来たらお待ちかねのテストタイムです。
ちなみにですが、一般公開とかは特に考えてないので、そういった場合の操作は本記事では対象外にしておりますー。
## Alexa Developer Console でのテスト
まずは Alexa Developer Console で動作チェックをしてみます。
画面上部のタブから「テスト」を選択してください。画面左側のメニューで「開発中」を選択して、マイクボタンを押しながら話かけてみましょう。
＊後ほど事象について書いてますが、たぶん一回目は話しかけても処理がずっと続いて進まないと思うので、そうなったらbrowserのリロードをしてもう一度試してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/539b1fbb-f619-53a3-560a-4f1a7cdcf5a1.png)

無事に動いてそうですね！最初は「<invocationName> で ○○（キーワード）」みたいに、「このスキルでこういうことをして」という感じみたいですね。

## Echo 実機でのテスト
ついでに、実機でのテストもしてみました。私の端末は Echo Show5 です。
実機でテストするのに、**Echo 端末を何らかの端子で接続、ビルドなんかをする必要は一切ありません。**代わりに、諸々の情報登録さえしたら、ネットワーク経由でちょちょいといけます。必要なのは以下の2つの工程です。

## プライバシーとコンプライアンス
Alexa Developer Console の上部メニューから「公開」を選択して、左側のメニューからプライバシーとコンプライアンスを選択。↓の画像みたいな感じで入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/e9226772-4acf-b3a1-b88d-bae9e8bc3f67.png)

今回の場合は選択はすべて No で、テストの手順に関しては本当に特に何もないです(笑)
テキトーに実機の所持について書いてます。

## スキルのプレビュー
先ほど同様に「公開」を選択し、左側のメニューから「スキルのプレビュー」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/99091920-cacb-fdd3-439c-0017781837a9.png)
ここの項目はなかなかに大変ですが、がんばりましょう。
ちなみに、スキルアイコンのところは実はどちらも全然違うサイズの手元にあった画像をぶち込んでみたのですが、それでイケてしまいました(笑)

## 公開範囲
ここまで来たら後は配布するだけです。配布と言いましたが、やること自体はただのメールアドレスの登録です。たぶんですが、Amazon のアカウントごとに Alexa が登録されてて、その Alexa が使えるスキルとして登録されるのですかね？（ここは完全に憶測なので、詳しい方補足いただきたいです！）

管理者のテスターのアドレスに自分のAmazon アカウントのアドレスを入れましょう。
そのあとで、先ほどのConsole でのテスト時のようにEcho なりの実機に話しかけてみてください。

## 注意点
今回デモ用として作ってみた感じでは一つだけ問題というか課題点があります。
それは、**初回の呼びかけ時に応答に時間がかかりタイムアウトする**ということです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248829/03cf1d78-0305-2de6-f286-b0d78e8d258b.png)

2回目以降の呼びかけだと普通に反応しているので、**おそらくはBotが常備起動ではないプランを選択しているから**かなと感じてます。もしも、実際に何かしらの業務で使うなどの理由から、この事態を防ぎたいなら、**App Service のプランを F1 ではない有料のものにして、Bot を常備起動にする**ということが考えられます。

# 感想
Azure Bot Service を用いて Alexa の Skill を作成することができました。
今回は、タイムアウトの部分だけすごく気になりましたが、回避策もありそうなので、Alexa と会話式に何かを行うスキル開発なんかの際の選択肢の1つに...なるのかは他の開発方法をしたことがないので、分からないですが、個人的には慣れた方法で作成できたのは楽しかったです。