ナビゲーションコンポーネント（v1）
ナビゲーションコンポーネントを使用すれば、グローバル化されたサイト構造を容易にナビゲートできます。
使用方法
ナビゲーションコンポーネントリストには、サイトのユーザーがサイト構造を容易にナビゲートできるように、ページのツリーが一覧表示されます。
ナビゲーションコンポーネントは、サイトのグローバル化されたサイト構造を自動的に検出し、ローカライズされたページに自動的に適応することができます。さらに、シャドウリダイレクトページを使用してメインコンテンツ構造以外の構造を表すことで、任意のサイト構造をサポートできます。
編集ダイアログでは、ナビゲーションルートページおよびナビゲーションの深さをコンテンツ作成者が定義できます。デザインダイアログでは、ナビゲーションルートおよび深さのデフォルト値をテンプレート作成者が定義できます。
バージョンと互換性
このドキュメントでは、2018年1月にコアコンポーネントのリリース 2.0.0 で導入されたナビゲーションコンポーネント v1 について説明します。
注意ローカライズされたサイト構造のサポート
Web サイトは、多くの場合、様々な地域向けに複数の言語で提供されています。通常、ローカライズされた各ページには、ページテンプレートの一部としてナビゲーション要素が含まれます。ナビゲーションコンポーネントは、サイトのあらゆるページのテンプレートに一度配置すれば、グローバル化されたサイト構造に基づいて、ローカライズされた個々のページに自動的に適応できます。
- ナビゲーションコンポーネントのローカライゼーション機能の仕組みの例については、以下のセクションを参照してください。
- コアコンポーネントのローカライゼーション機能の連携の例については、コアコンポーネントのローカライゼーション機能を参照してください。
例
コンテンツが次のような構造になっているとします。
/content
+-- wknd
+-- language-masters
+-- de
\-- experience
\-- arctic-surfing-in-lofoten
+-- en
\-- experience
\-- arctic-surfing-in-lofoten
+-- es
+-- fr
\-- it
+-- us
+-- en
\-- experience
\-- arctic-surfing-in-lofoten
\-- es
\-- ch
+-- de
\-- experience
\-- arctic-surfing-in-lofoten
+-- fr
\-- it
+-- wknd-events
\-- wknd-shop
サイト WKND では、ナビゲーションコンポーネントを、ヘッダーの一部としてページテンプレート上に配置するとよいでしょう。テンプレートの一部で、コンポーネントの ナビゲーションルート を /content/wknd/language-masters/en（そのサイトのマスターコンテンツが開始される場所）に設定できます。また、コンテンツツリー全体をコンポーネントに表示するのではなく、最初の 2 レベルを概要として表示したい場合は、ナビゲーション構造の深さ を 2 に設定するとよいでしょう。
ナビゲーションルート の値を通じて、ナビゲーションコンポーネントは、/content/wknd/language-masters/en の次からナビゲーションが開始されることを認識し、サイトの構造を（ナビゲーション構造の深さ の値で定義されているとおり）2 レベル下まで繰り返すことでナビゲーションオプションを生成できます。
ユーザーが閲覧しているローカライズ済みページによらず、ナビゲーションコンポーネントは、現在のページの場所を認識し、ルートまで戻ってから、対応するページまで進むことで、対応するローカライズ済みページを見つけることができます。
したがって、訪問者が /content/ch/de/experience/arctic-surfing-in-lofoten を閲覧している場合、コンポーネントは、/content/wknd/language-masters/de に基づいてナビゲーション構造を生成する必要があることを認識します。同様に、訪問者が /content/us/en/experience/arctic-surfing-in-lofoten を閲覧している場合、コンポーネントは、/content/wknd/language-masters/en に基づいてナビゲーション構造を生成する必要があることを認識します。
シャドウサイト構造のサポート
場合によっては、実際のサイト構造とは異なるナビゲーションメニューを訪問者向けに作成する必要があります。例えば、プロモーションの場合は、コンテンツリストを並べ替えて、メニュー内の特定のコンテンツを強調表示するかもしれません。シャドウページは他のコンテンツページにリダイレクトするだけですが、これを使用して、ナビゲーションコンポーネントは必要に応じて任意のナビゲーション構造を生成できます。
それには、以下の手順を実行します。
- 目的のサイト構造を表すシャドウページを、空のページとして作成します。これは、多くの場合、シャドウサイト構造と呼ばれます。
- これらのページのページプロパティで、実際のコンテンツページを指すように リダイレクト 値を設定します。
- シャドウページのページプロパティで、「ナビゲーション内で非表示にする」オプションを設定します。
- ナビゲーションコンポーネントの ナビゲーションルート 値を、新しいシャドウサイト構造のルートを指すように設定します。
この結果、ナビゲーションコンポーネントは、シャドウサイト構造に基づいてメニューをレンダリングします。コンポーネントによってレンダリングされるリンクは、シャドウページそのものではなく、シャドウページのリダイレクト先となる実際のコンテンツページを指しています。さらに、シャドウページに基づいたナビゲーションの場合でも、コンポーネントには実際のページの名前が表示されると共に、アクティブなページが正しく強調表示されます。ナビゲーションコンポーネントにより、事実上、シャドウページは訪問者に対して完全に透過的になります。
メモ メモナビゲーションでのリダイレクト
ページにリダイレクトターゲットがある場合（外部 URL を指しているか別の AEM ページを指しているかに関係なく）、そのターゲットへのリンクを含むナビゲーションコンポーネントは、リダイレクトターゲットの URL を直接示します。
例
- ページ B にリダイレクトするページ A を作成します。
https://aemcomponents.devにリダイレクトするページ C を作成する- ページ D で、ページ A とページ C を含むナビゲーションコンポーネントを挿入します。
- 生成された各リンクは、ページ B と
https://aemcomponents.devを直接指します。
コンポーネント出力のサンプル
ナビゲーションコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。
技術的詳細
ナビゲーションコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
メモ編集ダイアログ
編集ダイアログでは、ナビゲーションのルートページとナビゲーション構造の深さをコンテンツ作成者が定義できます。
「プロパティ」タブ
-
ナビゲーションルート - ルートページ（ナビゲーションツリーの生成に使用されます）。
-
ルートレベルの除外 - 多くの場合、ルートはナビゲーションに含める必要はありません。このオプションを使用すると、除外するルートから上のレベル数を指定できます。次に例を示します。
- 0 =ルートレベルを表示
- 1 =ルートレベルを除外
- 2 =ルートとさらに 1 つ上のレベルを除外
- 等。
-
すべての子ページを収集 - ナビゲーションルートの下位ノードであるすべてのページを収集します。
-
ナビゲーション構造の深さ - ナビゲーションツリーのルートを起点に表示する下位レベルの数を定義します（「すべての子ページを収集」が選択されていない場合のみ使用可能）。
-
シャドウイングを無効にする - 階層内のページがリダイレクトの場合、リダイレクト先のページの名前がターゲットの代わりに表示されます。詳細については、シャドウサイト構造のサポート を参照してください。
-
ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
- 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。
- ラベル - コンポーネントの ARIA ラベル属性の値
