Show Menu
トピック×

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

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

使用方法

Web サイトは、多くの場合、様々な地域向けに複数の言語で提供されています。言語ナビゲーションコンポーネントを使用すれば、訪問者は同じページを異なる言語とロケールで表示できます。そのため、Web サイトのドイツ語(スイス)バージョンの閲覧者の場合、同じページの英語(米国)バージョンに簡単に切り替えることができます。言語ナビゲーションコンポーネントは、サイトの言語構造の認識を処理し、対応するページを自動的に見つけます。
編集ダイアログ では、グローバルサイトナビゲーションのルートのほか、構造のナビゲーションの深さを定義できます。 デザインダイアログ では、同じオプションのデフォルト値をテンプレート作成者が設定できます。

バージョンと互換性

このドキュメントでは、言語ナビゲーションコンポーネントの現在のバージョン(2018 年 1 月にコアコンポーネントのリリース 2.0.0 で導入された v1)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v1
互換性あり
互換性あり
互換性あり
コアコンポーネントのバージョンとリリースについて詳しくは、 コアコンポーネントのバージョン を参照してください。

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

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

技術的詳細

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

デザインダイアログ

編集ダイアログでは、グローバルサイトナビゲーションのルートのほか、構造のナビゲーションの深さを定義できます。
通常、これらの設定は、ページテンプレートレベルでのみおこなう必要があります。ただし、 編集ダイアログ を使用してページレベルで変更できます。

「プロパティ」タブ

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

コンテンツが次のような構造になっているとします。
/content
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   \-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

サイト WKNDl では、言語ナビゲーションコンポーネントを、ヘッダーの一部としてページテンプレート上に配置するとよいでしょう。テンプレートの一部で、コンポーネントの​ ナビゲーションルート ​を /content/wknd (そのサイトのローカライズされたコンテンツが開始される場所)に設定できます。また、「 言語構造の深さ 」を(構造が国と言語の 2 レベルなので)「 2 」に設定します。
言語コンポーネントは、 ナビゲーションルート ​値によって、 /content/wknd の後にナビゲーションが開始されることを把握します。また、コンテンツツリーの次の 2 レベルを( 言語構造の深さ ​の値で定義されたように)サイトの言語ナビゲーション構造として認識することで、言語ナビゲーションオプションを生成できます。
ユーザーがどのページを閲覧していたとしても、言語ナビゲーションコンポーネントで現在のページの場所を把握し、一旦ルートに戻ってから、対応するページに進むことで、別の言語の対応するページを見つけることができます。

「スタイル」タブ

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

編集ダイアログ

通常、言語ナビゲーションコンポーネントは、サイトのページテンプレートに対してのみ追加し、設定される必要があります。ただし、言語ナビゲーションコンポーネントを個別のコンテンツページに追加する必要がある場合、編集ダイアログを使用すると、コンテンツ作成者は デザインダイアログ で説明したのと同じ値を設定できます。
また、 ID を設定することもできます。このオプションを使用すると、HTML 内および データレイヤー 内のコンポーネントの一意の識別子を制御できます。
  • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
  • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
  • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。