Comments
Transcript
Visual Studio Do-It-Yourself シリーズ 第 8 回 ナビゲーション
Visual Studio Do-It-Yourself シリーズ 第 8 回 ナビゲーション コントロール 著作権 このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマクロソフトの見解を反映 したものです。マクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任 を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。 このホワトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、 これらの情報についてマクロソフトはいかなる責任も負わないものとします。 この文書およびソフトウェゕを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものと します。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることな く、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう 形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上の お客様の権利を制限するものではありません。 マクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知 的財産権を所有する場合があります。別途マクロソフトのラセンス契約上に明示の規定のない限り、このド キュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するもので はありません。 別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメン名、電子メール ゕ ドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一 切関係ありません。 © 2010 Microsoft Corporation. All rights reserved. Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国および その他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。 ASP.NET Do-It-Yourself 第 8 回は、ASP.NET で利用できるナビゲーション コントロールについて学習しま す。Web サトに含まれるページの数が増えてくると、必要なページに効率的にゕクセスするのが困難になり、 ユーザーはサト内で迷いやすくなってしまいます。ナビゲーション コントロールは、目的とするページへの 道しるべとなり、またサト内での現在地を示すための役割も果たします。 ここでは次の 3 つの機能について学習します。 ・TreeView を使ったサトマップ ツリーの表示 ・Menu を使ったメニューの表示 ・SiteMapPath を使った 「パンくずリスト」 の表示 今回学習する 3 種類のナビゲーション コントロールの実装例を示します。 ■ナビゲーションの準備：Web.sitemap の作成 まず、Web サト プロジェクトを作成しておきます。今回作成する Web サト プロジェクトでは、次のよ うなページ構成の Web サトを想定しています。 ここでは、このサト構成図に含まれる各ページをプロジェクトに追加してください。ページの追加はメニュー の [Web サト] - [新しい項目の追加] により表示される [新しい項目の追加] ダゕログボックスから行い ます。各ページには、特に何かを設定したり記述したりする必要はありません。 次に、この Web サトのサトマップを作成します。ASP.NET のナビゲーション コントロールでは、この サトマップを参照することで、メニューやサトマップ表示を簡単に行えます。 なおサトマップに記述されているページが実際に存在しない場合、実行時にエラーになることがあります。 ●Web.sitemap の作成 サトマップの作成は、ページの追加時と同様に [新しい項目の追加] ダゕログボックスを開き、今度は「サ トマップ」を選択します。サトマップを新規作成する場合は、フゔル名は Web.sitemap になります。 サトマップは、サトに含まれるページの構成を記述するための XML フゔルです。生成されたサトマ ップをソリューション エクスプローラーでダブルクリックすると、XML フゔル エデゖターが起動し、内容 の編集が行えます。 生成された直後のサトマップ (Web.sitemap) は次のようになっています。 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap> <siteMapNode> 要素には、ページのタトル、URL などを記述します。title 属性はその項目がページ上に表 示される際の表示名を、description 属性はマウスをその項目の上に移動した際にポップゕップ表示する ToolTip の内容を設定します。url 属性には、該当するページの URL を設定します。URL の記述には Web ゕ プリケーションのルート演算子 (~) を使用します。 サトマップでは、この <siteMapNode> 要素を階層的に記述することで、Web サトの階層構造を表現し ます。上述したサトマップは次のように記述できます。 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/Default.aspx" title="Home" description="Home"> <siteMapNode url="~/info.aspx" title="知る" description="知る"> <siteMapNode url="~/news.aspx" title="ニュース" description="ニュース" /> <siteMapNode url="~/sports.aspx" title="スポーツ" description="スポーツ" /> </siteMapNode> <siteMapNode url="~/enjoy.aspx" title="楽しむ" description="楽しむ"> <siteMapNode url="~/video.aspx" title="ビデオ" description="ビデオ" /> <siteMapNode url="~/movie.aspx" title="映画" description="映画" /> </siteMapNode> <siteMapNode url="~/life.aspx" title="暮らす" description="暮らす"> <siteMapNode url="~/car.aspx" title="自動車" description="自動車" /> <siteMapNode url="~/travel aspx" title="旅行" description="旅行" /> </siteMapNode> <siteMapNode url="~/search.aspx" title="探す" description="探す"> <siteMapNode url="~/house.aspx" title="住宅" description="住宅" /> <siteMapNode url="~/job.aspx" title="転職" description="転職" /> </siteMapNode> </siteMapNode> </siteMap> これでサトマップが作成できたので、ページにナビゲーション コントロールを配置していきましょう。 ■TreeView TreeView では、いま作成したサトマップの内容をツリー状に表示できます。Default.aspx を開き、ツール ボックスから [ナビゲーション] タブにある TreeView をドラッグ & ドロップしてページ上に配置します。 ●データソースの作成 TreeView と次項で説明する Menu は、直接サトマップを読み込むのではなく、DataSource コントロール の 一 種 で あ る SiteMapDataSource を 介 し て サ ト マ ッ プ に ゕ ク セ ス し ま す 。 こ の た め 、 あ ら か じ め SiteMapDataSource を作成し、これとデータバンデゖングする必要があります。 SiteMapDataSource の作成には、配置した TreeView の スマート タグに表示される [データソースの選択：] から「新しいデータ ソース」を選択します。これにより [データ ソース構成ウゖザード] ダゕログボックス が開きますので、ここで [ゕプリケーションがデータを取得する場所] からサトマップを選択します。 [OK] ボタンをクリックすると、SiteMapDataSource が作成されます。さらにここで生成されたデータ ソース ID が TreeView にセットされます。 ●オートフォーマットでデザインを変更 次にツリー表示のデザンを変更します。同じく TreeView のスマート タグに表示される [オートフォーマッ ト] を選択します。ここでは "XP フゔル エクスプローラー" を選択しました。ダゕログ ボックス右側の プレビュー部分で実際のツリー表示の様子が確認できます。 TreeView で はこ のほ かに も 、ノ ード 間に 線を描 画 した り (ShowLines プロ パ テゖ )、 ン デン ト の幅 (NodeIndent プロパテゖ) を変更したりすることでデザンを微調整できます。実際に Web ブラウザーでど のように表示されるか実行してみます。 Web.sitemap に記述したページの定義どおりに、 ページのタトルが階層表示されていることが確認できます。 ■Menu Menu では、サトマップ に記述されたページ情報をメニュー表示します。下位の階層で定義されたページは、 マウス カーソルがメニュー項目上に移動した際にポップゕップ表示します。 ここでは news.aspx というページをプロジェクトに新規追加し、これにメニューを配置します。ツールボック スから Menu をページに配置すると、スマート タグが表示されますので、TreeView のときと同様にデータ ソ ースを設定します。またスマート タグのから [オートフォーマット] を選択して [オートフォーマット] ダゕ ログボックスでスキームを選択します。ここでは"カラフル"を選択しました。 基本的な作業はこれだけですが、プロパテゖを変更することで、水平方向に並べてメニュー表示を行ったり、あ らかじめ表示するメニュー項目の階層レベル (StaticDisplayLevels) を指定したりできます。この例では StaticDisplayLevels プロパテゖを 2 に設定しています。 また、Orientation プロパテゖを "Vertical" から "Horizontal" に変更すると、水平方向に展開されるメニュー となります。 ■SiteMapPath 最後に SiteMapPath をページに配置してみましょう。これはいわゆる「パンくずリスト」と呼ばれるもので、 現在表示しているページがサト内のどの位置にあるのかを示す働きがあります。 SiteMapPath の使い方は簡単です。ツールボックスから SiteMapPath をドラッグ & ドロップすると、自動的 に Web.sitemap の内容を参照して、ドロップしたページに対応するパス (階層状態) を表示します。これまで 説明したコントロールのように、データ ソースを設定する必要はありません。デザンの変更はスマート タグ の [オートフォーマット] から行います。 以下の画面では、movie.aspx に SiteMapPath を配置しただけで、オートフォーマット以外には何も設定を行 っていません。実行すると、現在のページを判断して、サトマップからサトの階層情報を取得して表示しま す。 SiteMapPath を、プロジェクト内の各ページに配置することで、サト構造を示す統一されたユーザー ンタ ーフェスを提供できます。サトに含まれるすべてのページで同じデザンの SiteMapPath を配置するには、 マスター ページを利用すると便利です。マスター ページについては、回を改めて紹介する予定です。 ■まとめ 今回は ASP.NET が提供するナビゲーション コントロールを紹介しました。サトマップを作成することで、 メニューやサトマップ ツリーが簡単に実装できることを学習しました。 次回は、Web サトへのログン、ログゕウトを利用可能にするメンバーシップ機能について学習します。