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

Last update: Mon Sep 19 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
Core Components

作成対象：

Developer
Admin
User

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

使用方法 usage

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

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

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

バージョンと互換性 version-and-compatibility

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

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

コンポーネントのバージョン

AEM 6.4

AEM 6.5

AEM as a Cloud Service

互換性あり

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

コンポーネント出力のサンプル sample-component-output

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

技術的詳細 technical-details

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

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

デザインダイアログ design-dialog

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

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

「プロパティ」タブ properties-tab

言語ナビゲーションコンポーネントのデザインダイアログ

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

例 example

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

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

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

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

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

「スタイル」タブ styles-tab

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

編集ダイアログ edit-dialog

「プロパティ」タブ properties-tab-edit

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

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