Alexa Presentation Language 1.1（ベータ版）の紹介： アニメーション、ツールの改善、Alexaデザインシステム
編集注： 下記のAPLオーサリングツールのAPLコンポーネントのドラッグアンドドロップ機能が利用できるようになりました。テンプレートで使用する事前定義済みのAPLコンポーネントを、オーサリングツールのワークスペースから簡単にドラッグアンドドロップすることで、自動的にユーザー定義のAPLテンプレートを作成できます。この新機能で、マルチモーダルスキルのオーサリングエクスペリエンスが、さらに直感的でスムーズになります。
このほど、Alexa Presentation Language（APL）の新しいバージョンが公開されました。今回のバージョンでは、アニメーションがサポートされ、ベクターグラフィックスが含まれています。また、ツールが改善されたほか、複数のViewportプロファイルを含むAPLスキルの開発時間を短縮できるデザインシステムが導入されています。APL 1.1は、すべてのロケールのAlexa開発者にご利用いただけます。現時点では、Echo Show、Echo Spot、新しいEcho Show 5が対応しています。近日中に、Fire TVやFireタブレットなどのデバイスにも対応する予定です。デバイスでAPL 1.1がサポートされているかどうかは、スキルリクエストでsupportedInterfacesオブジェクトを調べて、Alexa.Presentation.APLオブジェクトのmaxVersionを確認することでわかります。
アニメーションで実現できるエクスペリエンス
APL 1.1では、新しいAnimateItemコマンドを使用できます。このコマンドを使用すると、任意のAPLコンポーネントやレイアウトの位置、スケール、回転、透明度をアニメーション化できます。また、AnimateItemをAlexa Vector Graphics（Scalable Vector Graphics標準のサブセット）と組み合わせることで、ユーザーを引き付ける、まったく新しいエクスペリエンスを作成できます。
以下のアニメーションでは、APLのベクターグラフィックスを使用して電球を作成しています。アニメーションはすべて、新しいAnimateItemコマンドを使用して作成されています。アニメーションとベクターグラフィックスの全機能は、開発者コンソールのスキルテストシミュレーターでサポートされており、APL 1.1をベースにしたエクスペリエンスのテストに使用できます。以下は、Echo Show 5でベクターグラフィックスとテキストをアニメーション化した例です。
この例を作成するために使用したスキル応答は以下のとおりです。新機能を使用する前に、新しいenvironment.aplVersionプロパティを使用して、APL 1.1がサポートされているかどうかを確認している点に注目してください。APL 1.0までしかサポートしていないデバイスの場合、このAPLドキュメントでは静止したテキストで「Welcome to APL 1.0」が表示されます。APL 1.1をサポートしているデバイスでは、上記のアニメーションが表示されます。電球のアイコンは、新しいAlexa Vector Graphics（AVG）コンポーネントを使用して表現されたベクターグラフィックスです。AVGはScalable Vector Graphics（SVG）仕様のサブセットです。ここでは、Parallel APLコマンドによって並行して実行される複数のAnimateItemコマンドで、電球とテキストをアニメーション化しています。
"directives": [
{
"type": "Alexa.Presentation.APL.RenderDocument",
"token": "none",
"document": {
"type": "APL",
"version": "1.1",
"theme": "auto",
"graphics": {
"lightbulb": {
"type": "AVG",
"version": "1.0",
"height": 48.0,
"width": 48.0,
"parameters": [{
"default": "white",
"type": "color",
"name": "fillColor"
}],
"items": [{
"type": "path",
"fill": "${fillColor}",
"stroke": "pink",
"strokeWidth": 1,
"pathData": "M15.001,15c-0.032,0-0.064-0.001-0.096-0.004c-0.55-0.053-0.953-0.541-0.9-1.091c0.449-4.682,4.189-8.425,8.895-8.9 c0.56-0.052,1.041,0.346,1.096,0.895c0.055,0.55-0.345,1.04-0.895,1.096c-3.759,0.379-6.747,3.365-7.105,7.1 C15.946,14.613,15.51,15,15.001,15z M30.5,43c0-0.553-0.448-1-1-1h-11c-0.552,0-1,0.447-1,1s0.448,1,1,1h11 C30.052,44,30.5,43.553,30.5,43z M30.5,47c0-0.553-0.448-1-1-1h-11c-0.552,0-1,0.447-1,1s0.448,1,1,1h11 C30.052,48,30.5,47.553,30.5,47z M37.906,19.845c-0.54,1.272-1.177,2.482-1.821,3.652c-0.432,0.784-0.879,1.594-1.272,2.4 c-1.158,2.374-1.962,4.901-2.389,7.512c-0.041,0.251-0.075,0.513-0.11,0.779C32.074,35.988,31.676,39,28.304,39h-8.607 c-3.372,0-3.769-3.012-4.007-4.812c-0.036-0.267-0.068-0.528-0.109-0.779c-0.427-2.611-1.227-5.139-2.385-7.513 c-0.394-0.805-0.833-1.616-1.265-2.399c-0.645-1.17-1.296-2.38-1.836-3.652c-1.772-4.171-1.285-8.833,1.284-12.788 C13.964,3.076,18,0.457,23,0.059V0.008L23.938,0l0.006,0.003L25,0v0.059c5,0.398,9.036,3.017,11.622,6.998 C39.191,11.012,39.678,15.673,37.906,19.845z M31.781,28H16.219c0.589,1.651,1.047,3.348,1.331,5.087 c0.044,0.271,0.082,0.553,0.12,0.839C17.98,36.271,18.3,37,19.696,37h8.607c1.396,0,1.716-0.729,2.026-3.074 c0.038-0.287,0.075-0.568,0.12-0.839C30.734,31.348,31.191,29.651,31.781,28z M35.003,8.146C32.592,4.434,28.414,2.082,24.1,2.008 l-0.118-0.002L23.9,2.008c-4.314,0.074-8.492,2.426-10.903,6.138c-2.201,3.389-2.599,7.368-1.091,10.917 c0.5,1.179,1.113,2.291,1.762,3.469c0.443,0.805,0.902,1.638,1.317,2.487c0.157,0.322,0.29,0.654,0.435,0.981h17.16 c0.145-0.327,0.278-0.659,0.435-0.98c0.416-0.85,0.874-1.683,1.317-2.488c0.649-1.178,1.262-2.29,1.762-3.468 C37.602,15.514,37.204,11.535,35.003,8.146z"
}]
}
},
"import": [{
"name": "alexa-layouts",
"version": "1.0.0"
}],
"mainTemplate": {
"parameters": [
"payload"
],
"item": {
"type": "Frame",
"width": "100%",
"height": "100%",
"backgroundColor": "black",
"item": {
"type": "Container",
"width": "100vw",
"height": "100vh",
"items": [
{
"type": "VectorGraphic",
"when": "${environment.aplVersion == '1.1'}",
"id": "imageId1",
"source": "lightbulb",
"fillColor": "yellow",
"position": "absolute",
"width": "30vw",
"height": "30vw",
"left": "10vw",
"top": "30vh",
"opacity": 0
},
{
"type": "Text",
"text": "Welcome",
"color": "teal",
"textAlign": "center",
"fontSize": 38,
"id": "textId1",
"opacity": "${environment.aplVersion == '1.1' ? 0 : 1}"
},
{
"type": "Text",
"top": "20dp",
"text": "to",
"color": "grey",
"textAlign": "center",
"fontSize": 50,
"id": "textId2",
"opacity": "${environment.aplVersion == '1.1' ? 0 : 1}"
},
{
"type": "Text",
"text": "${environment.aplVersion == '1.1' ? 'APL 1.1' : 'APL 1.0'}",
"color": "crimson",
"textAlign": "center",
"fontSize": 92,
"id": "textId3",
"opacity": "${environment.aplVersion == '1.1' ? 0 : 1}"
}
]
}
}
}
},
"datasources": {}
},
{
"type": "Alexa.Presentation.APL.ExecuteCommands",
"token": "none",
"commands": [{
"type": "Parallel",
"when": "${environment.aplVersion == '1.1'}",
"commands": [
{
"type": "Sequential",
"commands": [{
"type": "AnimateItem",
"easing": "ease-in-out",
"duration": 6000,
"componentId": "imageId1",
"value": [{
"property": "opacity",
"to": 1
},
{
"property": "transform",
"from": [{
"translateX": "100vw"
},
{
"rotate": 720
}
],
"to": [{
"translateX": 0
},
{
"rotate": 0
}
]
}
]
},
{
"type": "AnimateItem",
"easing": "ease-in-out",
"duration": 6000,
"componentId": "imageId1",
"value": [{
"property": "opacity",
"to": 1
},
{
"property": "transform",
"from": [{
"translateX": 0
},
{
"scale": 1
}
],
"to": [{
"translateX": "25vw"
},
{
"scale": 2.5
}
]
}
]
},
{
"type": "Parallel",
"commands": [{
"type": "AnimateItem",
"easing": "ease-in-out",
"duration": 4000,
"componentId": "textId1",
"value": [{
"property": "opacity",
"to": 1
},
{
"property": "transform",
"from": [{
"translateX": "100vw"
} ],
"to": [{
"translateX": 0
} ]
}
]
},
{
"type": "AnimateItem",
"easing": "ease-in-out",
"duration": 6000,
"componentId": "textId2",
"value": [{
"property": "opacity",
"to": 1
},
{
"property": "transform",
"from": [{
"translateX": "-100vw"
} ],
"to": [{
"translateX": "0vw"
} ]
}
]
},
{
"type": "AnimateItem",
"easing": "ease-in-out",
"duration": 8000,
"componentId": "textId3",
"value": [{
"property": "opacity",
"to": 1
},
{
"property": "transform",
"from": [{
"translateX": "100vw"
}],
"to": [{
"translateX": 0
}]
}
]
}
]
}
]
}
]
}]
}
]APL向けAlexaデザインシステム
画面付きのAlexa搭載デバイスのサイズや形状はさまざまです。画面付きのさまざまなAlexa搭載デバイスが利用可能になり、さらに多くのユーザーがデバイスを使用するようになっているため、APLスキルを迅速に作成してより多くのユーザーにリーチできるよう、最新のAlexaデザインシステムを導入しました。このデザインシステムにより、デザインする視覚エクスペリエンスの数が少なくて済むようになり、デザイン作業がスピードアップし、あらゆるデバイス向けに展開できます。
たとえば、alexa-stylesをAPLドキュメントに読み込み、textStyleBodyスタイルを使ってテキストのスタイルを作成すると、デバイスの一般的な視聴距離に合わせてテキストのサイズが自動的に調整されます。サイズは、Alexaデバイスに適した基本サイズを知るために実施した、ユーザーエクスペリエンスの調査から導き出したものです。Alexaデザインシステムのスタイルを利用すると、ユーザーが離れて見ることが多いTVでは、テキストやその他の視覚要素を別のデバイスで表示された場合とほぼ同じサイズで見ることができるよう、基本サイズを大きくすることができます。
APL向けAlexaデザインシステムには、リソースとスタイルに加えて、APLドキュメントで使用できる新しいレスポンシブ対応コンポーネントとレスポンシブ対応テンプレートが導入されています。このレスポンシブ対応コンポーネントとレスポンシブ対応テンプレートでは、デバイスのモード、サイズ、形状に基づいた対応が行われるため、複数のデバイスを考慮した開発が簡単になります。レスポンシブ対応コンポーネントの例として、タッチデバイスやTVデバイスで必要な状態を備えたタッチ操作／選択可能要素であるAlexaButtonや、画像を表示するAlexaImageがあります。
レスポンシブ対応テンプレートは、レスポンシブ対応コンポーネントとプリミティブAPL UI要素（ScrollViewやPagerなど）を組み合わせたもので、Viewport全体を対象とするスタンドアロンのパターンを表示します。レスポンシブ対応テンプレートの例として、テキスト項目のスクロールリストを表示できるAlexaTextListや、スプラッシュスクリーンと背景をレンダリングできるAlexaBackgroundがあります。Alexaデザインシステムのレスポンシブ対応コンポーネントやレスポンシブ対応テンプレートなどの要素のリストについては、こちらをご覧ください。
今後は、Amazonとパートナー社製の新しいAlexaデバイスのリリースに合わせて、新しいレスポンシブ対応コンポーネントやレスポンシブ対応テンプレートを公開し、新しいViewportプロファイルのサポートを追加する予定です。現在や今後のAlexaデバイスをサポートするAPLドキュメントを作成する際に役立てていただけるよう、Alexaデザインシステムを使用したレスポンシブ対応APLドキュメントの作成方法を説明した新しいガイドを公開しています。こちら（英語）をご覧ください。
ツールの改善
APL 1.1では、APLオーサリングエクスペリエンスのさらなる充実を図っています（こちらをご覧ください）。今回のバージョンでは、デザイン層で選択した要素がコンポーネント階層で強調表示されるようになりました。これにより、デザインビューに表示されている要素と実際のコンポーネントを関連付けながらコンポーネントのプロパティを更新する作業が簡単になります。
今後、APLオーサリングエクスペリエンスでAPLコンポーネントのドラッグアンドドロップを有効にする更新を行う予定です。さらに、APL 1.1オーサリングツールは、レンダリング、データバインディング、式の評価コードを、Alexaデバイスで実行されるランタイムと共有しています。そのため、オーサリングエクスペリエンスと実際にデバイスに表示される内容が違うという状況がかなり少なくなります。
自動スケーリング
APLオーサリングエクスペリエンスとスキルのテストシミュレーターには、Small Landscape Hubという新しいViewportプロファイルが追加されています。これは、Alexaデバイスに加わったばかりのEcho Show 5をサポートしています。スキルをEcho Show 5向けに最適化しながら、ユーザーに引き続きそのエクスペリエンスを提供できるように、Echo Show 5では画面に合わせてAPL応答が自動的にスケーリングされます。ただしAPLをEcho Show 5向けに最適化することを強くお勧めします。詳細については、このブログ記事をご覧ください。
最適化が完了し、シミュレーターのSmall Landscape HubまたはEcho Show 5でスキルをテストしたら、以下に示すボックスをオンにして自動スケーリングを停止できます。次に、スキルの認定を申請すると、Echo Show 5での認定作業が開始されます。2019年7月3日より前に認定されたスキルの場合は、視覚要素を最適化済みであっても、自動スケーリングを停止するにはボックスをオンにして再申請する必要があります。
ssmlToSpeechトランスフォーマーとプログレッシブ応答APIの変更
APL 1.1の公開に合わせて、Alexaにテキストブロックと項目のリストを強調表示して発話させるための、SpeakItemコマンドとSpeakListコマンドで使用できるトランスフォーマーも拡張されました。具体的には、新しいtextToSpeechトランスフォーマーが追加されています。この新しいトランスフォーマーを使用すると、テキストを音声に変換することができます。既存のssmlToSpeechトランスフォーマーは有効な音声合成マークアップ言語（SSML）入力のみを受け入れるようになりました。このトランスフォーマーへの入力は、<speak></speak>タグで囲んだ有効なXMLである必要があります。また、プログレッシブ応答APIも有効なSSMLのみを入力として受け入れます。スキルに無効なSSMLや生のテキストが使用されている場合、APIからエラーが返されます。
問題が発生した場合やご質問がある場合は、Alexa開発者フォーラムでフィードバックをご共有ください。投稿する際は、トピックの欄で「APL」を選択してください。
新しいAPL 1.1の機能を活用して、すばらしいデザインが作成されることを楽しみにしています。
編集注：本ブログはIntroducing Alexa Presentation Language 1.1 (Beta): Animation, Improved Tools, and the Alexa Design Systemの翻訳です。