レスポンシブ対応コンポーネントとテンプレートでの右から左に記述する言語のサポート

レスポンシブ対応コンポーネントとテンプレートでの右から左に記述する言語のサポート

レスポンシブ対応コンポーネントとテンプレートを使用すると、アラビア語などの右から左に記述する言語のコンテンツを表示できます。

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

レスポンシブ対応コンポーネントとテンプレートは、左から右と右から左のどちらの読み取り方向でもコンテンツを表示できます。

たとえば、AlexaHeaderコンポーネントは、オプションの戻るボタン、ヘッダータイトルテキスト、アトリビューションテキストまたはアトリビューションアイコンを表示します。次の画像は、左から右と右から左の読み取り方向の違いを示しています。

左から右の方向では、戻るボタンとヘッダータイトルテキストが左側に表示され、アトリビューションテキスト／画像が右側に表示される
右から左の方向では、戻るボタンとヘッダータイトルテキストが右側に表示され、アトリビューションテキスト／画像が左側に表示される

テキストを表示しないコンポーネントもありますが、その場合でも、ユーザーは読み取り方向に従ってコンテンツを読んで操作します。たとえば、AlexaProgressBarは、進行中のアクティビティや進行状況を示すバーを表示します。左から右の場合、バーは左から始まり、右に移動して完了します。右から左の場合、バーは右から始まり、左に移動します。

次の画像は、進行状況バーが、左から右と右から左のそれぞれの方向でどのように表示されるかを示しています。どちらのバージョンのバーも、合計時間2分、経過時間1分を表しています。

同じ進行状況バーを左から右と右から左の方向で表示した例

AlexaBackgroundやAlexaCheckboxなど、読み取り方向に応じたコンテンツの表示を行わないコンポーネントでは、右から左のレイアウト方向はサポートされません。

コンポーネントとテンプレートでの言語固有のフォント

一部のデバイスには、言語固有のフォントが搭載されています。たとえば、デバイスがアラビア語バージョンの標準フォントをサポートしている場合があります。テキストを表示するレスポンシブ対応コンポーネントとテンプレートでは、このようなフォントがサポートされます。

次の画像は、AlexaButtonコンポーネントとAlexaFooterコンポーネントで、デフォルトのフォントとアラビア語固有のフォントを使用した例を示しています。

AlexaButtonとAlexaFooterでデフォルトのフォントと左から右のレイアウトを使用した例
AlexaButtonとAlexaFooterでアラビア語固有のフォントと右から左のレイアウトを使用した例

レイアウト方向と言語を設定する

レイアウト方向と言語を設定するには、layoutDirectionプロパティとlangプロパティを使用します。layoutDirectionプロパティには、LTRまたはRTLという値を指定できます。langプロパティには、標準のロケールコードを指定できます。たとえば、アラビア語固有のフォントを使用するには、langにar-SAを設定します。

これらのプロパティは、作成するレイアウトに応じて、ドキュメント内のさまざまな場所に設定できます。

  • ドキュメント全体に適用されるデフォルトのlayoutDirectionプロパティとlangプロパティを設定するには、ドキュメントレベルのenvironmentプロパティを使用します。レスポンシブ対応コンポーネントとテンプレートでは、デフォルトでドキュメントレベルのプロパティが使用されます。ドキュメント全体に対する値を1か所で設定できるため、この方法が推奨されます。
  • 個々のコンポーネントでドキュメントレベルの設定をオーバーライドする必要がある場合は、個々のコンポーネントまたはその親コンテナーのlayoutDirectionプロパティを設定します。
    • layoutDirectionプロパティは、右から左に記述するコンテンツをサポートするコンポーネントごとに設定できます。
    • langプロパティは、テキストを表示するコンポーネントごとに設定できます。

    レスポンシブ対応コンポーネントによっては、親コンポーネントからlayoutDirectionを継承できるものがあります。たとえば、Containerにプロパティを設定すると、そのContainer内に配置したレスポンシブ対応コンポーネントにlayoutDirection値が継承されます。特定のレスポンシブ対応コンポーネントがlayoutDirectionを継承できるかどうかを確認するには、そのコンポーネントのドキュメントを参照してください。

layoutDirectionプロパティとlangプロパティは常に、データバインディングを使用してデータソースの値を参照するようにします。スキルでRenderDocumentディレクティブと一緒に送信するデータソースを構築するときに、データソースのこれらのプロパティを、リクエストで指定されたlocaleに基づいて設定します。この方法により、左から右と右から左に記述する両方のコンテンツで同じAPLドキュメントを使用できます。

ドキュメント全体のレイアウト方向と言語を設定するには

  1. ドキュメントで、トップレベルにenvironmentプロパティを追加します。

     {
     "type": "APL",
     "version": "2024.3",
     "environment": {}
 }

  2. environment.layoutDirectionとenvironment.langの各プロパティを、データソース内のプロパティにバインドします。

     {
     "type": "APL",
     "version": "2024.3",
     "environment": {
         "layoutDirection": "${bindExample.requestLanguage.layoutDirection}",
         "lang": "${bindExample.requestLanguage.lang}"
     }
 }

  3. environment.parametersプロパティに、データソースへの参照を追加します。

    次の例では、ドキュメントレベルのenvironmentのプロパティを、bindExampleというデータソース内の値にバインドします。

     {
     "type": "APL",
     "version": "2024.3",
     "environment": {
         "layoutDirection": "${bindExample.requestLanguage.layoutDirection}",
         "lang": "${bindExample.requestLanguage.lang}",
         "parameters": [
             "bindExample"
         ]
     }
 }

  4. mainTemplateのparametersプロパティに、同じデータソース名を追加します。

     {
     "mainTemplate": {
         "parameters": [
             "bindExample"
         ],
         "items": []
     }
 }
  5. mainTemplateのitems配列に、レスポンシブ対応コンポーネントまたはテンプレートを追加します。これらのコンポーネントでは、デフォルトでenvironment.layoutDirectionとenvironment.langに設定された値が自動的に使用されます。

  6. スキルで、ユーザーのリクエストのロケールに基づいて、レイアウト方向と言語を反映するようにデータソースのプロパティを設定します。

    次の例は、アラビア語のコンテンツ用にレイアウト方向と言語を設定するデータソースの一部です。スキルコードは、ユーザーのロケールに基づいてbindExample.requestLanguage.layoutDirectionとbindExample.requestLanguage.langを設定します。

     {
     "bindExample": {
         "requestLanguage": {
             "layoutDirection": "RTL",
             "lang": "ar-SA"
         },
         "properties": {
             // ドキュメントに表示するコンテンツのプロパティ
         }
     }
 }

以下は、複数のレスポンシブ対応コンポーネントとプリミティブなTextコンポーネントを表示するAPLドキュメントの例です。すべてのコンポーネントは、bindExampleデータソースのプロパティに応じて左から右または右から左の方向に表示されます。

次の画像は、このドキュメントを左から右と右から左の両方の方向で評した結果を示しています。

layoutDirectionが「LTR」でlangが「en-US」の場合の結果
layoutDirectionが「RTL」でlangが「ar-SA」の場合の結果

このプロセスは、レスポンシブ対応テンプレートでも同じように動作します。レスポンシブ対応テンプレートは、ビューポート全体に表示される完全なビューポートデザインを提供します。テンプレートは通常、ほかのコンポーネントとは組み合わせません。

以下は、AlexaHeadlineテンプレートと2つのデータソースを使用するドキュメントの例です。データソースの1つは英語のコンテンツで、もう1つはアラビア語のコンテンツです。layoutDirectionとlangに使用する値はデータソースで指定されるため、AlexaHeadlineテンプレートは自動的に調整されます。

次の画像は、英語とアラビア語の両方の例の結果を示しています。

layoutDirectionが「LTR」でlangが「en-US」の場合のAlexaHeadlineテンプレート
layoutDirectionが「RTL」でlangが「ar-SA」の場合のAlexaHeadlineテンプレート

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

次のレスポンシブ対応コンポーネントは、左から右にも右から左にも表示できます。

次のレスポンシブ対応テンプレートは、左から右にも右から左にも表示できます。

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

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