ナビゲーションコンポーネント （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 に基づいてナビゲーション構造を生成する必要があることを認識します。

シャドウサイト構造のサポート

場合によっては、実際のサイト構造とは異なるナビゲーションメニューを訪問者向けに作成する必要があります。例えば、プロモーションの場合は、コンテンツリストを並べ替えて、メニュー内の特定のコンテンツを強調表示するかもしれません。シャドウページは他のコンテンツページにリダイレクトするだけですが、これを使用して、ナビゲーションコンポーネントは必要に応じて任意のナビゲーション構造を生成できます。

それには、以下の手順を実行します。

1. 目的のサイト構造を表すシャドウページを、空のページとして作成します。これは、多くの場合、シャドウサイト構造と呼ばれます。
2. これらのページのページプロパティで、実際のコンテンツページを指すように​リダイレクト​値を設定します。
3. シャドウページのページプロパティで、「ナビゲーション内で非表示にする」オプションを設定します。
4. ナビゲーションコンポーネントの​ナビゲーションルート​値を、新しいシャドウサイト構造のルートを指すように設定します。

この結果、ナビゲーションコンポーネントは、シャドウサイト構造に基づいてメニューをレンダリングします。コンポーネントによってレンダリングされるリンクは、シャドウページそのものではなく、シャドウページのリダイレクト先となる実際のコンテンツページを指しています。さらに、シャドウページに基づいたナビゲーションの場合でも、コンポーネントには実際のページの名前が表示されると共に、アクティブなページが正しく強調表示されます。ナビゲーションコンポーネントにより、事実上、シャドウページは訪問者に対して完全に透過的になります。

ナビゲーションでのリダイレクト

ページにリダイレクトターゲットがある場合（外部 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 アクセシビリティ」ラベルの値を設定できます。

• ラベル - コンポーネントの ARIA ラベル属性の値

デザインダイアログ

デザインダイアログでは、コンテンツ作成者に表示されるナビゲーションルートページおよびナビゲーションの深さのデフォルト値をテンプレート作成者が設定できます。

「プロパティ」タブ

• ナビゲーションルート - ナビゲーション構造のルートページのデフォルト値（ナビゲーションツリーの生成に使用され、コンテンツ作成者がこのコンポーネントをページに追加したときにデフォルトとして使用されます）。
• ルートレベルの除外 - 多くの場合、ルートはナビゲーションに含める必要はありません。このオプションを使用すると、除外するルートから上のレベル数のデフォルトを指定できます。次に例を示します。
  • 0 =ルートレベルを表示
  • 1 =ルートレベルを除外
  • 2 =ルートとさらに 1 つ上のレベルを除外
  • 等。
• すべての子ページを収集 - ナビゲーションルートの下位ノードであるすべてのページを収集するオプションのデフォルト値。
• ナビゲーション構造の深さ - ナビゲーション構造の深さのデフォルト値。
• シャドウイングを無効にする - ナビゲーションコンポーネントの追加時にシャドウを無効にする必要がある場合のデフォルト値です。

「スタイル」タブ

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

Adobe Client Data Layer

ナビゲーションコンポーネントは、Adobe Client Data Layer をサポートしています。

Business.Adobe.com リソース