APLチュートリアルをやってみる(前編)

APL Alexaスキル開発

こんにちは、ハルアキです。

これからのAlexaのスキル開発で重要度が増してきそうなAPL(Alexa Presentation Language)。

僕もサンプルスキルから流用して使ったことはあるのですが、使いこなせ手はいません。

改めてAmazon提供の↓のチュートリアルをやりながら理解を深めていこうと思います。

マルチモーダルなスキルの作り方
https://developer.amazon.com/ja-JP/alexa/alexa-skills-kit/get-deeper/tutorials-code-samples/intro-multimodal

マルチモーダルなAlexaスキルを開発する理由

この章ではマルチモーダル(音声+音声以外のコミュニケーション)の意義や注意点など説明が書かれています。

視覚的な要素をどのような位置づけで扱うかはスキルを開発する際には慎重に検討する必要がありますね。

次章以降はAPLの具体的な開発方法の話に入っていきます。
以下のような要素を持つJSONを組み立てていくことになるのですが、、使いこなせるようになるのでしょうか。

{
    "type": "APL",
    "version": "1.4",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": []
    }
}

APLオーサリングツールで初めての視覚要素を開発する

この章では、オーサリングツールの使ってテンプレートを作成する手順が説明されています。

オーサリングツール
https://developer.amazon.com/alexa/console/ask/displays

新しいエクスペリエンスということで、APLテンプレートをスキルにリンクすることができるとなっています。というか、作ったテンプレートを保存する際には保存先のスキルの指定が必要なようです。

まだ作成したスキルが一つもない人は、↓などで先に作っておきましょう。

魅力的なスキルを開発する。
https://developer.amazon.com/ja-JP/alexa/alexa-skills-kit/get-deeper/tutorials-code-samples/build-an-engaging-alexa-skill

基本的にはチュートリアルの流れに沿っていけば進められるのですが、時々説明が分かりづらいところもありました

最初の ”Textコンポーネントのtextプロパティを探します” で少し迷ってしまったり、、
↓の場所でした。

このGUIのレイアウト表示なのですが、一番最初のテキスト表示の説明の時にしか出てきません。それ以降は各セクションのJSONを直接編集していきます。

直接編集したJSONの内容も、当然ですがレイアウト表示の方にも反映されます。
例えば↓はwhenの設定です。

設定していない項目も表示されているので、各要素にどのようなプロパティが設定できるかをみてみるのもよいかもしれません。

チュートリアルに従ってテンプレートを作成したら、次章でいよいよスキルから呼び出せるようにします。

保存したAPLテンプレートの開き方

このチュートリアルではAPLの作成方法は書かれているのですが保存したAPLテンプレートがどこに保存されているかの説明がありませんでした。

alexa developer console からスキルを開き、ビルドタブ内のマルチモーダルをクリックします。

Multimodal Responsesの画面が開くので Visual タブをクリックします。
すると保存したテンプレートが表示されるので、Editをクリックするとオーサリングツールが開きます。

バックエンドを変更してLaunchRequestの視覚要素を追加する

スキルから作成したAPLを呼び出すための手順を説明した章になります。

チュートリアルではhosted-skill で作成する手順になるのですが、僕はAWS lamdbaを使って、Typescriptで書いているので少し手順が異なりました。
例えばファイルの読み込み方法が違ったり、util.getS3PreSignedUrlが使えないのでURL直接記載したりといったところです。

import launchDocument from '../documents/launchDocument.json';

ちょっと話はそれますが、Typescriptだと補完がとても便利です。
↓のようなところも補完してくれます。

本題に戻って、チュートリアルですがこの章もチュートリアルの内容に沿って進めればスキルから呼び出せるようになります。

一つよくわからず時間がかかってしまったのは背景の画像を参照するところですね。

背景画像の設定を書いてもオーサリングツールやコンソールのテストツールでは画像は表示されないようです。

背景が明るくなるはずです。 これで、 背景にライトが表示されました。

と書かれていたのですが、画像は表示されませんでした。
(環境依存の現象かもしれませんが・・)
↓のようになっていれば設定はされているようです。

↑の画面の下にある ~~で表示を使うと、実機で表示の確認ができます。
僕の家のEcho Show 5 はイーストアイ という名前になってまして、押すと↓のように表示されました。
これはスキルを起動しているわけではなく、オーサリングツールからプレビューしている状態になります。

ということで無事背景は設定されていることが確認できました。

ここまでで、スキルからAPLを呼び出す基本的な動きが確認できました。

後編では、パッケージを作成したり、アニメーションを追加していきます。

コメント

タイトルとURLをコピーしました