レスポンシブ対応コンポーネントとテンプレート
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-stylesとalexa-viewport-profilesも読み込まれます。個別に読み込む必要はありません。
利用可能なレスポンシブ対応コンポーネントとテンプレート
レスポンシブ対応コンポーネント
以下の表は、alexa-layoutsパッケージで利用できるレスポンシブ対応コンポーネントの一覧です。alexa-viewport-profilesパッケージのどのviewportプロファイルがコンポーネントをサポートしているかを示しています。
| 名前 | 説明 | 標準のviewport | ウィジェットのviewport |
|---|---|---|---|
|
コンテンツの背景にビデオ、画像、色を表示します。 |
はい |
中 | |
|
ユーザーがタッチまたはコントローラで選択できるボタンを表示します。ボタンに表示されるテキスト、ボタンの外観、ボタンを選択したときに実行されるコマンドを設定できます。 |
はい |
いいえ | |
|
コンテナ内に最小単位のコンテンツを表示します。このコンポーネントを使用すると、一目で読み取ることができる情報のスナップショットを表示できます。背景、メタデータ、ユーザーがカードを選択すると実行されるコマンドを設定できます。 |
はい |
いいえ | |
|
ユーザーがオン／オフを切り替えることができるチェックボックスを表示します。チェックボックスのサイズ、色、ユーザーがチェックボックスを操作したときに実行するコマンドを制御できます。 |
はい |
いいえ | |
|
水平方向または垂直方向の区切り線を表示します。これにより、項目が視覚的に区分されます。 |
はい |
いいえ | |
|
画面の下にヒントを表示して、ユーザーが試すことのできるその他の発話を提案します。 |
はい |
いいえ | |
|
ウィジェットの |
いいえ |
中 | |
|
タイトル、サブタイトル、戻るボタンなどの一般的なヘッダー情報を表示します。 |
はい |
中 | |
|
ベクターグラフィックをボタンとして表示します。ユーザーは、タッチまたはコントローラでボタンを選択できます。表示するグラフィック、ボタンのスタイル、およびボタンを選択したときに実行するコマンドを指定します。AlexaIconButtonは、disabled、pressed、focusedなど、さまざまな状態を自動的に処理します。 |
はい |
いいえ | |
|
画像を表示します。標準的なアスペクト比（縦長や円形など）や角丸などの効果を使って画像を表示できます。 |
はい |
いいえ | |
|
リストに合わせた形式で画像とテキストを表示します。 |
はい |
いいえ | |
|
リスト項目の番号を表示します。このコンポーネントは、複数の子コンポーネント（ |
はい |
いいえ | |
|
現在のページ番号と合計ページ数を表示します。たとえば、5ページ中1ページ目の場合は「1 | 5」のように表示します。このコンポーネントを使用して、Pagerでページに番号を割り当てることができます。 |
はい |
いいえ | |
|
Pagerに、現在のページと総ページ数を表示するグラフィックを表示します。コンポーネントはユーザーがページを変更するとアニメーションを実行できます。 |
はい |
中 | |
|
画像のコンテキストを提供するテキストを表示します。 |
はい |
中 | |
|
アニメーション化した進行状況バーを表示して進行中のアクティビティを表します。 |
はい |
中 | |
|
小型の円形デバイスに円形の進行状況バーを表示して、進行中のアクティビティを表します。 |
はい |
いいえ | |
|
アクションが進行中であることを表すアニメーション化されたドットを表示します。 |
はい |
いいえ | |
|
ユーザーがオン／オフを切り替えることができるラジオボタンを表示します。ボタンのサイズ、色、ユーザーがラジオボタンを操作したときに実行するコマンドを制御できます。 |
はい |
いいえ | |
|
項目の非対話型評価を表示します。デフォルトの星画像か、グラフィック用の独自のカスタムアセットを使用できます。 |
はい |
いいえ | |
|
対話型の進行状況バーを表示します。ユーザーは、コンテンツをスクラブしてバーをドラッグしたり、設定を変更したりできます。 |
はい |
いいえ | |
|
円形の対話型進行状況バーを表示します。ユーザーは、コンテンツをスクラブしてバーをドラッグしたり、設定を変更したりできます。 |
はい |
いいえ | |
|
ユーザーがスワイプしてアクションを実行できる項目を表示します。 |
はい |
いいえ | |
|
ユーザーがオン／オフを切り替えることができるスライド式のスイッチを表示します。スイッチのサイズ、色、ユーザーがスイッチを操作したときに実行するコマンドを制御できます。 |
はい |
いいえ | |
|
リストに合わせた形式でテキストを表示します。 |
はい |
中 | |
|
ビデオプレーヤーコントロールのセットを表示します。ボタンの外観をカスタマイズし、ユーザーがボタンを選択したときに実行するコマンドを定義します。 |
はい |
中 |
標準APLドキュメントでレスポンシブ対応コンポーネントを使う方法に関するデザインガイダンスについては、Alexaデザインガイド： レスポンシブ対応コンポーネントを参照してください。ウィジェットでレスポンシブ対応コンポーネントを使う方法に関するデザインガイダンスについては、Alexaデザインガイド： ウィジェットのレスポンシブ対応コンポーネントを参照してください。
レスポンシブ対応Motionコンポーネント
以下の表は、ウィジェットで動作するようデザインされたalexa-layoutsパッケージ内のMotionコンポーネントについてまとめたものです。
| 名前 | 説明 | 標準のviewport | ウィジェットのviewport |
|---|---|---|---|
|
ウィジェット固有の「スワイプしてめくる」ページ移動アニメーションで、連続したページにコンテンツを表示します。APLコンポーネントとレスポンシブ対応コンポーネントまたはテンプレートを使用して、表示するページを定義します。 |
いいえ |
中 | |
|
ウィジェット固有の「ズーム」ページ移動アニメーションで、連続したページにコンテンツを表示します。APLコンポーネントとレスポンシブ対応コンポーネントまたはテンプレートを使用して、表示するページを定義します。 |
いいえ |
中 | |
|
タップしたときにちょっとしたアニメーションを表示するウィジェットの本文にタップ対象を作成します。 |
いいえ |
中 |
レスポンシブ対応Motionコンポーネントを使う方法に関するデザインガイダンスについては、Alexaデザインガイド： ウィジェットのレスポンシブ対応Motionコンポーネントを参照してください。
レスポンシブ対応テンプレート
以下の表は、alexa-layoutsパッケージで利用できるレスポンシブ対応テンプレートの一覧です。alexa-viewport-profilesパッケージのどのviewportプロファイルがコンポーネントをサポートしているかを示しています。
| 名前 | 説明 | 標準のviewport | ウィジェットのviewport |
|---|---|---|---|
|
テキストや画像を表示して人物、場所、ものなどのエンティティに関する情報を表します。 |
はい |
いいえ | |
|
グリッド内に画像とテキストのリストを表示します。 |
はい |
いいえ | |
|
画面に短い情報テキスト文字列を表示します。 |
はい |
いいえ | |
|
ヘッダーとキャプション付きの画像を表示します。第1および第2テキストとしてキャプションテキストを指定したり、画像に対するキャプションの位置を指定したりできます。 |
いいえ |
中 | |
|
画像およびテキストのスクロール可能なリストを表示します。 |
はい |
いいえ | |
|
項目のリストを表示します。テンプレートでテキストベースのリスト項目を表示するか、画像ベースの項目を表示するかを指定します。 |
はい |
いいえ | |
|
一連のページに項目のリストを表示します。 |
はい |
いいえ | |
|
ヘッダーとキャプション付きの画像を表示します。第1および第2テキストとしてキャプションテキストを指定できます。 |
いいえ |
中 | |
|
テキスト項目のスクロール可能なリストを表示します。 |
はい |
中 | |
|
ウィジェットにヘッダー、背景、フッターアクションボタン付きのテキストを複数行表示します。第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 |
|
|
BodyTemplate2 |
|
|
BodyTemplate3 |
|
|
BodyTemplate6 |
|
|
BodyTemplate7 |
たとえば、オーサリングツールで新しいAPLドキュメントを作成し、画像表示サンプルを選択します。 |
|
ListTemplate1 |
|
|
ListTemplate2 |
|
画像
一部のDisplayテンプレートにはimageとbackgroundImageのプロパティがあります。これらのプロパティは、画像の複数のURLを指定できるimageオブジェクトを受け取ります。
APLレスポンシブ対応テンプレートでは、関連プロパティに1つの画像URLを指定します。
- 背景画像の場合は
backgroundImageSource AlexaDetailの前景画像またはAlexaListsのリスト項目の場合はimageSourceAlexaTextListのリスト項目内の画像の場合はimageThumbnailSource
テキストコンテンツ
DisplayテンプレートはtextContentオブジェクトを使用して表示するテキストを指定します。textContentオブジェクトにはprimaryText、secondaryText、tertiaryTextのプロパティが含まれます。
APLレスポンシブ対応コンポーネントは、トップレベルでprimaryText、secondaryText、tertiaryTextのプロパティを使用します。これらの各プロパティは、表示するテキストを指定した1つの文字列値を受け取ります。
たとえば、textContent.primaryText.textプロパティはAPLテンプレートのprimaryTextプロパティに対応します。
APLには、個別のPlainText、RichTextのテキスト型はありません。すべてのAPLテキスト文字列は、APL Textコンポーネント用に記述されたマークアップタグを使用できます。Displayテンプレートでは、<font>、<action>、<img>のマークアップタグはサポートされません。
リスト項目
リストを表示するDisplayテンプレートは、項目のlistItems配列を使用します。配列の各項目は、textContentなどの関連プロパティを持ったオブジェクトです。
リストを表示するAPLレスポンシブ対応テンプレートも、項目のlistItems配列を使用します。配列の各項目は、AlexaTextListItem、AlexaImageListItemのいずれかに対応するプロパティを持つオブジェクトです。.
これらのリスト項目コンポーネントはいずれも、テキストの表示を行うprimaryText、secondaryText、tertiaryTextのプロパティを持ちます。
AlexaTextListItemコンポーネントは、テキストの横に表示するサムネイル画像にimageThumbnailSourceを使用します。このプロパティは画像の1つのURLを受け取ります。
AlexaImageListItemコンポーネントは項目に表示する画像にimageSourceを使用します。このプロパティは画像の1つのURLを受け取ります。コンポーネントで追加の「image」プロパティを使って画像の外観をさらに調整します。
関連トピック
最終更新日: 2023 年 12 月 18 日