2-4-7. ナビゲーションメニューを管理する

最終更新日: 2021.04.09

階層は、ナビゲーションメニューや関連商品、コレクションなど、コンテンツを構成する上で多くの用途があります。この概要では、Kentico Kontentプロジェクトで階層を管理する3つの異なる方法を説明し、それぞれの適切な使用例を説明します。階層構造を構築するための最良の方法はなく、常にプロジェクトの特定の要件を考慮する必要があります。一般的には、コンテンツ提供者にどの程度のコントロールを与えたいかを反映したアプローチをとるべきです。ここでは、ナビゲーションメニューを例にして説明します。

A) ハードコードされたナビゲーション

この方法では、ナビゲーションのどの部分もKentico Kontentでモデル化されておらず、すべてコードの中にあります。例として、弊社のサンプルアプリケーションをご覧ください。

この方法は、静的なメニューを持つ小規模なプロジェクトで、コントリビューターにナビゲーションの変更をさせたくない場合に適しています。最初は早くて簡単ですが、その後の変更はすべて開発者が行う必要があります。

B) 暗黙のうちに生成されるナビゲーション（ハイブリッドなアプローチ）

このアプローチでは、ナビゲーションの一部がハードコードされ、別の一部がプロジェクトのコンテンツに基づいて生成されます。Kentico Kontent内でメニューを明示的にモデル化することはありません。

このアプローチは、ナビゲーションの基本構造は静的だが、新しいコンテンツが追加されるとナビゲーションの一部が頻繁に変更されるようなプロジェクトに適しています。

以下に簡単な例を示します。あなたのアプリには、Articlesメニューアイテムを含むハードコードされたメニューがあります。記事」のサブアイテムは、プロジェクト内のArticleコンテンツタイプのコンテンツアイテムに基づいて生成することができます。

あなたに合うのはどの醸造？
ローストについて
アラビカブルボンの起源

ここでは、あなたのプロジェクトにすでにいくつかの記事が含まれていると仮定して、その方法を説明します。

1. すべての記事の名前とURLスラッグを取得します。

Delivery APIのプロジェクション機能を使って、プロジェクトに含まれるすべての記事のタイトルとURLのみを取得します。

// Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript
const KontentDelivery = require('@kentico/kontent-delivery');

const deliveryClient = new KontentDelivery.DeliveryClient({
  projectId: '975bf280-fd91-488c-994c-2f04416e5ee3',
  typeResolvers: [
    // Create strongly typed models according to https://docs.kontent.ai/strongly-typed-models
    new KontentDelivery.TypeResolver('article', (rawData) => new Article())
  ]
});

deliveryClient.items()
  .type('article')
  .elementsParameter(['title', 'url_pattern'])
  .toObservable()
  .subscribe(response => console.log(response));

分類法ドリブンのナビゲーションでは、特定の分類法タームでタグ付けされたアイテムを検索することができます。

2. 取得したデータをリンクとしてメニューに表示する

コンテンツ担当者が記事を書いて公開すれば、メニューは自動的に更新されます。これは、コンテンツ担当者が手動でナビゲーションを変更する必要がないため、作業量とミスの可能性が少なくなることを意味します。構造的な変更は、開発者が実装する必要があります。

C) 明示的にモデル化されたナビゲーション

この方法では、特別なコンテンツアイテムを使って、ナビゲーションをKentico Kontentから完全に管理します。それぞれのコンテンツアイテムは、ナビゲーションのメニューアイテムを表し、それらの関係はリンクされたアイテム要素を使って定義されます。

Web Spotlightでのナビゲーション

Web Spotlightを使ってウェブサイトのコンテンツを管理する場合、サブページ要素を使って関係を定義します。

この方法は最も柔軟性が高く、開発者がいなくてもコンテンツ担当者がナビゲーションメニューを管理できるようになります。しかし、この方法を導入するには、プロジェクトやアプリケーション内での設定が必要です。ここでは、簡単なステップ・バイ・ステップの例をご紹介します。

1. Navigation itemコンテンツタイプの作成

新しいコンテンツタイプを作成するには、アプリメニューのContent modelを選択し、Create newをクリックします。

コンテンツタイプ名にNavigation itemと入力します。少なくとも以下の要素を追加する。

タイトル：テキスト要素。
Url：URL スラッグ要素。
Subitems：子メニューアイテムを保持するためのSubitems linked items要素。

リダイレクトURLなど、必要に応じてさらに要素を追加することもできます。

2. ナビゲーションアイテムの作成

新しいコンテンツアイテムを作成するには、アプリメニューのContent & assetsを選択し、Create newをクリックします。作成したら、個々のアイテムをメニューに追加します。Subitems linked items要素を使用して、アイテムをコンテンツツリーにリンクさせます。リンクされたアイテムと一緒にナビゲーションアイテムを公開します。

3. 第一階層のナビゲーションアイテムの定義

メニューの第一階層に表示するナビゲーションアイテムを選び、別のアイテムの中にまとめます。

ナビゲーションアイテムをもうひとつ作成します。
Content item nameにRoot navigation itemと入力します。
そのSubitems要素に、第1レベルのナビゲーションアイテムを入力します。

次のステップでは、このアイテムをDelivery APIでリクエストし、メニューを生成します。

注：ここではSubitems要素のみが重要で、TitleやUlrの値は関係ありません。必ずしもNavigationアイテムを使用する必要はありません。リンクされたアイテム要素を持つあらゆるコンテンツタイプのアイテムを使用して、ナビゲーションアイテムを格納することができます。

4. デリバリーAPIでナビゲーションアイテムを取得する

ルートのナビゲーションアイテムをDelivery APIでリクエストする際に、depthパラメータを指定すると、複数のレベルのリンクアイテムを取得することができます。

// Tip: Find more about JS/TS SDKs at https://docs.kontent.ai/javascript
const KontentDelivery = require('@kentico/kontent-delivery');

const deliveryClient = new KontentDelivery.DeliveryClient({
  projectId: '8d20758c-d74c-4f59-ae04-ee928c0816b7',
  typeResolvers: [
    // Create strongly typed models according to https://docs.kontent.ai/strongly-typed-models
    new KontentDelivery.TypeResolver('navigation_item', (rawData) => new NavigationItem)
  ]
});

deliveryClient.item('root_navigation_item')
  .depthParameter(5)
  .toObservable()
  .subscribe(response => console.log(response.item));

5. メニューの作成

取得したデータを使って、リンクのネストしたリストを構築します。

リンクされたアイテムのコンテンツが、レスポンスのmodular_contentプロパティ内にあることに注目してください。

これで完成です。これで、Kentico Kontentから完全に管理できるダイナミックメニューができあがりました。この方法のより複雑な例は、私たちのブログでご覧いただけます。

実例

MVC.NETアプリケーションでナビゲーションを管理し、レンダリングする方法については、Managing Navigation Menus in Kentico Kontentをご覧ください。

(オプション)sitemap.xmlの作成

アプリケーションのダイナミックメニューを生成するのと同様に、Kentico Kontentでモデル化されたナビゲーションを使用して、ウェブサイトのsitemap.xmlファイルを生成することができます。サイトマップは、リンクされたコンテンツアイテムやタクソノミーを使ってモデル化することもできます。

まとめ

このチュートリアルでは、Kentico Kontentプロジェクトでナビゲーションを管理する3つの異なる方法について学びました。初期開発のスピード（アプローチA）、低メンテナンスコスト（アプローチB）、柔軟性とコンテンツ提供者の権限（アプローチC）など、優先順位に合わせて選択することができます。

それぞれのアプローチはトレードオフの関係にありますが、それらを組み合わせて、最も効率的な方法で、ナビゲーションの各部分を別々に管理することもできます。

次のステップ

スタックオーバーフローの開発者コミュニティで、ナビゲーションメニュー構築のための独自のアプローチについて議論しましょう。
ブログの開発セクションでは、Kentico Kontentを使った先進的な例や、より多くのインスピレーションを得ることができます。
あなたの技術のための開発リソースを見てみましょう。
ウェブサイトのサイトマップを作成して、SEOとアクセシビリティを向上させましょう。

原文：https://docs.kontent.ai/tutorials/write-and-collaborate/structure-your-content/manage-navigation-menus

Document