CodeZine(コードジン)

特集ページ一覧

ASP.NETサイトナビゲーションの9つの問題のソリューション:パート1

ASP.NET 2.0における基本的なサイトナビゲーション手法

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/09/27 00:00

本稿では、ASP.NET 2.0のサイトナビゲーションコントロールを使ってサイトナビゲーション表示を簡単に作成する方法と、特定のページの非表示や「パンくずリスト」の表示など、いくつかの実際的な問題を解決する方法を解説します。

目次

はじめに

 これまでにASP.NET 2.0のサイトナビゲーションコントロールについて書かれた本は山ほどありますが、実際に新しいナビゲーション機能をどう使うかという詳しい説明はまず見当たりません。例えば、データベースドリブンのコンテンツをサイトナビゲーションにどう統合するのか、適切なアクセス許可を持たないユーザーに対して特定のページを自動的に非表示にするソリューションをどう作成するのか、あるいはアクティブなトップレベルページの表示を差別化したり、特定のアクティブなページの子のみを表示したりするにはどうするのか、といった疑問をよく耳にします。おそらくナビゲーション要素を画像として表示する必要があるのですが、ファイルの名前や画像のサイズを保管する方法がわからないのです。

 2回に渡る本シリーズでは、9つの一般的なサイトマップ問題と、ASP.NET 2.0の新しいナビゲーション機能を使ってそれらの問題を解決する方法を紹介します。パート1の内容は次のとおりです。

  • ASP.NET 2.0でのサイトナビゲーションのセットアップ
  • 画像によるナビゲーション
  • アクティブなページの差別化
  • サイトマップデータのナビゲーション
  • 「パンくずリスト」の表示
  • (パンくずリスト=ホームページから現在のページまでの階層を示すリスト)
  • 独自のサイトマップ属性の使用
  • サイトマップページの作成

 パート2では、次に示すような、より高度なサイトマップソリューションを詳しく説明します。

  • ページセキュリティの実装とサイトマップデータとの統合
  • プロバイダモデルの拡張によるデータベースドリブンコンテンツの統合

初期セットアップ

 ASP.NET 2.0のサイトナビゲーションソリューションの設定は極めて簡単です。初期セットアップには1分もかかりません。ゼロから始める場合は、「Default.aspx」や「SiteMap.aspx」などのページを追加します。次に、Visual Studio 2005で、「Web.sitemap」という“サイトマップ”タイプの新しい項目を追加します。

 この新しい「Web.sitemap」XMLファイルの中に、ページごとにsiteMapNode要素を追加します。ページの場所とタイトルはurl属性とtitle属性を使って指定します。以下は、「Web.sitemap」ファイルのコード例です。

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns=
   "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/Default.aspx" title="Home" >
    <siteMapNode url="~/SiteMap.aspx" title="Site Map" >
  </siteMapNode>
</siteMap>

 次に、「Web.sitemap」ファイルを使うことをASP.NETに指示する必要があります。「Web.config」ファイルの最後の要素の前に、次のコードを追加します。

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
  <providers>
    <clear />
    <add name="XmlSiteMapProvider"
      description="Default SiteMap provider"
      type="System.Web.XmlSiteMapProvider"
      siteMapFile="Web.sitemap"
      />
  </providers>
</siteMap>

 この動作を確認するには、「Default.aspx」またはマスタページに次のコードを追加します。

<h1><%= SiteMap.CurrentNode.Title %>!</h1>

 このアプリケーションを実行すると、「Default.aspx」ページのタイトルに「Home!」と表示されます。

#1:画像を利用したトップレベルページ

 開発者が直面する一般的なサイトナビゲーション問題は、サイトのトップレベルページの表示です。トップページを画像として表示するには、普通のテキストとして表示するよりも少し手間がかかります。画像のファイル名はもちろん、おそらくそのサイズも指定しなければならないからです。この1つ目のソリューションでは、RepeaterコントロールをSiteMapDataSourceコントロールにバインドし、ASP.NET 2.0の新しいSystem.Web.SiteMapクラスのIsDescendantOf()メソッドを使ってトップレベルの画像を一連の「タブ」として表示する方法を説明します。

 図1に、各トップレベルページを画像で表示したサイトマップページの完成例を示します。

図1 画像ベースのナビゲーション:この図に表示されているページの「タブ」は、アプリケーションのトップレベルページに対応する画像である。ここでは、各タブとそれに対応する階層リンクの項目を矢印で結んでいる
図1 画像ベースのナビゲーション:この図に表示されているページの「タブ」は、アプリケーションのトップレベルページに対応する画像である。ここでは、各タブとそれに対応する階層リンクの項目を矢印で結んでいる

 このソリューションで使う「MasterPage.master」ファイルには、SiteMapDataSourceコントロールとRepeaterコントロールの2つのコントロールが含まれています。

<asp:SiteMapDataSource ID="srcBuckets" runat="server"
  ShowStartingNode="False" />

<asp:Repeater ID="rpt" runat="server" DataSourceID="srcBuckets">
  <ItemTemplate><%#
    String.Format("<a href=\"{0}\" onmouseover=\"imgon('{2}');\"
            onmouseout=\"imgoff('{2}');\"><img src=\"{2}.gif\"
            alt=\"{1}\" name=\"{2}\" /></a>,"
      ((SiteMapNode)Container.DataItem).Url,
      ((SiteMapNode)Container.DataItem).Title,
      ((SiteMapNode)Container.DataItem)["imageName"])
  %></ItemTemplate>
</asp:Repeater>

 SiteMapDataSourceコントロールを使用すると、「Web.sitemap」内の階層サイトマップ情報をコードから簡単に参照できるようになります。中でも、SiteMapDataSourceのプロパティShowStartingNodeは非常に便利です。このプロパティをfalseに設定すると、「Web.sitemap」にある必須の唯一のトップレベル要素siteMapNodeが無視され、その子要素(一連のトップレベルページ)が公開されます。次に便利なプロパティはStartingNodeOffsetです。このプロパティを使えば、サイトマップナビゲーションツリーを上下に移動することができます。これについては、ソリューション#4で詳しく説明します。表1に、SiteMapDataSourceのよく使われるプロパティを示します。

表1 SiteMapDataSourceのよく使われるプロパティ
プロパティ説明
ShowStartingNode既定値はtrue。このプロパティをfalseに設定すると、「Web.sitemap」にある必須の唯一のトップレベル要素siteMapNodeが無視され、その子要素(トップレベルページ)が公開されます。
StartFromCurrentNode既定値はfalse。このプロパティをtrueに設定すると、最上位のページではなく現在のページが公開されます。StartingNodeOffsetプロパティを1に設定した状態でこのプロパティを使うと、現在のページの子が公開されます。
StartingNodeOffset既定値は0(ゼロ)。このプロパティを正の値に設定すると、ノードの子が公開されます(負の値を設定するとナビゲーションツリーの上のノードが公開されます)。例えば、ShowStartingNodeの値をfalseに設定した状態でStartingNodeOffsetを1に設定すると、現在アクティブなトップレベルページの子が公開されます。詳しくは、ソリューション#4を参照してください。
StartingNodeUrlこのプロパティでは、SiteMapDataSourceが公開する開始ノードとして具体的なページを指定することができます。StartingNodeOffsetを1に設定した状態でこのプロパティを使うと、特定のノードの子を表示することができます。この手法が特に役立つのが、本シリーズのパート2で紹介するデータベースドリブンのサイトマップコンテンツのソリューションです。

 TreeViewは、SiteMapDataSourceのすべてのページを表示できる数少ないコントロールの1つであり、階層情報を処理する機能をもともと備えています。しかし、前述のRepeaterは、それ自体では階層情報を処理できません。この例では、SiteMapDataSourceが公開する最上位のページ群を表示する部分でRepeaterを使用しています。ここで、SiteMapDataSourceのShowStartingNodeプロパティが役に立ちます。

 Repeaterは、DataSourceIDプロパティによってSiteMapDataSourceにバインドすることにより、SiteMapDataSource内のsiteMapNode要素にアクセスできるようになります。各SiteMapNodeオブジェクトは「Web.sitemap」ファイル内の1つのエントリに対応します(前述の例を参照)。これで、RepeaterはsiteMapNode要素の属性(urltitleなど)にアクセスできるようになります。

 しかし、その他の属性、例えばimageNameのような属性を保存したり取得したりするにはどうしたらよいでしょうか。ASP.NET 2.0のサイトナビゲーションアプローチの非常に素晴らしい点は、その拡張性です。任意の属性を「Web.sitemap」ファイル内のsiteMapNode要素に追加し、コード内でその属性にアクセスすることができます。前述のソリューションでは、次のようにして「Web.sitemap」ファイルにimageName属性を追加しています。

<siteMapNode url="~/Default.aspx" title="Home" imageName="tab1">

 これで、RepeaterItemTemplate内でこの値にアクセスできるようになります。

((SiteMapNode)Container.DataItem)["imageName"])

 画像のheight属性とwidth属性も簡単に追加できます。これは、画像ベースのナビゲーション表示の基礎部分に対応します。次に、このアプローチを拡張してアクティブなトップレベルページを識別する方法を示します。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • Lee Richardson(Lee Richardson)

    Automated Architecture Inc.の創設者かつCEO。Blue InkアプリケーションおよびJAGソフトウェア開発方法論の作成者でもある。現在はHeadstrongコンサルティング社でシニアコンサルタントとして勤務し、高速アプリケーション開発(Rapid Application...

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5