言語ナビゲーションコンポーネント

言語ナビゲーションコンポーネントは、サイトに言語と国を指定するナビゲーション機能を提供し、訪問者が同じページを異なるロケールでナビゲートできるようにします。

使用方法

Web サイトは、多くの場合、様々な地域向けに複数の言語で提供されています。言語ナビゲーションコンポーネントを使用すれば、訪問者は同じページを異なる言語とロケールで表示できます。そのため、Web サイトのドイツ語（スイス）バージョンの閲覧者の場合、同じページの英語（米国）バージョンに簡単に切り替えることができます。言語ナビゲーションコンポーネントは、サイトの言語構造の認識を処理し、対応するページを自動的に見つけます。

• 言語ナビゲーションコンポーネントのローカライゼーション機能の仕組みの例については、以下のセクションを参照してください。
• 他のコアコンポーネントのローカライゼーション機能の連携の例については、コアコンポーネントのローカライゼーション機能ページを参照してください。

編集ダイアログでは、グローバルサイトナビゲーションのルートのほか、構造のナビゲーションの深さを定義できます。デザインダイアログでは、同じオプションのデフォルト値をテンプレート作成者が設定できます。

バージョンと互換性

このドキュメントでは、言語ナビゲーションコンポーネントの現在のバージョン（2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v2）について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

コンポーネント出力のサンプル

言語ナビゲーションコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細

言語ナビゲーションコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

デザインダイアログ

デザインダイアログでは、グローバルサイトナビゲーションのルートのほか、構造に対するナビゲーションの深さを定義できます。

通常、これらの設定は、ページテンプレートレベルでのみおこなう必要があります。これらは、編集ダイアログを使用してページレベルで変更できます。

「プロパティ」タブ

• ナビゲーションルート
  • サイトの言語ナビゲーションを開始する場所。
  • サイトの言語構造は、このルート配下の次のレベルで開始する。
• 言語構造の深さ
  • これは、サイトの言語構造を表す​ナビゲーションルート​配下のコンテンツツリーのレベルの数です。例：
    • 1 は、通常、言語の選択肢のみがあることを示します。
    • 2 は、通常、言語と国の選択肢があることを示します。
    • 3 は、通常、言語、国、地域の選択肢があることを示します。

例

コンテンツが次のような構造になっているとします。

/content
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   \-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

サイト WKND では、言語ナビゲーションコンポーネントを、ヘッダーの一部としてページテンプレート上に配置するとよいでしょう。テンプレートの一部で、コンポーネントの​ナビゲーションルート​を /content/wknd（そのサイトのローカライズされたコンテンツが開始される場所）に設定できます。また、「言語構造の深さ」を（構造が国と言語の 2 レベルなので）「2」に設定します。

言語コンポーネントは、ナビゲーションルート​値によって、/content/wknd の後にナビゲーションが開始されることを把握します。また、コンテンツツリーの次の 2 レベルを（言語構造の深さ​の値で定義されたように）サイトの言語ナビゲーション構造として認識することで、言語ナビゲーションオプションを生成できます。

ユーザーがどのページを閲覧していたとしても、言語ナビゲーションコンポーネントで現在のページの場所を把握し、一旦ルートに戻ってから、対応するページに進むことで、別の言語の対応するページを見つけることができます。

「スタイル」タブ

言語ナビゲーションコンポーネントでは、AEM スタイルシステムをサポートしています。

編集ダイアログ

「プロパティ」タブ

通常、言語ナビゲーションコンポーネントは、サイトのページテンプレートに対してのみ追加し、設定される必要があります。ただし、言語ナビゲーションコンポーネントを個別のコンテンツページに追加する必要がある場合は、編集ダイアログを使用すると、デザインダイアログの節で説明したのと同じ値をコンテンツ作成者が設定できます。

また、ID を設定することもできます。このオプションを使用すると、HTML 内および データレイヤー内のコンポーネントの一意の識別子を制御できます。

• 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
• ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
• ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「アクセシビリティ」タブ

• ラベル - コンポーネントの aria label 属性を設定する言語ナビゲーションがページ上に複数ある場合は、このオプションを定義する必要があります。

「スタイル」タブ

言語ナビゲーションコンポーネントでは、AEM スタイルシステムをサポートしています。

ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。

ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。

Adobe Client Data Layer

言語ナビゲーションコンポーネントは、Adobe Client Data Layer をサポートしています。

Business.Adobe.com リソース