レスポンシブ対応コンポーネントとテンプレート


レスポンシブ対応コンポーネントとテンプレート

APL向けAlexaデザインシステムには、APLドキュメントで使用できる一連のレスポンシブ対応コンポーネントとテンプレートが用意されています。これらのレイアウトは、さまざまなモード、サイズ、形状を持つviewportに自動的に対応します。独自のレイアウトを開発する代わりにレスポンシブ対応コンポーネントとテンプレートを使用すると、手間をかけずにレスポンシブ対応のAPLドキュメントを作成できます。

レスポンシブ対応コンポーネントとテンプレートについて

APLのコンポーネントとは、画面に表示する基本的なUI要素のことです。APLでは、一連のプリミティブコンポーネントを定義します。たとえば、Textコンポーネントはテキストブロックを表示します。コンポーネントを使用する際は、さまざまなviewportに対応できるようにしてください。たとえば、Textコンポーネントの場合は、viewportの特性に基づいて、フォントのサイズや色を変更するための条件付きスタイルを作成できます。

レスポンシブ対応コンポーネントは、モジュール式のレスポンシブ対応要素にコンポーネントを結合したものです。コンポーネントを使用する場合と同様に、ドキュメントの構成要素として使用できます。たとえば、Buttonは、異なる種類のすべてのデバイスで機能するボタンを表示し、さまざまなボタンの状態を自動的に処理します。

Motionコンポーネントは、ウィジェットへのモーションの追加に特化してデザインされたレスポンシブ対応コンポーネントです。これらのコンポーネントには、ウィジェットにモーションを追加する際に推奨される方法が用意されています。たとえば、Motion Pagerコンポーネントは、ウィジェット固有のページ変更アニメーションを使ってpagerにコンテンツを表示します。ウィジェットは、ユーザーがインストールしたその他のウィジェットのそばのウィジェットパネルに表示されるため、過剰なモーションはユーザーの気を散らし、ユーザーエクスペリエンスの低下につながります。

レスポンシブ対応テンプレートは、コンポーネントとレスポンシブ対応コンポーネントを組み合わせたもので、完全なviewportデザインを提供します。テンプレートには、背景、ヘッダー、コンテンツなどが含まれ、viewport全体に適用されます。たとえば、Text Listテンプレートでは、背景とヘッダーを含むテキスト項目のスクロールリストが表示されます。

レスポンシブ対応コンポーネントとテンプレートを使用して、簡単な手順でAPLドキュメントを作成し、さまざまなviewportに対応できるようにします。これは、独自のレイアウトを一から作成するよりも、はるかに簡単です。

alexa-layoutsパッケージを読み込む

レスポンシブ対応コンポーネントとテンプレートを使用するには、ドキュメントのimport配列にalexa-layoutsパッケージを追加します。alexa-layoutsパッケージの最新バージョンは1.7.0です。

ドキュメントのimportsセクションの例は、次のとおりです。

{
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.7.0"
    }
  ]
}

alexa-layoutsを読み込むと、自動的にalexa-stylesalexa-viewport-profilesも読み込まれます。個別に読み込む必要はありません。

利用可能なレスポンシブ対応コンポーネントとテンプレート

レスポンシブ対応コンポーネント

以下の表は、alexa-layoutsパッケージで利用できるレスポンシブ対応コンポーネントの一覧です。alexa-viewport-profilesパッケージのどのviewportプロファイルがコンポーネントをサポートしているかを示しています。

名前 説明 標準のviewport ウィジェットのviewport

Background

コンテンツの背景にビデオ、画像、色を表示します。

はい


Button

ユーザーがタッチまたはコントローラで選択できるボタンを表示します。ボタンに表示されるテキスト、ボタンの外観、ボタンを選択したときに実行されるコマンドを設定できます。

はい

いいえ

Card

コンテナ内に最小単位のコンテンツを表示します。このコンポーネントを使用すると、一目で読み取ることができる情報のスナップショットを表示できます。背景、メタデータ、ユーザーがカードを選択すると実行されるコマンドを設定できます。

はい

いいえ

Check Box

ユーザーがオン/オフを切り替えることができるチェックボックスを表示します。チェックボックスのサイズ、色、ユーザーがチェックボックスを操作したときに実行するコマンドを制御できます。

はい

いいえ

Divider

水平方向または垂直方向の区切り線を表示します。これにより、項目が視覚的に区分されます。

はい

いいえ

Footer

画面の下にヒントを表示して、ユーザーが試すことのできるその他の発話を提案します。

はい

いいえ

Footer Action Button

ウィジェットのAlexaButtonのバリエーションです。ユーザーが選択できるボタンを表示します。ボタンの外観やユーザーがボタンを選択したときに実行するコマンドを制御できます。

いいえ


Header

タイトル、サブタイトル、戻るボタンなどの一般的なヘッダー情報を表示します。

はい


Icon Button

ベクターグラフィックをボタンとして表示します。ユーザーは、タッチまたはコントローラでボタンを選択できます。表示するグラフィック、ボタンのスタイル、およびボタンを選択したときに実行するコマンドを指定します。AlexaIconButtonは、disabled、pressed、focusedなど、さまざまな状態を自動的に処理します。

はい

いいえ

Image

画像を表示します。標準的なアスペクト比(縦長や円形など)や角丸などの効果を使って画像を表示できます。

はい

いいえ

Image List Item

リストに合わせた形式で画像とテキストを表示します。

はい

いいえ

Ordinal

リスト項目の番号を表示します。このコンポーネントは、複数の子コンポーネント(SequenceContainerPagerなど)を持ち、リスト項目に番号を割り当てるために使用します。

はい

いいえ

Page Counter

現在のページ番号と合計ページ数を表示します。たとえば、5ページ中1ページ目の場合は「1 | 5」のように表示します。このコンポーネントを使用して、Pagerでページに番号を割り当てることができます。

はい

いいえ

Pagination Dots

Pagerに、現在のページと総ページ数を表示するグラフィックを表示します。コンポーネントはユーザーがページを変更するとアニメーションを実行できます。

はい


Photo Caption

画像のコンテキストを提供するテキストを表示します。

はい


Progress Bar

アニメーション化した進行状況バーを表示して進行中のアクティビティを表します。

はい


Progress Bar Radial

小型の円形デバイスに円形の進行状況バーを表示して、進行中のアクティビティを表します。

はい

いいえ

Progress Dots

アクションが進行中であることを表すアニメーション化されたドットを表示します。

はい

いいえ

Radio Button

ユーザーがオン/オフを切り替えることができるラジオボタンを表示します。ボタンのサイズ、色、ユーザーがラジオボタンを操作したときに実行するコマンドを制御できます。

はい

いいえ

Rating

項目の非対話型評価を表示します。デフォルトの星画像か、グラフィック用の独自のカスタムアセットを使用できます。

はい

いいえ

Slider

対話型の進行状況バーを表示します。ユーザーは、コンテンツをスクラブしてバーをドラッグしたり、設定を変更したりできます。

はい

いいえ

Slider Radial

円形の対話型進行状況バーを表示します。ユーザーは、コンテンツをスクラブしてバーをドラッグしたり、設定を変更したりできます。

はい

いいえ

Swipe to Action

ユーザーがスワイプしてアクションを実行できる項目を表示します。

はい

いいえ

Switch

ユーザーがオン/オフを切り替えることができるスライド式のスイッチを表示します。スイッチのサイズ、色、ユーザーがスイッチを操作したときに実行するコマンドを制御できます。

はい

いいえ

Text List Item

リストに合わせた形式でテキストを表示します。

はい


Transport Controls

ビデオプレーヤーコントロールのセットを表示します。ボタンの外観をカスタマイズし、ユーザーがボタンを選択したときに実行するコマンドを定義します。

はい


標準APLドキュメントでレスポンシブ対応コンポーネントを使う方法に関するデザインガイダンスについては、Alexaデザインガイド: レスポンシブ対応コンポーネントを参照してください。ウィジェットでレスポンシブ対応コンポーネントを使う方法に関するデザインガイダンスについては、Alexaデザインガイド: ウィジェットのレスポンシブ対応コンポーネントを参照してください。

レスポンシブ対応Motionコンポーネント

以下の表は、ウィジェットで動作するようデザインされたalexa-layoutsパッケージ内のMotionコンポーネントについてまとめたものです。

名前 説明 標準のviewport ウィジェットのviewport

Motion Pager

ウィジェット固有の「スワイプしてめくる」ページ移動アニメーションで、連続したページにコンテンツを表示します。APLコンポーネントとレスポンシブ対応コンポーネントまたはテンプレートを使用して、表示するページを定義します。

いいえ


Motion Scale

ウィジェット固有の「ズーム」ページ移動アニメーションで、連続したページにコンテンツを表示します。APLコンポーネントとレスポンシブ対応コンポーネントまたはテンプレートを使用して、表示するページを定義します。

いいえ


Press State

タップしたときにちょっとしたアニメーションを表示するウィジェットの本文にタップ対象を作成します。

いいえ


レスポンシブ対応Motionコンポーネントを使う方法に関するデザインガイダンスについては、Alexaデザインガイド: ウィジェットのレスポンシブ対応Motionコンポーネントを参照してください。

レスポンシブ対応テンプレート

以下の表は、alexa-layoutsパッケージで利用できるレスポンシブ対応テンプレートの一覧です。alexa-viewport-profilesパッケージのどのviewportプロファイルがコンポーネントをサポートしているかを示しています。

名前 説明 標準のviewport ウィジェットのviewport

Detail

テキストや画像を表示して人物、場所、ものなどのエンティティに関する情報を表します。

はい

いいえ

Grid List

グリッド内に画像とテキストのリストを表示します。

はい

いいえ

Headline

画面に短い情報テキスト文字列を表示します。

はい

いいえ

Image Caption

ヘッダーとキャプション付きの画像を表示します。第1および第2テキストとしてキャプションテキストを指定したり、画像に対するキャプションの位置を指定したりできます。

いいえ


Image List

画像およびテキストのスクロール可能なリストを表示します。

はい

いいえ

Lists

項目のリストを表示します。テンプレートでテキストベースのリスト項目を表示するか、画像ベースの項目を表示するかを指定します。

はい

いいえ

Paginated List

一連のページに項目のリストを表示します。

はい

いいえ

Photo

ヘッダーとキャプション付きの画像を表示します。第1および第2テキストとしてキャプションテキストを指定できます。

いいえ


Text List

テキスト項目のスクロール可能なリストを表示します。

はい


Text Wrapping

ウィジェットにヘッダー、背景、フッターアクションボタン付きのテキストを複数行表示します。第1、第2、第3のテキストを表示できます。

いいえ


標準APLドキュメントでレスポンシブ対応テンプレートを使う方法に関するデザインガイダンスについては、Alexaデザインガイド: レスポンシブ対応テンプレートを参照してください。ウィジェットでレスポンシブ対応テンプレートを使う方法に関するデザインガイダンスについては、Alexaデザインガイド: ウィジェットのレスポンシブ対応テンプレートを参照してください。

コンポーネントとテンプレートの右から左への表示のサポート

レスポンシブ対応コンポーネントとテンプレートは、APL 1.7以降を使用する場合、アラビア語などの右から左に記述する言語をサポートします。詳細については、右から左に記述する言語のサポートを参照してください。

Viewportプロファイルのサポート

Viewportプロファイルは、alexa-viewport-profilesパッケージで使用できます。

標準viewportプロファイルには、以下が含まれます。

  • すべての円形デバイスプロファイル:
    • 円形デバイス(@hubRoundSmall
  • すべての横長デバイスプロファイル:
    • デバイス、横長、小(@hubLandscapeSmall
    • デバイス、横長、中(@hubLandscapeMedium
    • デバイス、横長、大(@hubLandscapeLarge
    • デバイス、横長、特大(@hubLandscapeXLarge
  • すべての縦長デバイスプロファイル:
    • デバイス、縦長、中(@hubPortraitMedium
  • すべてのモバイルプロファイル:
    • モバイル、小(@mobileSmall
    • モバイル、中(@mobileMedium
    • モバイル、大(@mobileLarge
  • すべてのテレビプロファイル:
  • テレビ、全画面(@tvLandscapeXLarge

ウィジェットのviewportプロファイルには、以下が含まれます。

  • ウィジェット、中(@hubWidgetMedium

たとえば、AlexaHeadlineテンプレートを使用すると、サポートされている各viewportプロファイルでうまく機能することが期待できます。

viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

Displayテンプレートをレスポンシブ対応テンプレートに置き換える

以前のDisplayインターフェースは、コンテンツの画面表示にDisplayテンプレートのセットを使用していました。Displayインターフェースは廃止になりました。APLレスポンシブ対応コンポーネントおよびテンプレートは、同じ機能を提供するテンプレートを提供しています。

Displayテンプレート APLレスポンシブ対応テンプレート

BodyTemplate1

AlexaHeadlineは背景上に短いテキストを表示します。

AlexaDetailは背景上に長いテキストを表示します。レイアウトはスクロールするため、テキストが長くても割愛されることはありません。

  • titleにはheaderTitleを使用します。
  • 背景画像にはbackgroundImageSourceを使用します。
  • テキストコンテンツにはprimaryTextsecondaryTextbodyTextを使用します。

BodyTemplate2

AlexaDetailは前景画像とともにテキストを表示します。

  • titleにはheaderTitleを使用します。
  • 背景画像にはbackgroundImageSourceを使用します。
  • テキストコンテンツにはprimaryTextsecondaryTextbodyTextを使用します。
  • 画像にはimageSourceを使用します。
  • detailImageAlignmentrightを設定すると、左側にテキスト、右側に画像を表示できます。

BodyTemplate3

AlexaDetailは前景画像とともにテキストを表示します。

  • titleにはheaderTitleを使用します。
  • 背景画像にはbackgroundImageSourceを使用します。
  • テキストコンテンツにはprimaryTextsecondaryTextbodyTextを使用します。
  • 画像にはimageSourceを使用します。
  • detailImageAlignmentleftを設定すると、右側にテキスト、左側に画像を表示できます。

BodyTemplate6

AlexaHeadlineは背景上に短いテキストを表示します。

BodyTemplate7

BodyTemplate7に完全に一致するレスポンシブ対応テンプレートはありません。同様の外観を作成するには複数のレスポンシブ対応コンポーネントを組み合わせます。

  • AlexaBackgroundを使用すると背景画像を表示できます。
  • AlexaHeaderを使用すると画面上部にテキストを表示できます。
  • AlexaImageを使用すると拡張可能な前景画像を表示できます。

たとえば、オーサリングツールで新しいAPLドキュメントを作成し、画像表示サンプルを選択します。

ListTemplate1

AlexaTextListはテキスト項目が縦にスクロールするリストを表示します。リスト項目には画像のサムネイルと情報の複数フィールドを含めることができます。

  • titleにはheaderTitleを使用します。
  • 背景画像にはbackgroundImageSourceを使用します。
  • 表示する項目にはlistItems配列を使用します。

ListTemplate2

listImagePrimacytrueを設定してAlexaListsを使用すると、横並びリストに画像項目を表示できます。

  • titleにはheaderTitleを使用します。
  • 背景画像にはbackgroundImageSourceを使用します。

画像

一部のDisplayテンプレートにはimagebackgroundImageのプロパティがあります。これらのプロパティは、画像の複数のURLを指定できるimageオブジェクトを受け取ります。

APLレスポンシブ対応テンプレートでは、関連プロパティに1つの画像URLを指定します。

  • 背景画像の場合はbackgroundImageSource
  • AlexaDetailの前景画像またはAlexaListsのリスト項目の場合はimageSource
  • AlexaTextListのリスト項目内の画像の場合はimageThumbnailSource

テキストコンテンツ

DisplayテンプレートはtextContentオブジェクトを使用して表示するテキストを指定します。textContentオブジェクトにはprimaryTextsecondaryTexttertiaryTextのプロパティが含まれます。

APLレスポンシブ対応コンポーネントは、トップレベルでprimaryTextsecondaryTexttertiaryTextのプロパティを使用します。これらの各プロパティは、表示するテキストを指定した1つの文字列値を受け取ります。

たとえば、textContent.primaryText.textプロパティはAPLテンプレートのprimaryTextプロパティに対応します。

APLには、個別のPlainTextRichTextのテキスト型はありません。すべてのAPLテキスト文字列は、APL Textコンポーネント用に記述されたマークアップタグを使用できます。Displayテンプレートでは、<font><action><img>のマークアップタグはサポートされません。

リスト項目

リストを表示するDisplayテンプレートは、項目のlistItems配列を使用します。配列の各項目は、textContentなどの関連プロパティを持ったオブジェクトです。

リストを表示するAPLレスポンシブ対応テンプレートも、項目のlistItems配列を使用します。配列の各項目は、AlexaTextListItemAlexaImageListItemのいずれかに対応するプロパティを持つオブジェクトです。.

これらのリスト項目コンポーネントはいずれも、テキストの表示を行うprimaryTextsecondaryTexttertiaryTextのプロパティを持ちます。

AlexaTextListItemコンポーネントは、テキストの横に表示するサムネイル画像にimageThumbnailSourceを使用します。このプロパティは画像の1つのURLを受け取ります。

AlexaImageListItemコンポーネントは項目に表示する画像にimageSourceを使用します。このプロパティは画像の1つのURLを受け取ります。コンポーネントで追加の「image」プロパティを使って画像の外観をさらに調整します。


このページは役に立ちましたか?

最終更新日: 2023 年 12 月 18 日