最新のEcho Show 15でマルチモーダルエクスペリエンスを最適化する

Ryan Matthews Oct 12, 2021
Share:
Multimodal
Blog_Header_Post_Img

このブログはOptimizing Your Multimodal Experiences on the New Echo Show 15を翻訳したものです。

昨日、私たちは最新のEcho Show 15を発表しました。ご自宅のデジタル機器の中心として、忙しい家族の日常を快適に楽しく、お互いのつながりを保ち続けられるようデザインしたまったく新しいタイプのEcho Showです。 Echo Show 15に搭載された画面は、縦にも横にも向きを変えられます。また、壁に掛けたり、カウンターに置いたりと置き方も自由自在です。このブログでは、APLやWeb API for Gamesを使って縦長表示をサポートするようスキルを更新する方法をご紹介します。

 

デバイスと同時に、APL 1.8も発表しました。APL 1.8の新機能によって、ユーザーにとってさらに魅力的なマルチモーダルエクスペリエンスが実現します。 APL 1.8はすでに、第1世代のEcho Show、第2世代のEcho Show、Echo Show 5、Echo Show 8、Fire TVデバイスでご利用いただけます。近日中には、Echo Show 10やFireタブレットデバイスにも展開する予定です。これまでどおり、スキルリクエストでsupportedInterfacesオブジェクトを使用して、デバイスでサポートされているAPLのバージョンを確認できます。

Echo Show 15への適応

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(英語スキル)で、縦長モードに対応する前と後を比べてみてください。

Two screenshots of Question of the Day showing a BEFORE and AFTER version of portrait mode support.

Question of the Dayここをクリックして試してみましょう

左:自動スケーリングの縦長モード

右:スケーリングをオフにし、レスポンシブ対応テンプレートを使った縦長モード

 

このセクションでは、Echo Show 15の縦長Viewportプロファイル(デバイス、縦長、中)のサポートを追加するか、スケーリングを完全にオフにしてこれらのデバイスで魅力的な縦長エクスペリエンスを実現する方法をご紹介します。また、ゲームにWeb APIを使って縦長モードに適応させる方法についてもご紹介します。

APLベースのエクスペリエンスの適応

ステップ1: スケーリング戦略を決定する

最初に決める必要があるのは、Echo Show 15のエクスペリエンスをスケーリングする方法です。何も変更せずに自動スケーリングのみで対応すると、先ほど見たようなレターボックス化されたエクスペリエンスが、Echo Show 15を縦長の向きで使うユーザーに表示されてしまいます。スケーリング戦略のオプションは次のいずれかです。

 

(a) Echo Show 15のViewportプロファイルをスキルでサポートするプロファイルに追加する

ユーザーに最高のエクスペリエンスを提供するには、新規にEcho Show 15のViewportプロファイルである「デバイス、横長、特大」と「デバイス、縦長、中」を、スキルでサポートするViewportプロファイルのリストに追加します。プロファイルは、Alexa開発者コンソールでビルドを選択し、インターフェースタブのこれらのプロファイルに対応するボックスにチェックを入れると追加できます。プロファイルを追加したら、APLドキュメントをレスポンシブ対応にし、開発者コンソールのテストタブから新しいプロファイルをテストしてください。

Screenshot from the Alexa Developer Console showing the new Echo Show 15 viewports.

(b) 自動スケーリングをオフにする

本日より、自動スケーリングを完全にオフすることも可能になりました。つまり、新しいフォームファクターがリリースされて対応する新しいViewportプロファイルが追加されると、APLはスキルがそれらのフォームファクターに対応していると判断します。スケーリングをオフにするには、スキルのマニフェストを取得し、以下のインターフェースコードスニペットを追加してから、ASK CLIを使用してもう一度スキルを更新します。uriの値は実際に使用するエンドポイントに書き換えてください。

Copied to clipboard
{
    "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プロファイル(デバイス、縦長、中)でコンテンツをテストして、少なくともデバイスでそのコンテンツが表示されることを確認することをお勧めします。

ステップ2: APLを縦長の向きに適応させる

次のオプションは、縦長モードで問題なく表示されるよう、APLドキュメントを対応させることです。これには2つの方法があります。

 

(a) レスポンシブ対応テンプレートを使う

APLには、Alexaスキルで使えるレスポンシブ対応テンプレートのセットが用意されています。これらのレイアウトは、さまざまなモード、サイズ、形状を持つviewport(縦長を含む)に自動的に対応します。 下のサンプルでは、AlexaImageListテンプレートを使っています。 コンテンツが利用可能な画面スペースを最大限に利用できていることがわかります。

Portrait and landscape versions of the same content, illustrating how each makes the best use of the available real estate.

レスポンシブ対応テンプレートを使用するには、APLオーサリングツールを開き、「視覚応答を作成」を選択し、表示される一覧からテンプレートを選びます。

 

(b) カスタムAPLドキュメントを適応させる

とは言え、レスポンシブ対応テンプレートがすべてのニーズに対応できるわけではないため、多くの開発者は独自のカスタムレイアウトを作成しています。  カスタムレイアウトを適応させるため、Echo Show 15の縦長モード用にデバイス、縦長、中のviewportプロファイルを追加しました。また、Echo Show 15の横長モードにAPLドキュメントを最適化する場合用に、デバイス、横長、特大のviewportプロファイルもあります。これらのプロファイルを使用するには、以下のようにalexa-viewport-profilesパッケージをAPLドキュメントにインポートします。

Copied to clipboard
{
   "import": [
    {
      "name": "alexa-viewport-profiles",
      "version": "1.3.0"
    }
  ]
}

これで、APLドキュメントのwhen句やその他の式でviewportプロファイルを使用できるようになりました。 ドキュメントの条件付きロジックでパッケージのリソースを使用するには、リソース名に予約文字の「@」を使用します。 以下の例では、ユーザーのデバイスがhubPortraitMediumプロファイルの基準を満たすと、このwhen句がtrueと評価されます。

Copied to clipboard
"when": "${@viewportProfile == @hubPortraitMedium}"

(タブレットを含む)すべてのデバイスでの縦長モードに適応させたい場合、特定のviewportプロファイルを使う必要はありません。リソース@viewportOrientationを使って、現在のviewportの向きを識別できます。 下のサンプルでは、デバイスの向きによってContainerレイアウトが、「左から右」から「上から下」に変わります。

Copied to clipboard
{
  "type": "APL",
  "version": "1.8",
   "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
  }
}

レンダリングされた状態は次のようになります。縦長モードの場合、読みやすさを改善し、画面スペースを有効活用できるようレイアウトが再構成されます。

Screenshots showing a portrait and landscape-optimized view of two pieces of content.
ステップ3: 動的なサイズ変更を有効にする(オプション)

スキルの実行中にユーザーが画面の向きを変えられるタブレットのようなデバイスでは、supportsResizing設定を使ってAPLドキュメントがサイズ変更される可能性があることを宣言できます。大型のデバイスでは、それほど頻繁に、しかもスキルセッションの途中でユーザーが向きを変えることは少ないですが、これはEcho Show 15にも当てはまります。つまり、supportsResizingを使うと、向きの変更に対応するデバイスでAPLドキュメントを回転させることができます。以下は、APLドキュメントのsupportsResizing設定の例です。

Copied to clipboard
{
  "type": "APL",
  "version": "1.8",
  "settings": {
    "supportsResizing": true
  },
  "mainTemplate": {
     ...
  }
}

レスポンシブ対応のAPLドキュメントは、自動でサイズ変更され、デバイスの向きが変わったときにも問題なく表示される必要があります。しかし、常に相対ディメンションだけを使えるとは限りません。今年の前半にAPL1.6で、新規のReinflateコマンドを追加したのはこのためです。つまり、このコマンドはAPLランタイムにAPLドキュメント全体を再描画し、データバインディングをすべて更新するよう指示します。scrollviewコンポーネントのスクロールオフセットなど特定のプロパティを保存して、ユーザーが操作していた場所を見失わないようにすることができます。

 

保存したプロパティとReinflateを使用してデバイスの向きの変更に対応する方法については、このチュートリアルをご覧ください。以下は、デバイスのコンフィギュレーション(向きなど)が変更されたときにサイズ変更とドキュメント自体の再インフレートをサポートするAPLドキュメントの例です。

Copied to clipboard
{
  "type": "APL",
  "version": "1.6",
  "settings": {
    "supportsResizing": true
  },
  "onConfigChange": {
    "type": "Reinflate"
  },
  "mainTemplate": {
     ...
  }
}
ステップ4: オーサリングツールで縦長エクスペリエンスをプレビューする

APL応答を更新するときは、Alexa開発者コンソールAPLオーサリングツールで、新しいレイアウトをこまめにテストするようにしてください。HubLandscapeExtraLargeHubPortraitMediumのviewportプロファイルをシミュレーションできるよう更新されているので、Echo Show 15の横長、縦長モードで表示するのと同じようにAPLドキュメントを確認できます。Alexa開発者コンソールのテストタブも、これらの新しいviewportプロファイルに対応するようになりました。

ステップ5: リッチなオーディオを追加して想定どおりに画像やビデオを読み込む(オプション)

ビデオ、画像、ベクターグラフィックスを使用するスキルでは、これらのリソースに問題が発生した場合に、簡単に検出したり対応したりできるようになりました。

(a) 新しい画像、ビデオ、ベクターグラフィックスのイベントでエラーに適切に対応する

ImageVectorGraphicのコンポーネントではonLoad/onFailイベント、VideoコンポーネントにはonTrackReadyonTrackFailonTrackUpdateイベントをサポートできるようになりました。これらのイベントでは、何らかのソースが読み込まれたり、読み込みに失敗したり、ステータスが変更されたりした場合にAPLコマンドを実行できます。 たとえば、URLが無効なために画像の読み込みに失敗した場合、コンポーネントは新しいonFailハンドラーを呼び出します。このハンドラーは、SetValueを実行してsourceを別のプレースホルダー画像に変更するように設定できます。

 

(b) リッチなオーディオ応答を追加する

APL for Audio - 一般公開されました。高品質のオーディオ(48kHz)を使ったリッチなレイヤードオーディオ応答を作成できます。

Web API for Gamesエクスペリエンスに適応

Phaserthree.jsなど、ほとんどの標準ウェブフレームワークは、デバイスの向きを検出し、ロックやデバイスの切り替えをユーザーに促すなどのアクションを実行できます。ただし、レスポンシブ対応のウェブデザインテクニックだけで、viewportのディメンションに基づいてUI要素の自動サイズ変更、非表示、縮小、拡大を行うことで、開発者が何もしなくてもスキルを縦長モードに対応させることができます。例として、下のVolleyのSong Quizをご確認ください。フレームワーク固有のガイダンスについてはこのブログでは触れませんが、ネイティブのCSSやJavascriptを使って縦長モードに対応する方法のヒントを以下で紹介します。

Playlist selection from Volley's Song Quiz skill, in portrait mode.

Song Quiz(ここをクリックして試してみましょう

上: 下のレスポンシブ対応HTMLテクニックを使って縦長モードに対応しているSong Quiz

 

縦長モードまたは横長モードに固有のCSSを読み込む

Copied to clipboard
<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つの方法

Copied to clipboard
<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タブレットではこれを使って縦長モードを認識します。

Copied to clipboard
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のディメンションをシミュレートします。

Displayテンプレートベースのエクスペリエンス

過去のブログ記事で(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で開発を始める
Alexa Web APIを使った新しいマルチモーダルゲームをデザインする

Subscribe