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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
コアコンポーネント

作成対象：

開発者
管理者
ユーザー

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

使用方法 usage

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

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

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

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

このドキュメントでは、2018年1月にコアコンポーネントのリリース 2.0.0 で導入された言語ナビゲーションコンポーネント v1 について説明します。

CAUTION

このドキュメントでは、言語ナビゲーションコンポーネント v1 について説明します。

言語ナビゲーションコンポーネントの現在のバージョンについて詳しくは、言語ナビゲーションコンポーネントのドキュメントを参照してください。

コンポーネント出力のサンプル 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

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

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