サンプル コードのダウンロード (aspnettips_SiteMap.msi, 253 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

Webサイトのユーザビリティを向上させるために、ある程度の大きさのサイトになると、サイトマップ（トップページからの階層の位置を示す表示）を各ページに設置することが多いはずです。ただ、サイトマップは、これまで作り込むのも保守をするのも非常に煩雑でした。

ASP.NET 2.0 では、サイトマップ ファイルと SiteMapPath コントロールなどを使うことで、簡単にサイトマップを作成できます。また、サイトの構造をサイトマップ ファイル 1 つで管理できるので、保守も非常に簡単になりました。ここでは、このような ASP.NET 2.0 の新しい機能を使ったサイトマップの作成方法を紹介します。

次のようなサイトマップを作ってみます（図 1）。このページでは、SiteMapPath コントロール、Menu コントロール、TreeView コントロールを使って、サイトマップを実現しています。

今回は、次の手順でサイトマップのあるページを作成します。

1. サイトマップ ファイルを作成

2. サイトマップ ファイルの中身を記述

3. SiteMapPath コントロールを貼り付ける

4. Menu コントロールと TreeView コントロールを貼り付ける

5. 実行

(1) サイトマップ ファイルを作成

まず、サイトの階層構造を記述するサイトマップ ファイルを作成します。サイトマップ ファイルは、XML 形式です。<siteMap> 要素と <siteMapNode> 要素を使います。<siteMap> 要素は、ルート要素としてだけ使用し、各ページのタイトルや URL などの情報は、<siteMapNode> 要素に記載します。 実際にサイトマップ ファイルを作成してみます。Web サイトのプロジェクトを新規に作成した後、メニューバーから [新規作成] - [ファイル] を選択し、「新しい項目の追加」ダイアログボックスで [サイトマップ] を選択します（図 2）。ファイル名は、デフォルトの Web.sitemap にします。

(2) サイトマップ ファイルの中身を記述

サイトマップ ファイルの <siteMapNode> 要素に、各ページの URL、タイトル、概要を記述します。<siteMapNode> 要素は、階層的に記述できるので、<siteMapNode> と </siteMapNode> の間に別の <siteMapNode> 要素を記述することで、下の階層を定義できます。

今回は、Website.map を次のように記述します。

リスト1

(3) SiteMapPath コントロールを貼り付ける

今回作成する Web サイトの各ページを作成します。仮想フォルダの直下に「新しい項目の追加」ダイアログボックスを使って次の 3 つの Web ページ(aspx ファイル) を作成します。

product.aspx

support.aspx

keyboard.aspx

これらのほかに、最初に自動的に作られる Default.aspx があります。今回、各 aspx ファイルには、サイトマップを表示するためのコントロールを、まったく同じように配置します。

まず、Default.aspx ファイルに SiteMapPath コントロールを貼り付けます（図 3）。ここでは、フォーム上に直接「SiteMapPath コントロール」と記述し、その次の行に SiteMapPath コントロールを貼り付けました。

(4) 各 Web ページの中身を作成

同様に、Menu コントロールと TreeView コントロールも貼り付けます（図 4）。

Menu コントロールと TreeView コントロールの場合、それぞれデータソースを選択する必要があります。Menu コントロールの場合、「Menu タスク」メニューを表示し、「データ ソースの選択」項目で「SiteMapDataSource1」を選択してください（図 5）。

TreeView コントロールの場合も同様にデータソースを設定してください。

Default.aspx 以外のページ（product.aspx、support.aspx、keyboard.aspx）にも、同じように SiteMapPath コントロール、Menu コントロール、TreeView コントロールを貼り付け、データソースを設定します。Default.aspx の内容をそのままコピー・ペーストしてもかまいません。

(5) 実行

実行してみます。Menu コントロールと TreeView コントロールを使って、作成した各ページを表示させることができます。また、SiteMapPath コントロールに、現在のページのタイトルが表示されていると思います（図 6）。

今回は、各ページにサイトマップを貼り付けましたが、マスターページにサイトマップを貼り付けるようにすればさらに便利です。

以上のように、ASP.NET 2.0 を使えば簡単にサイトマップを作成できます。ぜひ活用してみてください。

ページのトップへ