APLテンプレートをレスポンシブ対応にする

APLテンプレートをレスポンシブ対応にする

レスポンシブ対応とは、APLテンプレートがさまざまな画面特性のニーズに合わせて外観や機能的動作を調整できることを意味します。これらの特性には、ディスプレイの寸法や形状、デバイスのモードや向きが含まれます。ビジュアルUIをデザインする際にこれらの設定の組み合わせをすべて考慮する必要がないように、APLではViewportプロファイルを導入しています。Viewportプロファイルとその使用方法の詳細については、APL技術資料ページのViewportプロファイルを参照してください。

Amazonでは既に、レスポンシブ対応APLドキュメントの作成と、APLデザインでさまざまなタイプのデバイスをサポートする方法に関するベストプラクティスガイダンスを提供しています。さらに、APL向けAlexaデザインシステムには、レスポンシブ対応デザインを実装するために役立つ開発リソースが用意されています。Amazonが提供するalexa-layoutsパッケージには、個々のAPLテンプレートに追加してカスタマイズできるプリビルドのレスポンシブ対応コンポーネントとテンプレートが含まれており、常に拡張が続けられています。これらを使用することで、レスポンシブ対応のデザインを最初から実現できます。

UI要素をカスタマイズする必要がある場合、Amazon提供のalexa-layoutsパッケージに含まれるプリビルドのレスポンシブ対応コンポーネントとテンプレートだけですべてをカバーすることはできません。独自のレスポンシブ対応APLコンポーネントを作成する必要がある場合は、次のベストプラクティスを検討してください。

  • 特定のViewport特性に個別に対処する必要がある場合を除き、APL Viewportプロファイルを十分に理解し、できる限り使用します。たとえば、Viewportのサイズを絶対ディメンションで確認するロジックは記述しないでください。代わりに、@hubLandscapeMediumなどの特定のViewportプロファイルを確認するロジックを記述します。
  • alexa-stylesパッケージに含まれるAlexaスタイルとリソースの理解を深めます。標準のカラーテーマやフォントテーマ、レスポンシブ対応リソースのディメンションなどが提供され、独自のレスポンシブ対応APLレイアウトコンポーネントの作成に使用できます。これらの定義済みのリソースとスタイルを使用すると、UIのディメンションや色などに関するAmazonのベストプラクティスに従いながら、さまざまなデバイスで一貫した視覚エクスペリエンスを作成できます。
  • レスポンシブ対応コンポーネントとテンプレートの概要を学び、さまざまなViewport設定で動作と外観の変化を確認します。実際、alexa-layoutsパッケージに含まれるすべてのコンポーネントとテンプレートは、alexa-stylesパッケージの定義済みのスタイルとリソースを使用し、APL向けAlexaデザインシステムおよびマルチモーダルデザイン： はじめに（英語のみ）のUXデザインガイドで説明されているデザインのベストプラクティスを適用しています。
  • APL技術資料の画面上にコンテンツを表示するを読んで、最も一般的なデザイン作業や課題を解決するための実践的な知識を習得します。このドキュメントには、APLコンポーネントをレスポンシブ対応にするために役立つヒントも掲載されています。たとえば、円形の画面ではAPL Textコンポーネントにパディングを追加することを検討します。
  • 特定のViewport特性に依存する一連のスタイル設定可能コンポーネントプロパティを動的に変更するには、APL Stylesを使用し、スタイルの定義と評価の機能をベストプラクティスとして活用します。
  • 特定のViewport特性に基づいて条件付きで定義されたAPLリソースブロックを使用します。APLリソースを使用することで、Viewport固有のディメンション、色、文字列、数値、イージング関数などをAPLコンポーネントのプロパティに動的に適用できます。
  • APLテンプレートのレイアウトをより根本的に変更するには、APLコンポーネントの条件付きインフレートの使用を検討します。条件付きインフレートを使用すると、APLコンポーネントを効率的に含めたり除外したりできます。
  • 詳細については、テンプレートを効率的にローカライズするを参照してください。ここで紹介されている概念のほとんどは、レスポンシブ対応テンプレートの作成にも適用できます。技術的には、変化するViewport特性に適応するように動的コンポーネントを作成することは、ローカライゼーションに対応することと似ています。どちらの場合も、環境設定の変化に応じて視覚デザインや機能的な動作が変わる可能性があります。
  • レスポンシブ対応デザインの先を考えます。一部のデバイスには、Fire TVのリモコンなど、異なる入力モダリティが用意されています。カーソルやリモコンを使用したビジュアルUIの操作は、タッチを使用する場合とは異なるため、APLテンプレートに機能的な変更を加える必要があります。たとえば、カーソルやリモコンによる操作では、UI要素のフォーカス状態やホバー状態を視覚化することが重要です。APL Stylesを使用したコンポーネントの状態制御、キーボードイベントとハンドラー、ジェスチャー制御を十分に理解して、ユーザーインターフェースが持つ特定の機能上のニーズと、それらに適切な方法で対処する方法を習得してください。

このページは役に立ちましたか？

最終更新日: 2025 年 12 月 02 日