このブログはOptimizing Your Multimodal Experiences on the New Echo Show 15の翻訳に加筆・修正したものです。
Echo Show 15は、ご自宅のデジタル機器の中心として、忙しい家族の日常を快適に楽しく、お互いのつながりを保ち続けられるようデザインしたまったく新しいタイプのEcho Showです。 Echo Show 15に搭載された画面は、縦にも横にも向きを変えられます。また、壁に掛けたり、カウンターに置いたりと置き方も自由自在です。このブログでは、APLやWeb API for Gamesを使って縦長表示をサポートするようスキルを更新する方法をご紹介します。
Echoデバイスとして縦長モードに対応するのは、最新Echo Show 15が初ですが、APL 1.6が2021年4月にリリースされて以降、ユーザーは既にFireタブレット（Fire 7、Fire HD8、Fire HD10）でAPLの縦長モードエクスペリエンスに親しんできました。APLは自動スケーリングに対応していますので、縦長モード用にデザインされていない既存のAPLエクスペリエンスでも、新しいViewportプロファイルに合わせてスケーリングできます。ただし、横長のプロファイル向けにデザインされたAPLエクスペリエンスが多いため、縦長のViewportに合わせてスケーリングしたエクスペリエンスは必ずしも縦長に適しているとは限りません。次の画像はMatchboxのQuestion of the Day（英語スキル）の、縦長モードの例です。
Question of the Day
左：自動スケーリングの縦長モード
右：スケーリングをオフにし、レスポンシブ対応テンプレートを使った縦長モード
このセクションでは、Echo Show 15の縦長Viewportプロファイル（デバイス、縦長、中）のサポートを追加するか、スケーリングを完全にオフにしてこれらのデバイスで魅力的な縦長エクスペリエンスを実現する方法をご紹介します。また、ゲームにWeb APIを使って縦長モードに適応させる方法についてもご紹介します。
最初に決める必要があるのは、Echo Show 15のエクスペリエンスをスケーリングする方法です。何も変更せずに自動スケーリングのみで対応すると、先ほど見たようなレターボックス化されたエクスペリエンスが、Echo Show 15を縦長の向きで使うユーザーに表示されてしまいます。スケーリング戦略のオプションは次のいずれかです。
(a) Echo Show 15のViewportプロファイルをスキルでサポートするプロファイルに追加する
ユーザーに最高のエクスペリエンスを提供するには、新規にEcho Show 15のViewportプロファイルである「デバイス、横長、特大」と「デバイス、縦長、中」を、スキルでサポートするViewportプロファイルのリストに追加します。プロファイルは、Alexa開発者コンソールでビルドを選択し、インターフェースタブのこれらのプロファイルに対応するボックスにチェックを入れると追加できます。プロファイルを追加したら、APLドキュメントをレスポンシブ対応にし、開発者コンソールのテストタブから新しいプロファイルをテストしてください。
(b) 自動スケーリングをオフにする
本日より、自動スケーリングを完全にオフすることも可能になりました。つまり、新しいフォームファクターがリリースされて対応する新しいViewportプロファイルが追加されると、APLはスキルがそれらのフォームファクターに対応していると判断します。スケーリングをオフにするには、スキルのマニフェストを取得し、以下のインターフェースコードスニペットを追加してから、ASK CLIを使用してもう一度スキルを更新します。uriの値は実際に使用するエンドポイントに書き換えてください。
{
"manifest": {
"apis": {
"custom": {
"endpoint": {
"uri": "arn:aws:lambda:us-east-1:040623927470:function:xxxxxxx"
},
"interfaces": [
{
"supportedViewports": [
{
"mode": "HUB",
"shape": "RECTANGLE"
},
{
"mode": "HUB",
"shape": "ROUND"
},
{
"mode": "TV",
"shape": "RECTANGLE"
},
{
"mode": "MOBILE",
"shape": "RECTANGLE"
}
],
"type": "ALEXA_PRESENTATION_APL"
}
]
},
"manifestVersion": "1.0"
}
}
(c) 自動スケーリングを使う
この方法は、Echo Show 15のViewportを有効にしない場合か、スケーリングを完全にオフにした場合のいずれかに使用されます。APLドキュメントは、画面のサイズに合わせて拡大縮小します。拡大縮小したコンテンツは機能しますが、必ずしも意図したとおりに表示されるとは限りません。Amazonとしてはこのオプションをお勧めしませんが、どうしても使われる場合は、Echo Show 15の縦長Viewportプロファイル（デバイス、縦長、中）でコンテンツをテストして、少なくともデバイスでそのコンテンツが表示されることを確認することをお勧めします。
次のオプションは、縦長モードで問題なく表示されるよう、APLドキュメントを対応させることです。これには2つの方法があります。
(a) レスポンシブ対応テンプレートを使う
APLには、Alexaスキルで使えるレスポンシブ対応テンプレートのセットが用意されています。これらのレイアウトは、さまざまなモード、サイズ、形状を持つviewport（縦長を含む）に自動的に対応します。 下のサンプルでは、AlexaImageListテンプレートを使っています。 コンテンツが利用可能な画面スペースを最大限に利用できていることがわかります。
レスポンシブ対応テンプレートを使用するには、APLオーサリングツールを開き、「視覚応答を作成」を選択し、表示される一覧からテンプレートを選びます。
(b) カスタムAPLドキュメントを適応させる
とは言え、レスポンシブ対応テンプレートがすべてのニーズに対応できるわけではないため、多くの開発者は独自のカスタムレイアウトを作成しています。 カスタムレイアウトを適応させるため、Echo Show 15の縦長モード用にデバイス、縦長、中のviewportプロファイルを追加しました。また、Echo Show 15の横長モードにAPLドキュメントを最適化する場合用に、デバイス、横長、特大のviewportプロファイルもあります。これらのプロファイルを使用するには、以下のようにalexa-viewport-profilesパッケージをAPLドキュメントにインポートします。
{
"import": [
{
"name": "alexa-viewport-profiles",
"version": "1.3.0"
}
]
}
これで、APLドキュメントのwhen句やその他の式でviewportプロファイルを使用できるようになりました。 ドキュメントの条件付きロジックでパッケージのリソースを使用するには、リソース名に予約文字の「@」を使用します。 以下の例では、ユーザーのデバイスがhubPortraitMediumプロファイルの基準を満たすと、このwhen句がtrueと評価されます。
"when": "${@viewportProfile == @hubPortraitMedium}"（タブレットを含む）すべてのデバイスでの縦長モードに適応させたい場合、特定のviewportプロファイルを使う必要はありません。リソース@viewportOrientationを使って、現在のviewportの向きを識別できます。 下のサンプルでは、デバイスの向きによってContainerレイアウトが、「左から右」から「上から下」に変わります。
{
"type": "APL",
"version": "1.9",
"onConfigChange": {
"type": "Reinflate"
},
"import": [
{
"name": "alexa-styles",
"version": "1.3.0"
},
{
"name": "alexa-viewport-profiles",
"version": "1.3.0"
}
],
"mainTemplate": {
"parameters": [
"exampleData"
],
"item": {
"type": "Container",
"direction": "${@viewportOrientation == @viewportOrientationLandscape ? 'row' : 'column'}",
"padding": "@marginHorizontal, @spacingMedium",
"items": [
{
"type": "Image",
"scale": "best-fit",
"width": "${@viewportOrientation == @viewportOrientationLandscape ? 0 : '100%'}",
"height": "${@viewportOrientation == @viewportOrientationLandscape ? '100%' : 0}",
"grow": 0.5,
"source": "${exampleData.image}"
},
{
"type": "ScrollView",
"width": "${@viewportOrientation == @viewportOrientationLandscape ? 0 : '100%'}",
"height": "${@viewportOrientation == @viewportOrientationLandscape ? '100%' : 0}",
"grow": 0.5,
"spacing": "@spacingMedium",
"item": {
"type": "Text",
"fontSize": 20,
"text": "${exampleData.text}"
}
}
]
}
},
"settings": {
"supportsResizing": true
}
}
レンダリングされた状態は次のようになります。縦長モードの場合、読みやすさを改善し、画面スペースを有効活用できるようレイアウトが再構成されます。
スキルの実行中にユーザーが画面の向きを変えられるタブレットのようなデバイスでは、supportsResizing設定を使ってAPLドキュメントがサイズ変更される可能性があることを宣言できます。大型のデバイスでは、それほど頻繁に、しかもスキルセッションの途中でユーザーが向きを変えることは少ないですが、これはEcho Show 15にも当てはまります。つまり、supportsResizingを使うと、向きの変更に対応するデバイスでAPLドキュメントを回転させることができます。以下は、APLドキュメントのsupportsResizing設定の例です。
{
"type": "APL",
"version": "1.9",
"settings": {
"supportsResizing": true
},
"mainTemplate": {
...
}
}
レスポンシブ対応のAPLドキュメントは、自動でサイズ変更され、デバイスの向きが変わったときにも問題なく表示される必要があります。しかし、常に相対ディメンションだけを使えるとは限りません。APL1.6で、Reinflateコマンドを追加したのはこのためです。つまり、このコマンドはAPLランタイムにAPLドキュメント全体を再描画し、データバインディングをすべて更新するよう指示します。scrollviewコンポーネントのスクロールオフセットなど特定のプロパティを保存して、ユーザーが操作していた場所を見失わないようにすることができます。
保存したプロパティとReinflateを使用してデバイスの向きの変更に対応する方法については、このチュートリアルをご覧ください。以下は、デバイスのコンフィギュレーション（向きなど）が変更されたときにサイズ変更とドキュメント自体の再インフレートをサポートするAPLドキュメントの例です。
{
"type": "APL",
"version": "1.9",
"settings": {
"supportsResizing": true
},
"onConfigChange": {
"type": "Reinflate"
},
"mainTemplate": {
...
}
}
APL応答を更新するときは、Alexa開発者コンソールのAPLオーサリングツールで、新しいレイアウトをこまめにテストするようにしてください。HubLandscapeExtraLarge、HubPortraitMediumのviewportプロファイルをシミュレーションできるよう更新されているので、Echo Show 15の横長、縦長モードで表示するのと同じようにAPLドキュメントを確認できます。Alexa開発者コンソールのテストタブも、これらの新しいviewportプロファイルに対応するようになりました。
ビデオ、画像、ベクターグラフィックスを使用するスキルでは、これらのリソースに問題が発生した場合に、簡単に検出したり対応したりできるようになりました。
(a) 新しい画像、ビデオ、ベクターグラフィックスのイベントでエラーに適切に対応する
ImageとVectorGraphicのコンポーネントではonLoad/onFailイベント、VideoコンポーネントにはonTrackReady、onTrackFail、onTrackUpdateイベントをサポートできるようになりました。これらのイベントでは、何らかのソースが読み込まれたり、読み込みに失敗したり、ステータスが変更されたりした場合にAPLコマンドを実行できます。 たとえば、URLが無効なために画像の読み込みに失敗した場合、コンポーネントは新しいonFailハンドラーを呼び出します。このハンドラーは、SetValueを実行してsourceを別のプレースホルダー画像に変更するように設定できます。
(b) リッチなオーディオ応答を追加する
APL for Audio - 一般公開されました。高品質のオーディオ（48kHz）を使ったリッチなレイヤードオーディオ応答を作成できます。
Phaserやthree.jsなど、ほとんどの標準ウェブフレームワークは、デバイスの向きを検出し、ロックやデバイスの切り替えをユーザーに促すなどのアクションを実行できます。ただし、レスポンシブ対応のウェブデザインテクニックだけで、viewportのディメンションに基づいてUI要素の自動サイズ変更、非表示、縮小、拡大を行うことで、開発者が何もしなくてもスキルを縦長モードに対応させることができます。例として、下のVolleyのSong Quizをご確認ください。フレームワーク固有のガイダンスについてはこのブログでは触れませんが、ネイティブのCSSやJavaScriptを使って縦長モードに対応する方法のヒントを以下で紹介します。
Song Quiz
上： 下のレスポンシブ対応HTMLテクニックを使って縦長モードに対応しているSong Quiz
縦長モードまたは横長モードに固有のCSSを読み込む
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen and (orientation: portrait)" href="css/portrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation: landscape)" href="css/landscape.css" />
</head>
...
</html>
JavaScriptで画面の向きを検出する2つの方法
<script>
const debug = document.getElementById("debug");
// JavaScriptで縦長モードか横長モードかを次のように確認できます。
let orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;
if (orientation === "portrait-primary" || orientation === "portrait-secondary") {
debug.innerHTML += "縦長モードです";
} else {
debug.innerHTML += "横長モードです";
}
// window.orientationを使って画面の向きを確認することもできます。
switch(window.orientation) {
case 0:
debug.innerHTML += "<br/>回転： 0度";
break;
case 90:
debug.innerHTML += "<br/>回転： 90度";
case 180:
debug.innerHTML += "<br/>回転： 180度";
break;
case -90:
debug.innerHTML += "<br/>回転：-90度";
break;
default:
console.log("回転：" + window.orientation.toString());
break;
}
</script>
画面の変更を検出する
window.addEventListener(“orientationchange”, () => {})は、デスクトップブラウザでのサポートは終了しましたが、モバイルブラウザではフルサポートされています。Echo Show 15やFireタブレットではこれを使って縦長モードを認識します。
window.addEventListener("orientationchange", function () {
console.log("orientationChange");
if (screen.orientation.type === "landscape-primary") {
debug.innerHTML = "横長モードです";
} else {
debug.innerHTML = "縦長モードです";
}
});
縦長／横長モードでロックする
これは、特定のモードで画面をロックする場合に使用します。たとえば、次のようにします。
<script>
screen.orientation.lock('portrait');
</script>
Web API縦長モードのサポートをテストする方法
開発中に1080dp X 1920dpの解像度をエミュレートするには、基盤となるHTML5フレームワークのviewport／ウィンドウサイズを変更するか、ブラウザ（Chromeのデバイスモードなど）を使ってEcho Show 15のディメンションをシミュレートします。
過去のブログ記事で（Alexa Liveでも）お知らせしたように、Displayテンプレートは廃止されました。スキルでDisplayテンプレートを使用している場合は、なるべく早くAPLに移行してください。移行しない場合、スキルのユーザーエクスペリエンスが大きく損なわれる可能性があります。たとえば、<font>タグはクラウドで<span>タグに自動変換されますが（コードは変更されません）、<action>、<div>、<img>のタグと同じ機能を持つタグはありません。このため、<action>を使ったタッチベースのイベント、<div>を使った改行、<img>を使ったインライン画像は、正しく動作しなくなります。コンテンツを確認して、必要な調整を行ってください。
では、皆さんが開発されたスキルの公開を楽しみにしています。 サポートが必要でしたら、Alexa Community Slackで@mhaddy、@aruntalkstech、@austinvachにぜひ声をお掛けください。
カスタムスキルのQuick Linkを作成する
Alexa Web API for Gamesで開発を始める
