マルチモーダルのデバイスを選ぶユーザーは増え続けており、画面付きのAlexa搭載デバイスのユーザーは今や何百万人にも上ります。実際、マルチモーダルスキルのほうが、音声のみのスキルよりもユーザーを惹きつけることができるのも確かです。APLベースのマルチモーダルスキルは、マルチモーダルデバイス上の音声のみのスキルに比べ、平均で3倍もの月間アクティブユーザー数を獲得しています。
ユーザーはより使いやすく魅力的なエクスペリエンスを常に求めています。このため、2021年8月31日を以ってDisplayテンプレート機能を廃止し、かわりにAlexa Presentation Language（APL）でのマルチモーダルデバイスサポートをさらに強化していく予定です。Displayテンプレートは、Alexaマルチモーダルデバイスの一部でしかサポートされておらず、定義済みのレイアウトしか使用できませんでした。一方、APLベースのレスポンシブ対応テンプレートは、すべてのEcho Showデバイス、Fireタブレット、LG/Samsungの最新機種テレビ、Facebook Portalデバイス、Alexa for Xboxアプリ、PCといったあらゆるデバイスでサポートされます。レスポンシブ対応テンプレートを使うと、さまざまな画面サイズにレスポンシブに対応する美しいレイアウトを作成できます。また、Alexa Smart Screen SDKを通じて新たなサードパーティデバイスへのサポートが常に追加されます。
今回の廃止にあたって、既存のコードをAPL対応に簡単に変換する方法をまとめました。このブログを参考に、新たなデバイスでもスキルが引き続き機能するように更新をお願いします。以下は、DisplayテンプレートスキルのバックエンドをAPLドキュメントでレンダリングできるよう更新する方法の例です。次のBodyテンプレート6のコードを更新します。
if (supportsDisplay(handlerInput)) {
const responseBuilder = handlerInput.responseBuilder;
const bgImage = new Alexa.ImageHelper()
.addImageInstance('https://example.com/background.png')
.getImage();
const primaryText = new Alexa.RichTextContentHelper()
.withPrimaryText('テキストコンテンツの例')
.getTextContent();
responseBuilder.addRenderTemplateDirective({
type: 'BodyTemplate6',
backButton: 'visible',
backgroundImage: bgImage,
textContent: primaryText,
});
}上記のコードはAPLのAlexaHeadlineテンプレートを使って以下のように置き換えることができます。
if (supportsAPL(handlerInput)) {
const responseBuilder = handlerInput.responseBuilder;
const document = {
"type": "APL",
"version": "1.6",
"import": [
{
"name": "alexa-layouts",
"version": "1.3.0"
}
],
"mainTemplate": {
"parameters": [
"headlineTemplateData"
],
"item": [
{
"type": "AlexaHeadline",
"primaryText": "${headlineTemplateData.textContent}",
"headerBackButton": true,
"backgroundImageSource": "${headlineTemplateData.backgroundImage}"
}
]
}
};
const datasources = {
"headlineTemplateData": {
"backgroundImage": "https://example.com/background.png",
"textContent": "テキストコンテンツの例"
}
};
responseBuilder.addDirective({
type: 'Alexa.Presentation.APL.RenderDocument',
version: '1.1',
document,
datasources
})
}こうした変換をサポートするため、Displayテンプレートに搭載されていたテキストのスタイル設定オプションをAPLにも追加する予定です。新しい段落テキストレイアウトオプションを使い、Textコンポーネントに<span>マークアップタグを追加することでインラインテキストのサイズと色を変更できるようになります。<span>では、Displayテンプレートの<font>機能よりも細かな設定が可能です。特に、<span>では、dp（密度に依存しないピクセル）を使い、インラインテキストの特定範囲のみのサイズを変更できます。また、特定の範囲を指定してカスタマイズ可能な色を設定することもできます。
<span fontSize="48dp">APL</span> is <span color="red">Awesome</span>!
これ以外の3つのDisplayテンプレートマークアップタグ（インライン画像を追加する<img>、クリックできるコンテンツに使用する<action>、コンテンツの中央揃えを行う<div>）は、APLではサポートされません。しかし、APL固有のテキストおよび画像の形式設定用コードを使うと、たいていの場合、同等かそれ以上の効果をあげることができます。
Alexaマルチモーダルチームのリーダー、Arunjeet Singhは新機能について次のように述べています。 「APLテンプレートはとても使いやすく、視覚的なスキルを細かくカスタマイズできます。また、APLテンプレートでは、モーション検出のAPIなど、Displayテンプレートではできなかったさまざまな機能をサポートできます。Displayテンプレートからの変換後、APLベースのスキルに対するユーザーエンゲージメントは常に高く、アクティブユーザーも増加しています。」
スキルをAPLにアップグレードしなければどうなるのか不安な方もいらっしゃるかもしれません。APLへの移行を完了しなくても、スキルストアからスキルが削除されることはありません。しかし、Displayテンプレートを使用するスキルは以前と同じようには表示されません。たとえば、<action>や<div>のタグは機能しなくなります。タッチベースの要素選択機能も使えません。つまり、こうした機能を使用するスキルのエクスペリエンスは損なわれてしまいます。
更新されたスキルが速やかに再認定されるよう、Amazonではスキル認定プロセスの迅速化を図る予定です。スキル認定を申請される際は、「Displayテンプレート廃止に伴いスキルをAPLにアップグレードしました」という文言をテスト手順の説明に追加してください。 認定で問題が発生した場合は、Alexa開発者向け窓口までご連絡ください。
一足先にAPLを使っている「Akinator」、「Knight Manager」、「Question of the Day」といったすばらしいスキルの仲間入りをしませんか。他にも、ショッピング、天気予報、音楽、ジョーク、タイマー、アラーム、リマインダーなどのファーストパーティエクスペリエンスでAPLは使われています。これらの新機能の詳細については、こちらからAPLの最新情報をご覧ください。
APLとは何ですか？
Alexa Presentation Language（APL）は、Alexaマルチモーダルデバイス（Echo Showファミリー）やサードパーティデバイスといった幅広いデバイスで、ユーザーを惹きつける音声と視覚のエクスペリエンスを作り出せる視覚デザインフレームワークです。APLは従来のDisplayテンプレートをアップグレードしたものです。APLは、2019年9月以来、マルチモーダルの視覚デザイン言語として選択することが可能でした。ここ数年間で、多くの外部スキルがAPLに移行し、Amazon内部のエクスペリエンスもすべてAPL上で動作しています。
APLを利用できるのは誰ですか？
Alexaでマルチモーダルのエクスペリエンスを作成するすべての開発者が利用できます。スキルに視覚エクスペリエンスを追加する場合は、ぜひAPLをお使いください。
既存スキルにはどんな影響がありますか？
Displayテンプレートを使っているスキルの場合は、なるべく早くAPLへの移行を検討してください。<font>タグの機能はAPLに追加されますが、それ以外の3つのタグ（<img>、<action>、<div>）は追加されません。APLが3つのタグの機能にどのように対応しているかは、以下のサンプルコードをご覧ください。
既存スキルはいつまでにAPLに移行する必要がありますか？
2021年8月31日までに移行を完了していただくようお願いいたします。Alexaレスポンシブ対応テンプレートでDisplayテンプレートの機能にどう対応できるかを詳細な移行ガイドにまとめました。
既存スキルの再認定申請は必要ですか？
はい、スキルは再認定を受ける必要があります。ただし、影響を受けるスキルに対しては再認定プロセスを速やかに行う予定です。スキルの再認定を申請される際には、追加のテスト手順説明に加えて、次の文言を追加してください。 「Displayテンプレート廃止に伴いスキルをAPLにアップグレードしました」
<font>タグ機能はAPLでどのようにサポートされますか？
Textコンポーネントのサイズや色を変更する<font>タグに代わって、今後は<span>マークアップタグを使用します。1行のテキストに範囲を指定して、それぞれに異なるフォントのサイズや色を設定できます。<span>内のテキストのフォントサイズを変えるには、fontSizeアトリビュートを使います。<span>内のテキストの色を変えるには、colorアトリビュートを使います。
<action>タグの機能はAPLの何で対応できますか？
短いテキストの場合は、TouchWrapper内でTextコンポーネントを使ってクリック可能にできます。詳しくは、TouchWrapperのベストプラクティスと長いテキストをクリック可能にする方法についてのブログ記事をご覧ください。
{
"type": "Container",
"items": [
{
"type": "Text",
"text": "This is a"
},
{
"type": "TouchWrapper",
"spacing": "8dp",
"item": [
{
"type": "Text",
"text": "clickable",
"color": "dodgerblue"
}
],
"onPress": [
{
"type": "SendEvent",
"arguments": [
"my-token-value"
]
}
]
},
{
"type": "Text",
"spacing": "8dp",
"text": "element"
}
],
"direction": "row"
},
<img>タグの機能はAPLの何で対応できますか？
テキストの行が短い場合は、Containerコンポーネントを使ってdirectionをrowに指定します。Container内にTextとImageのコンポーネントを配置してテキストと画像を並べて表示します。異なるViewportで結果をテストし、テキストと画像が想定どおりに表示されることを確認してください。テキストが長い場合は、エクスペリエンスのデザインを再検討します。
{
"type": "Container",
"items": [
{
"type": "Text",
"text": "This is an inline"
},
{
"type": "Image",
"source": "https://upload.wikimedia.org/wikipedia/commons/c/cc/Amazon_Alexa_App_Logo.png",
"scale": "best-fit",
"align": "left",
"spacing": "8dp",
"height": "48dp",
"width": "48dp"
},
{
"type": "Text",
"spacing": "8dp",
"text": "image of the Alexa icon."
}
],
"direction": "row"
},
<div align>タグの機能はAPLの何で対応できますか？
textAlignプロパティを使ってテキストの形式を設定します。
{
"type": "Container",
"items": [
{
"type": "Text",
"text": "This is"
},
{
"type": "Text",
"spacing": "8dp",
"text": "centered",
"textAlign": "center",
"textAlignVertical": "auto"
},
{
"type": "Text",
"spacing": "8dp",
"text": "text"
}
],
"direction": "column"
}