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



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

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.1.0です。

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

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

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

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

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

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

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