C# Programming

サイトマップ(ASP.NET 2.0 Beta)

開発環境： Visual Studio 2005　

１．目次

１．目次
 ２．目的
 ３．参考書
 ４．サイトマップ
 ５．Web.sitemapの作成
 ６．SiteMapPath
７．Menu
８．Web.sitemap with TreeView
９．その他のコントロールとサイトマップ

２．目的

Visual Studio 2005 Beta 1 Refresh with Team System に基づく情報で、自分のためのメモです。

３．参考書

（１） Visual Studio 2005 Online Help

４．サイトマップ

ASP.NET 2.0では、Web.sitemap という便利な機能が追加されています。Webサイトの新規作成をしても、
デフォルトではWeb.sitemapファイルは構成されないので、新規アイテムの追加より　"Site Map"　を追加します。

５．Web.sitemapの作成

サイトマップを作るためには、Web.sitemapを作る必要があります。サイトマップを追加するには、ソリューションエクスプローラから新規アイテムの追加から、"Site Map"を追加します。（下図）
すると、デフォルトで "Web.sitemap"というXMLファイルが追加されます。
Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
	<siteMapNode url="" title="" description="" roles="">
		<siteMapNode url="" title="" description="" roles="" />
		<siteMapNode url="" title="" description="" roles="" />
	</siteMapNode>
</siteMap>
ここで、url がコンテンツのURL、titleがタイトル、descriptionが説明、rolesがロールになります。そこで、このWeb.sitemapを編集して、次のように変更します。
　
Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode url="computer.aspx" title="コンピュータ" 
	description="コンピュータに関する話題" roles="">
    <siteMapNode url="csharp.aspx" title="C#" description="C#に関する話題" roles="" >
      <siteMapNode url="ukamen.aspx" title="C#プログラミング" 
	description="C#プログラミングに関する話題" roles="" />
      <siteMapNode url="ukamenblog.aspx" title="Blog" 
	description="Blog" roles="" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

６．SiteMapPath

ナビゲーション関係のコントロールは、ツールボックスの"Navigation"タブの中に、SiteMapPathとMenuがあります。

まずは、SiteMapPathから見ていきます。SiteMapPathをページにDrag & Dropします。すると、いきなり次のようなサイトマップができてしまいます。

Auto Format を選択すると、次のようなダイアログが表示され、簡単に見た目を変更できます。ただ、今の時点ではあまりかっこいいパターンは用意されてないですね:-)。

でも、SiteMapPathのプロパティから、かなり柔軟にスタイルを変更することができるようになっています。たとえば、簡単に次のように変更することができます。

『なんてデザインセンスが悪いんだ～～』という突っ込みは却下。

７．Menu

Menuの場合は、SiteMapPathとは少し違っていて、Menuをページ上にDrag&Dropすると、次のようになります。

ここで、共通タスクよりChoose Data Sourceで、新規データソースを選択すると、次のようなData Source Configuration ダイアログが表示されます。

ここで、Site Mapを選択して OK を押します。

これだけで、次のようなメニューが出来上がってしまいます。すごい！

あとは、共通タスクから Auto Format、あるいはMenuのプロパティでデザインを変更することができます。

これは、Colorful を選択した場合です。

８．Web.sitemap with TreeView

上記のSiteMapPath, Menu の他に、TreeViewでもサイトマップを表示することができます。まずページにTreeViewをDrag & Dropします。

次に、共通タスクから、NewDataSourceを選択します。

すると、次のようなデータソースコンフィグレーションダイアログが表示されるので、"Site Map"を選択してOKを押します。

すると、次のようにツリービューにWeb.sitemapに記述した内容が表示されます。

この状態で実行するだけで、つぎのような TreeView のサイトマップを作ることができます。

さらに共通タスクから自動フォーマットを選択することにより、次のような自動フォーマットダイアログが表示され、簡単にルックアンドフィールを変更することができます。

トップノードを表示したくない場合は、SiteMapDataSourceのプロパティより、ShowStartingNodeをFalseにします。

ラインを表示したい場合は、共通タスクからラインイメージのカスタマイズを選択すると、次のようなLine Image Generator ダイアログが表示されて、ラインをカスタマイズすることができます。至れり尽くせりって感じですね。

また、ツリービューのプロパティから、チェックボックスを表示するようにすることもできます。