サイトマップ(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を作る必要があります。サイトマップを追加するには、ソリューションエクスプローラから新規アイテムの追加から、"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>
|
ナビゲーション関係のコントロールは、ツールボックスの"Navigation"タブの中に、SiteMapPathとMenuがあります。
まずは、SiteMapPathから見ていきます。SiteMapPathをページにDrag &
Dropします。すると、いきなり次のようなサイトマップができてしまいます。
Auto Format
を選択すると、次のようなダイアログが表示され、簡単に見た目を変更できます。ただ、今の時点ではあまりかっこいいパターンは用意されてないですね:-)。
でも、SiteMapPathのプロパティから、かなり柔軟にスタイルを変更することができるようになっています。たとえば、簡単に次のように変更することができます。
『なんてデザインセンスが悪いんだ〜〜』という突っ込みは却下。
Menuの場合は、SiteMapPathとは少し違っていて、Menuをページ上にDrag&Dropすると、次のようになります。
ここで、共通タスクよりChoose Data Sourceで、新規データソースを選択すると、次のようなData Source
Configuration ダイアログが表示されます。
ここで、Site Mapを選択して OK を押します。
これだけで、次のようなメニューが出来上がってしまいます。すごい！
あとは、共通タスクから Auto Format、あるいはMenuのプロパティでデザインを変更することができます。
これは、Colorful を選択した場合です。
上記のSiteMapPath, Menu
の他に、TreeViewでもサイトマップを表示することができます。まずページにTreeViewをDrag & Dropします。
次に、共通タスクから、NewDataSourceを選択します。
すると、次のようなデータソースコンフィグレーションダイアログが表示されるので、"Site Map"を選択してOKを押します。
すると、次のようにツリービューにWeb.sitemapに記述した内容が表示されます。
この状態で実行するだけで、つぎのような TreeView のサイトマップを作ることができます。
さらに共通タスクから自動フォーマットを選択することにより、次のような自動フォーマットダイアログが表示され、簡単にルックアンドフィールを変更することができます。
トップノードを表示したくない場合は、SiteMapDataSourceのプロパティより、ShowStartingNodeをFalseにします。
ラインを表示したい場合は、共通タスクからラインイメージのカスタマイズを選択すると、次のようなLine Image
Generator ダイアログが表示されて、ラインをカスタマイズすることができます。至れり尽くせりって感じですね。
また、ツリービューのプロパティから、チェックボックスを表示するようにすることもできます。
TreeView以外にも、ListBox,
DropDownListなどとサイトマップをデータバインドすることができます。ただし、ListBox,
DropDownListなどは階層的な表示ができないので、使い道は限られてしまいます。