レスポンシブ対応コンポーネントとテンプレート
APL向けAlexaデザインシステムには、APLドキュメントで使用できる一連のレスポンシブ対応コンポーネントとテンプレートが用意されています。これらのレイアウトは、さまざまなモード、サイズ、形状を持つviewportに自動的に対応します。独自のレイアウトを開発する代わりにレスポンシブ対応コンポーネントとテンプレートを使用すると、手間をかけずにレスポンシブ対応のAPLドキュメントを作成できます。
レスポンシブ対応コンポーネントとテンプレートについて
APLのコンポーネントとは、画面に表示する基本的なUI要素のことです。APLでは、一連のプリミティブコンポーネントを定義します。たとえば、Text
コンポーネントはテキストブロックを表示します。コンポーネントを使用する際は、さまざまなviewportに対応できるようにしてください。たとえば、Text
コンポーネントの場合は、viewportの特性に基づいて、フォントのサイズや色を変更するための条件付きスタイルを作成できます。
レスポンシブ対応コンポーネントは、モジュール式のレスポンシブ対応要素にコンポーネントを結合したものです。コンポーネントを使用する場合と同様に、ドキュメントの構成要素として使用できます。たとえば、Buttonは、異なる種類のすべてのデバイスで機能するボタンを表示し、さまざまなボタンの状態を自動的に処理します。
レスポンシブ対応テンプレートは、コンポーネントとレスポンシブ対応コンポーネントを組み合わせたもので、完全なviewportデザインを提供します。テンプレートには、背景、ヘッダー、コンテンツなどが含まれ、viewport全体に適用されます。たとえば、Text Listテンプレートでは、背景とヘッダーを含むテキスト項目のスクロールリストが表示されます。
レスポンシブ対応コンポーネントとテンプレートを使用して、簡単な手順でAPLドキュメントを作成し、さまざまなviewportに対応できるようにします。以下に示すように、独自のレイアウトを一から作成するよりも、はるかに簡単です。
レスポンシブ対応コンポーネント/テンプレートを使用する | APLプリミティブコンポーネントからカスタムレイアウトを構築する |
---|---|
Button
|
Button
|
全画面スクロールリスト
|
全画面スクロールリスト
|
alexa-layoutsパッケージを読み込む
レスポンシブ対応コンポーネントとテンプレートを使用するには、ドキュメントのimport
配列にalexa-layouts
パッケージを追加します。alexa-layouts
パッケージの最新バージョンは1.5.0
です。
ドキュメントのimports
セクションの例は、次のとおりです。
{
"import": [
{
"name": "alexa-layouts",
"version": "1.5.0"
}
]
}
alexa-layouts
を読み込むと、自動的にalexa-styles
とalexa-viewport-profiles
も読み込まれます。個別に読み込む必要はありません。
利用可能なレスポンシブ対応コンポーネントとテンプレート
利用可能な各コンポーネントまたはテンプレートについて詳しくは、以下のリンクを参照してください。
レスポンシブ対応コンポーネント:
- AlexaBackground
- AlexaButton
- AlexaCheckbox
- AlexaDivider
- AlexaFooter
- AlexaHeader
- AlexaIconButton
- AlexaImage
- AlexaImageListItem
- AlexaOrdinal
- AlexaPageCounter
- AlexaProgressBar
- AlexaProgressBarRadial
- AlexaProgressDots
- AlexaRadioButton
- AlexaRating
- AlexaSlider
- AlexaSliderRadial
- AlexaSwipeToAction
- AlexaSwitch
- AlexaTextListItem
- AlexaTransportControls
レスポンシブ対応テンプレート:
コンポーネントとテンプレートの右から左への表示のサポート
レスポンシブ対応コンポーネントとテンプレートは、APL 1.7以降を使用する場合、アラビア語などの右から左に記述する言語をサポートします。詳細については、右から左に記述する言語のサポートを参照してください。
Viewportプロファイルのサポート
レスポンシブ対応コンポーネントとテンプレートは、最新のalexa-viewport-profiles
パッケージで使用可能な次のビューポートプロファイルをサポートします。
@hubRoundSmall
@hubLandscapeSmall
@hubLandscapeMedium
@hubLandscapeLarge
@hubLandscapeXLarge
@hubPortraitMedium
@mobileSmall
@mobileMedium
@mobileLarge
@tvLandscapeXLarge
たとえば、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
のリスト項目の場合はimageSource
AlexaTextList
のリスト項目内の画像の場合は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」プロパティを使って画像の外観をさらに調整します。
関連トピック
最終更新日: 2021 年 12 月 10 日