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



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

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

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

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

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

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

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

レスポンシブ対応コンポーネントを使用してボタンを作成する方法は、次のとおりです。

  1. ドキュメントにAlexaButtonを追加します。
  2. AlexaButtonのプロパティで、ボタンテキストと、ユーザーがボタンを押した際に実行するアクションを設定します。

コンポーネントを使用してボタンを一から作成する方法は、次のとおりです。

  1. 以下のコンポーネントをカスタムレイアウトとして統合します。
    • Frame
    • Text
    • TouchWrapper
  2. 各コンポーネントに関連プロパティを設定します。
  3. 処理するコンポーネントとスタイルの条件を定義します。
    • さまざまなviewportのサイズと形状
    • さまざまなボタンの状態（押された、押されていない、無効など）に応じた外観

レスポンシブ対応テンプレートを使用して全画面スクロールリストを作成する方法は、次のとおりです。

  1. ドキュメントにAlexaTextListを追加します。
  2. AlexaTextListのプロパティで、背景画像／背景色、ヘッダーテキスト、ユーザーが項目を選択した際に実行するアクション、表示する項目の配列を設定します。

コンポーネントを使用して全画面スクロールリストを一から作成する方法は、次のとおりです。

  1. 以下のコンポーネントをカスタムレイアウトとして統合します。
    • 上部にタイトルを表示するTextコンポーネント
    • 小さなviewportの上部にアイコンを表示するImageコンポーネント
    • 背景を作成するImageまたはFrame
    • スクロールリストを作成するSequence
    • 各項目の番号を表示するText
    • 各項目のテキストを表示するText
    • リスト項目を選択できるように設定するTouchWrapper
  2. 各コンポーネントに関連プロパティを設定します。
  3. さまざまなviewportのサイズと形状に対応できるように、コンポーネントとスタイルの条件を定義します。

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

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

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

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

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

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

利用可能な各コンポーネントまたはテンプレートについて詳しくは、以下のリンクを参照してください。

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

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

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

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

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

BodyTemplate1

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

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

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

BodyTemplate2

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

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

BodyTemplate3

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

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

BodyTemplate6

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

BodyTemplate7

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

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

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

ListTemplate1

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

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

ListTemplate2

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

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

画像

一部の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」プロパティを使って画像の外観をさらに調整します。