チュートリアル : Web サイトへのサイト ナビゲーションの追加
更新 : 2007 年 11 月
複数ページ以上を含むサイトでは、特にサイトを変更する場合、ユーザーがページ間を自由に移動できるナビゲーション システムを構築するのは困難です。ASP.NET サイト ナビゲーションを使用すると、ページの一元的なサイト マップを作成できます。
このチュートリアルでは、サイト マップの設定方法、およびサイト マップに依存するコントロールを使用して Web サイトのページにナビゲーションを追加する方法について説明します。
このチュートリアルでは、次の作業を行う方法について説明します。
例のページがある Web サイト、およびページのレイアウトを記述するサイトマップ ファイルを作成します。
TreeView コントロールを、ユーザーがサイト内の任意のページにジャンプできるナビゲーション メニューとして使用します。
SiteMapPath コントロールを使用して、ユーザーが現在のページからサイト階層を表示し、サイト階層の上に戻れるようにする、階層リンクとも呼ばれるナビゲーション パスを追加します。
Menu コントロールを使用して、ユーザーがノードの 1 つのレベルを一度に表示できるナビゲーション メニューを追加します。子ノードがあるノードの上にマウス ポインタを置くと、子ノードのサブメニューが生成されます。
マスタ ページでサイト ナビゲーションとコントロールを使用して、サイト ナビゲーションを 1 回定義するだけで済むようにします。
前提条件
このチュートリアルを完了させるための要件を次に示します。
Microsoft Visual Web Developer Web 開発ツール
.NET Framework
このチュートリアルでは、Visual Web Developer の使用方法を理解していることを前提としています。
例のページとサイト マップがある Web サイトの作成
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を完了して、Visual Web Developer で Web サイトを既に作成している場合は、その Web サイトを使用して、次のセクションに移動できます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトの作成
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします (または、[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします)。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
左端の [場所] ボックスの [ファイル システム] をクリックします。次に、右端の [場所] ボックスに Web サイトのページを格納するフォルダ名を入力します。
たとえば、「C:\WebSites\SiteNavigation」というフォルダ名を入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
サイト マップの作成
サイト ナビゲーションを使用するには、サイト内のページ レイアウトを説明する方法が必要です。既定では、ページ タイトルと URL を含むサイトの階層構造を格納した .xml ファイルを作成します。
.xml ファイルの構造は、サイトの構造を反映します。各ページは、サイト マップの siteMapNode 要素として表されます。最上位のノードは、ホーム ページを表し、子ノードはサイト内で下位にあるページを表します。
サイト マップを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加 <Path>] ダイアログ ボックスで、次の操作を行います。
[Visual Studio にインストールされたテンプレート] の [サイト マップ] をクリックします。
[名前] ボックスで、名前が Web.sitemap であることを確認します。
.gif "メモ")
メモ :ファイルは Web.sitemap という名前で、Web サイトのルートに表示されている必要があります。
[追加] をクリックします。
次の XML コンテンツを Web.sitemap ファイルにコピーし、既定のコンテンツを上書きします。
<siteMap> <siteMapNode title="Home" description="Home" url="~/home.aspx" > <siteMapNode title="Products" description="Our products" url="~/Products.aspx"> <siteMapNode title="Hardware" description="Hardware we offer" url="~/Hardware.aspx" /> <siteMapNode title="Software" description="Software for sale" url="~/Software.aspx" /> </siteMapNode> <siteMapNode title="Services" description="Services we offer" url="~/Services.aspx"> <siteMapNode title="Training" description="Training" url="~/Training.aspx" /> <siteMapNode title="Consulting" description="Consulting" url="~/Consulting.aspx" /> <siteMapNode title="Support" description="Support" url="~/Support.aspx" /> </siteMapNode> </siteMapNode> </siteMap>3 段階に入れ子にした siteMapNode 要素のセットが Web.sitemap ファイルに格納されます。各要素の構造は同じです。各要素の違いは、XML 階層内での位置だけです。
サンプルの .xml ファイルで定義されたページの URL は修飾されていません。つまり、すべてのページがアプリケーションのルートに対する相対 URL で処理されます。ただし、特定のページには自由に URL を指定できます。サイト マップで定義する論理構造は、フォルダ内のページの物理的なレイアウトに対応している必要はありません。
ファイルを保存して閉じます。
移動するページの作成
ここでは、前のセクションで定義したサイト マップに記述される限られたページを作成します (このチュートリアルでページをテストするときに完全な階層を表示できるように、サイト マップはより完全になります)。
移動するページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加 <Path>] ダイアログ ボックスで、次の操作を行います。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「Home.aspx」と入力し、[追加] をクリックします。
デザイン ビューに切り替えます。
Home.aspx ページで「Home」と入力し、見出し 1 として書式指定します。
この手順を繰り返して、Products.aspx、Hardware.aspx、Software.aspx、および Training.aspx という名前で 4 ページを追加します。ページの名前 (Products など) を見出しとして使用し、ブラウザに表示されたページを識別できるようにします。
具体的に作成するページは重要ではありません。この手順に示したページは、3 段階に入れ子にしたサイト階層を表示するために使用します。
TreeView コントロールを使用したナビゲーション メニューの作成
ここまででサイト マップとページを作成したので、サイトにナビゲーションを追加できます。折りたたみ可能なナビゲーション メニューとして機能する TreeView コントロールを使用します。
.gif "vbVenusSiteNavigation_TreeView1 イメージ")
ツリー スタイルのナビゲーション メニューを追加するには
Home.aspx ページを開きます。
ツールボックスの [データ] グループから、SiteMapDataSource コントロールをページにドラッグします。
既定の設定では、このチュートリアルの前半の「サイト マップの作成」で作成した Web.sitemap ファイルから SiteMapDataSource コントロールが情報を取得します。そのため、コントロールの補足情報を指定する必要はありません。
ツールボックスの [ナビゲーション] グループから、TreeView コントロールをページにドラッグします。
[TreeView タスク] メニューの [データ ソースの選択] ボックスで [SiteMapDataSource1] をクリックします。
ページを保存します。
ツリー スタイルのナビゲーション メニューのテスト
ここで、ナビゲーション システムの暫定的なテストを実行できます。
ナビゲーション メニューをテストするには
Ctrl キーを押しながら F5 キーを押して Home.aspx ページを実行します。
ツリーにノードの 2 つのレベルが表示されます。
[Products] をクリックして、Products ページを表示します。
- Products.aspx ページを作成していない場合は、作成したページのリンクをクリックします。
現在の状態の Web サイトでは、ナビゲーション メニューはホーム ページだけに表示されます。同じ SiteMapDataSource コントロールと TreeView コントロールをアプリケーション内の各ページに追加して、各ページにナビゲーション メニューを表示できます。ただし、このチュートリアルの後半では、ナビゲーション メニューがすべてのページに自動的に表示されるように、ナビゲーション メニューをマスタ ページに配置する方法について説明します。
SiteMapPath コントロールを使用したナビゲーション履歴の表示
TreeView コントロールを使用してナビゲーション メニューを作成する以外に、ページが現在の階層のどこにあるかを表示するナビゲーションを各ページに追加できます。この種のナビゲーション コントロールは、階層リンクとも呼ばれます。ASP.NET には、ページ ナビゲーションを自動的に実装できる SiteMapPath コントロールが用意されています。
ナビゲーション履歴を表示するには
Products.aspx ページを開き、デザイン ビューに切り替えます。
ツールボックスの [ナビゲーション] グループから、SiteMapPath コントロールをページにドラッグし、 SiteMapPath コントロールの前にカーソルを置き、Enter キーを押して新しい行を作成します。
SiteMapPath コントロールにページ階層内での現在のページの位置が表示されます。既定では、SiteMapPath コントロールは、Web.sitemap ファイルで作成された階層を表します。たとえば、Products.aspx ページを表示すると、SiteMapPath コントロールには次のパスが表示されます。
Home > Products
このチュートリアルで作成したその他のページ (ホーム ページを除く) についてこの手順を繰り返します。
各ページに SiteMapPath コントロールを配置しない場合でも、テストのために、サイト階層の各レベルのページ (Products.aspx ページ、Hardware.aspx ページなど) にコントロールが必要です。
ナビゲーション履歴のテスト
階層の第 2 レベルおよび第 3 レベルにあるページを表示することで、ページ ナビゲーションをテストできます。
ページ ナビゲーションをテストするには
Home.aspx ページを開き、Ctrl キーを押しながら F5 キーを押して、ページを実行します。
TreeView コントロールを使用して、Products ページに移動します。
SiteMapPath コントロールを配置したページの位置に、次のようなパスが表示されます。
Home > Products
[ホーム] をクリックしてホーム ページに戻ります。
TreeView コントロールを使用して、Hardware ページに移動します。
今度は、次のようなパスが表示されます。
Home > Products > Hardware
SiteMapPath コントロールによって表示されるすべてのページ名はリンクです。ただし、最後のページ名は現在のページを表します。SiteMapPath コントロールの RenderCurrentNodeAsLink プロパティを true に設定することで、現在のノードをリンクに設定できます。
SiteMapPath コントロールを使用すると、ユーザーはサイト階層の上に戻ることができますが、現在の階層パスにないページにジャンプすることはできません。
Menu コントロールを使用したナビゲーション メニューの作成
TreeView コントロールを使用してナビゲーション メニューを作成する以外に、Menu コントロールを使用して、ユーザーがノードの 1 つのレベルを一度に表示できる展開可能なナビゲーション メニューを表示することもできます。子ノードがあるノードの上にマウス ポインタを置くと、子ノードのサブメニューが生成されます。
メニュー スタイルのナビゲーション メニューを追加するには
Products.aspx ページを開き、デザイン ビューに切り替えます。
ツールボックスの [ナビゲーション] グループから、Menu コントロールをページにドラッグします。
[Menu タスク] メニューの [データ ソースの選択] ボックスの [新しいデータ ソース] をクリックします。
データ ソースの構成 - <Datasourcename> ウィザードで、[サイト マップ] をクリックし、[OK] をクリックします。
ページを保存します。
メニュー スタイルのナビゲーション メニューのテスト
ここで、ナビゲーション システムの暫定的なテストを実行できます。
ナビゲーション メニューをテストするには
[Menu タスク] を閉じます。
Home.aspx を開きます。
Ctrl キーを押しながら F5 キーを押して Home.aspx ページを実行します。
ツリーにノードの 2 つのレベルが表示されます。
[Products] をクリックして、Products ページを表示します。
- Products.aspx ページを作成していない場合は、作成したページのリンクをクリックします。
ナビゲーション メニューで、マウス ポインタを [ホーム] リンクの上に置いてメニューを展開します。
現在の状態の Web サイトでは、ナビゲーション メニューはホーム ページだけに表示されます。同じ SiteMapDataSource コントロールと Menu コントロールをアプリケーション内の各ページに追加して、各ページにナビゲーション メニューを表示できます。ただし、このチュートリアルの次のセクションでは、ナビゲーション メニューが各ページに自動的に表示されるように、ナビゲーション メニューをマスタ ページに配置する方法について説明します。
サイト ナビゲーションとマスタ ページの結合
ここまでで作成したページでは、サイト ナビゲーション コントロールを各ページに個別に追加しました。ページごとにコントロールに異なる設定をする必要がないため、これは特に複雑な作業ではありません。ただし、サイトの保守にコストがかかる可能性があります。たとえば、サイトのページの SiteMapPath コントロールの位置を変更するには、各ページを個別に変更する必要があります。
サイト ナビゲーション コントロールとマスタ ページを組み合わせて使用することで、ナビゲーション コントロールを 1 か所に格納するレイアウトを作成できます。これにより、ページをマスタ ページ内のコンテンツとして表示できます。
ナビゲーションのマスタ ページを作成するには
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加 <Path>] ダイアログ ボックスで、次の操作を行います。
[Visual Studio にインストールされたテンプレート] の [マスタ ページ] をクリックします。
[名前] ボックスに「Navigation.master」と入力し、[追加] をクリックします。
デザイン ビューに切り替えます。
マスタ ページに既定の ContentPlaceHolder コントロールが表示されます。
次の手順では、ナビゲーション コントロールの単純なレイアウトを使用してマスタ ページを作成します。実際のアプリケーションでは、より高度な書式設定を使用する場合もありますが、マスタ ページでナビゲーション コントロールを使用する技法は類似しています。
マスタ ページにナビゲーション コントロールを追加するには
ContentPlaceHolder コントロールをクリックし、左方向キーを押し、Enter キーを押します。
これにより、ContentPlaceHolder コントロールの前に空白行が挿入されます。
ツールボックスの [データ] グループから SiteMapDataSource コントロールをマスタ ページにドラッグし、ContentPlaceHolder コントロールの上に配置します。
メモ :SiteMapDataSource コントロールを ContentPlaceHolder コントロールの上に配置しないでください。
既定では、SiteMapDataSource コントロールは、このチュートリアルの前半の「サイト マップの作成」で作成した Web.sitemap ファイルを使用します。
SiteMapDataSource コントロールをクリックし、右方向キーを押し、Enter キーを押します。
これにより、SiteMapDataSource コントロールの下に空白行が挿入されます。
[テーブル] メニューの [テーブルの挿入] をクリックし、1 行 2 列、および 100% の幅の表を挿入します。
ツールボックスの [ナビゲーション] グループから、TreeView コントロールを表の左のセルにドラッグします。
[TreeView タスク] メニューの [データ ソースの選択] ボックスで [SiteMapDataSource1] をクリックします。
ツールボックスの [ナビゲーション] グループから、SiteMapPath コントロールを表の右のセルにドラッグします。
右のセルで、空白の領域をクリックし、Shift キーを押しながら Enter キーを押して、新しい行を作成します。
ContentPlaceholder コントロールを表の右のセルにドラッグし、SiteMapPath コントロールの下に配置します。
マスタ ページを使用している場合は、サイト内のページをコンテンツ ページとして作成します。コンテンツ ページは Content コントロールを使用して、マスタ ページの ContentPlaceholder コントロールに表示されるテキストおよびコントロールを定義します。したがって、Home、Products、および Hardware の各ページをコンテンツ ページとして再作成する必要があります。
サイトのコンテンツ ページを作成するには
ソリューション エクスプローラで、Home.aspx ページを右クリックし、[削除] をクリックし、[OK] をクリックします。
Products.aspx、Software.aspx、Training.aspx、および Hardware.aspx の各ページと、作成したその他のページについて手順 1. を繰り返します。
マスタ ページを使用するコンテンツ ページとしてページを再作成します。
ソリューション エクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスで、次の操作を行います。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「Home.aspx」と入力します。
[マスタ ページを選択する] チェック ボックスをオンにします。
[追加] をクリックします。
[マスタ ページを選択してください] ダイアログ ボックスが表示されます。
[フォルダの内容] の [Navigation.master] をクリックし、[OK] をクリックします。
前のセクションで作成したマスタ ページにバインドされたコンテンツ ページが作成されました。
デザイン ビューに切り替えます。
デザイン ビューに、マスタ ページの ContentPlaceHolder1 コントロールで編集可能な領域と共に、マスタ ページに対して作成したレイアウトが表示されます。
[Content] ウィンドウ内をクリックします。
ここにこの特定のページのコンテンツを追加できます。
「Home」と入力し、テキストを 見出し 1 として書式指定します。
ホーム ページの静的なテキスト (具体的には見出し) が作成されました。
手順 3. ～ 8. を繰り返して、Products.aspx コンテンツ ページおよび Hardware.aspx コンテンツ ページを作成します。手順 8. で、「Home」の代わりに、「Products」および「Hardware」とそれぞれ入力します。
マスタ ページのナビゲーション コントロールのテスト
マスタ ページおよびコンテンツ ページのテストは、個別のページのテストと同じです。
マスタ ページのナビゲーション コントロールをテストするには
Products.aspx ページを開き、Ctrl キーを押しながら F5 キーを押して、ページを実行します。
Products コンテンツ ページがマスタ ページとマージされます。Products 見出しとマスタ ページに追加したナビゲーション コントロールを含むページがブラウザに表示されます。
TreeView コントロールの [Hardware] をクリックします。
Products ページと同じレイアウトで Hardware ページが表示されますが、SiteMapPath コントロールには異なるパスが表示されます。
次の手順
このチュートリアルでは、ASP.NET のサイト ナビゲーションおよびナビゲーション コントロールの基本的な機能について説明しました。ナビゲーションの他の機能も試すことができます。たとえば、次の操作を実行できます。
SiteMapPath コントロールの書式を指定して、外観をカスタマイズします。このコントロールでは、リンクの表示方法を管理するさまざまなオプションがサポートされています。詳細については、「SiteMapPath」を参照してください。
TreeView コントロール内のページの表示をカスタマイズします。たとえば、ツリー ビュー ノード内の現在のページを強調表示できます。
サイト ナビゲーション情報をプログラムによって操作します。SiteMapPath コントロールを現在のページで使用できます。これにより、ナビゲーション情報をプログラムによって表示できます。
サイト マップ情報に別のデータ ストアを使用します。既定の XML サイト マップ ファイルを使用する代わりに、既存のサイト マップを使用したり、サイト マップ情報をデータベースに格納したりできます。ASP.NET サイト ナビゲーションでは、プロバイダ モデルが使用されます。サイト マップ情報を管理するコンポーネントを作成し、既定のサイト マップ プロバイダではなくそのコンポーネントを使用するようにアプリケーションを設定できます。詳細については、「ASP.NET サイト ナビゲーション プロバイダ」を参照してください。
参照
処理手順
チュートリアル : Visual Web Developer での基本的な Web ページの作成
チュートリアル : Visual Web Developer での ASP.NET マスタ ページの作成と使用