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



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

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

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

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

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

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

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

レスポンシブ対応コンポーネント/テンプレートを使用する APLプリミティブコンポーネントからカスタムレイアウトを構築する

Button

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

Button

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

全画面スクロールリスト

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

全画面スクロールリスト

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

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

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

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

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

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

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

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

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

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

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

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

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

レスポンシブ対応コンポーネントとテンプレートは、alexa-viewport-profilesパッケージで使用可能な次のビューポートプロファイルをサポートします。

  • @hubRoundSmall
  • @hubLandscapeSmall
  • @hubLandscapeMedium
  • @hubLandscapeLarge
  • @hubLandscapeXLarge
  • @hubPortraitMedium
  • @tvLandscapeXLarge

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

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

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