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

APL Alexaスキル開発

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

APLチュートリアルに挑戦中です。
前編では、APLドキュメントをつくってスキルから呼び出すところまでできるようになりました。

後編では、レイアウトの使い回しや、アニメーションなどを学習していきます。

視覚要素を簡単に作成する

既につくったAPLからレイアウトの部分をlayoutとして切り出し、かつそれを外部パッケージ(外部ファイル)として読み込むことで、メインのAPLをシンプルにできます。

スタイルだけ切り出してCSSみたいに使うこともできるのかな。

画面の多いスキルを開発する時はうまくパッケージ化して使い回すと統一感のある画面が作れますね。

チュートリアルではパッケージに続いて、動画の追加が説明されています。
しかし、ちょっと説明が少ない感じです。オーサリングツールも使っていないですし、、

オーサリングツールを使うのであれば、スキルのマルチモーダルを開いてCloneしておきましょう。

そして、APLドキュメントを修正していきます。

                    {
                        "type": "AlexaBackground",
                        "backgroundImageSource": "${assets.backgroundURL}"
                    },
                    {
                        "type": "cakeTimeText",
                        "startText": "${text.start}",
                        "middleText": "${text.middle}",
                        "endText": "${text.end}"
                    },
                    {
                        "type": "AlexaImage",
                        "alignSelf": "center",
                        "imageSource": "${assets.cake}",
                        "imageRoundedCorner": false,
                        "imageScale": "best-fill",
                        "imageHeight": "40vh",
                        "imageAspectRatio": "square",
                        "imageBlurredBackground": false
                    }

この部分を↓に変えます。

                    {
                        "type": "AlexaBackground",
                        "backgroundImageSource": "${assets.backgroundURL}"
                    },
                    {
                        "type": "Container",
                        "paddingTop":"3vh",
                        "alignItems": "center",
                        "items": [{
                            "type": "Video",
                            "height": "85vh",
                            "width":"90vw",
                            "source": "${assets.video}",
                            "autoplay": true
                        }]
                    }

assets.video が新しく出てきたのでDATAセクションのassetsに追加します

    "assets": {
        "cake": "https://github.com/alexa/skill-sample-nodejs-first-apl-skill/blob/master/modules/assets/alexaCake_960x960.png?raw=true",
        "backgroundURL": "https://github.com/alexa/skill-sample-nodejs-first-apl-skill/blob/master/modules/assets/lights_1920x1080.png?raw=true",
        "video": "https://public-pics-muoio.s3.amazonaws.com/video/Amazon_Cake.mp4"
    }

オーサリングツール上からは動画は確認できないので、実機で表示させましょう。
実機がない人もいるのでチュートリアルではオーサリングツールを使っていないのだと思います。

動画の動きが確認できたら、スキルに組み込んでいきます。

ヘルパー関数の追加などありますが、チュートリアルに従っていけば迷うところはなかったですね。テストツールで実行して動画の再生も確認できました。
次はいよいよアニメーションを追加していきます。

アニメーションとビデオのコントロールを追加する

APLでアニメーションを表示させるにはAPLコマンドを使っていきます。
どの要素にコマンドを実行するのかを指定するために、各コンポーネントにidを振る必要があるのですが、idはパッケージ側で初期値を設定することもできるようです。

↓はパッケージのparameters, items からの抜粋です。デフォルトでtextTopというidが振られているのがわかります。

"parameters":[
・・・
                {
                    "name": "topId",
                    "type": "string",
                    "default": "textTop"
                },
・・・
            ],
            "items": [
                {
                    "type": "Container",
                    "items": [
                        {
                            "type": "Text",
                            "style": "bigText",
                            "paddingTop":"${@viewportProfile == @hubRoundSmall ? 75dp : 0dp}",
                            "text": "${startText}",
                            "id":"${topId}"
                        },
・・・
                    ]
                }
            ]

idの振られていなかった画像、動画にidを追加したら、コマンドを記述していきます。

チュートリアルではどんどんコマンドを書いていきます。すっかり忘れられてしまったかのようなオーサリングツールですが、アニメーションの動作確認もできたので、少しずつ確認していくのがよいと思います。

オーサリングツールの左下からONMOUNTセクションを開き編集します。

右上の再生ボタンを押すと動作確認ができます。確認が終わったら停止ボタンを押します。

チュートリアルに従ってONMOUNTを追加していくと、画像のアニメーションを追加した際にワーニングが出てしまいました。

チュートリアルでは↓のように書かれていましたが、オーサリングツール上、easing の設定は事前定義されているものが推奨されているようです。

事前定義されたプロパティにこだわる必要はなく、3次ベジェ曲線による独自の曲線、または線形の軌道を定義できます。

ちなみに、ワーニングで表示されている行数はONMOUNTセクションではなくAPL全体での行数となっています。

ワーニングは出ていますが、launchDocument.jsonの方の修正は完了です。続いてbirthdayDocument.jsonの動画表示の方も修正していきます。

birthdayDocument.jsonの方はExecuteCommandsがポイントですね。APLで凝った動きをさせるためには理解しておく必要があります。オーサリングツールにもCOMMANDSというセクションがあるのですが、使い方はわかりませんでした、、

チュートリアル通りの動きを行うための修正は難しくないので、指示通りに修正して動作確認できました。これで無事ケークウォークのスキルは完成です。

まとめとリソース

チュートリアルにしたがって作業することでAPLの基本的な部分は理解することができました。

ステップアップのためのリソースもたくさんリンクが貼られています。まだまだ学ぶことはたくさんありますね。

APLは先日1.4がリリースされて更に機能アップしています。興味深い機能もたくさんあったので、少しずつ試してみたいと思います。

コメント

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