レスポンシブ対応コンポーネントとテンプレート
APL向けAlexaデザインシステムには、APLドキュメントで使用できる一連のレスポンシブ対応コンポーネントとテンプレートが用意されています。これらは、さまざまなモード、サイズ、形状を持つviewportに自動的に対応するように開発されています。独自のレイアウトを開発する代わりにレスポンシブ対応コンポーネントとテンプレートを使用すると、手間をかけずにレスポンシブ対応のAPLドキュメントを作成できます。
レスポンシブ対応コンポーネントとテンプレートについて
APLのコンポーネントとは、画面に表示できる基本的なUI要素のことです。利用可能なコンポーネントは、APLによって定義されています。たとえば、Textコンポーネントはテキストブロックを表示します。コンポーネントを使用する際は、さまざまなviewportに対応できるようにしてください。たとえば、Textコンポーネントの場合は、viewportの特性に基づいて、フォントのサイズや色を変更するための条件文を作成できます。
レスポンシブ対応コンポーネントは、モジュール式のレスポンシブ対応要素にコンポーネントを結合したものです。コンポーネントを使用する場合と同様に、ドキュメントの構成要素として使用できます。たとえば、Buttonは、異なる種類のすべてのデバイスで機能するボタンを表示し、さまざまなボタンの状態を自動的に処理します。
レスポンシブ対応テンプレートは、コンポーネントとレスポンシブ対応コンポーネントを組み合わせたもので、完全なviewportデザインを提供します。テンプレートには、背景、ヘッダー、コンテンツなどが含まれ、viewport全体に適用されます。たとえば、Text Listテンプレートでは、背景とヘッダーを含むテキスト項目のスクロールリストが表示されます。
レスポンシブ対応コンポーネントとテンプレートを使用して、簡単な手順でAPLドキュメントを作成し、さまざまなviewportに対応できるようにしましょう。以下に示すように、独自のレイアウトを一から作成するよりも、はるかに簡単です。
|
レスポンシブ対応コンポーネントを使用してボタンを作成する方法は、次のとおりです。
|
コンポーネントを使用してボタンを一から作成する方法は、次のとおりです。
|
|
レスポンシブ対応テンプレートを使用して全画面スクロールリストを作成する方法は、次のとおりです。
|
コンポーネントを使用して全画面スクロールリストを一から作成する方法は、次のとおりです。
|
alexa-layoutsパッケージを読み込む
レスポンシブ対応コンポーネントとテンプレートを使用するには、ドキュメントのパッケージのimport配列にalexa-layoutsパッケージを追加します。alexa-layoutsパッケージの最新バージョンは1.1.0です。
ドキュメントのimportsセクションの例は、次のとおりです。
{
"import": [
{
"name": "alexa-layouts",
"version": "1.1.0"
}
]
}
alexa-layoutsを読み込むと、自動的にalexa-stylesとalexa-viewport-profilesも読み込まれます。個別に読み込む必要はありません。
利用可能なレスポンシブ対応コンポーネントとテンプレート
利用可能な各コンポーネントまたはテンプレートについて詳しくは、以下のリンクを参照してください。
レスポンシブ対応コンポーネント：
- Background
- Button
- Divider
- Footer
- Header
- Image
- Ordinal
- Page Counter
- Text List Item
- Transport Controls
レスポンシブ対応テンプレート：
