Show Menu
TOPICS×

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

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

使用方法

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、およびデータレイヤーのトラッキングに影響を与える可能性があります。