CodeZine(コードジン)

特集ページ一覧

ASP.NETマスターページの小技

Webサイトのデザインやレイアウトの効率的な管理テクニック

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/08/21 14:00

 ASP.NET Webサイトの重要な要素の1つにマスタ-ページがあります。マスターページとは、Webサイトのテンプレートを定義する仕組みであり、これにより開発者はサイトのデザインやレイアウトを集中管理できます。本稿では、マスターページを使う上でのアドバイスと、さまざまなヒントや秘訣を紹介します。

目次

はじめに

 ASP.NET Webサイトの重要な要素の1つにマスターページというものがあります。マスターページとは、簡単に言うとWebサイトのテンプレートを定義する仕組みであり、これによってページ開発者はテンプレートを使うどのページでも変化しない固定的なテンプレート要素と、ページ単位でカスタマイズ可能なテンプレート要素を定義できます。マスターページを使ってサイトのデザインやレイアウトを集中管理すれば、同じルックアンドフィールを継承するページを簡単に追加できます。また、サイトデザインの変更が大幅に簡素化され、<head>要素、フッター、CSSファイルやJavaScriptファイルへの参照など、すべてのページに共通するコンテンツを簡単に追加したり削除したりできます。

 本稿ではマスターページを使う上でのアドバイスと、私がマスターページを長年使ってきて会得したさまざまなヒントや秘訣を紹介します。ともかく読んで知識を増やすことです。マスターページの使い方について別のよい方法やアドバイスがあれば、遠慮なくご一報ください。皆さんのアイデアを本稿に反映させたいと思います。

新しいWebサイトを開始するとき、どのWebページよりも先にマスターページを作ろう

 マスターページはサイトのルックアンドフィールを定義するものなので、サイトのデザインが完成するまでマスターページを作らなくてよいと考えるのはもっともな話です。大抵のプロジェクトでは、サイトのデザインは社内か外注のグラフィックデザイナーの手で作成されます。そのため、サイトのデザインがまだできあがらないうちに開発作業をはじめ、デザインが準備できた時点で初めてASP.NET開発者がマスターページを作成するという順序になることも珍しくはありません。

 新しいASP.NET Webサイトを開始するとき、私はサイトのデザインが準備できていなくてもマスターページを最初に作ることにしています。デザインがもう準備できているときは、そのデザインに基づいてマスターページを実装できます。デザインがまだ準備できていないときは、マスターページのデフォルトのマークアップを使えばよいのです。マスターページに不備な点や多少不細工なところがあっても気にすることはありません。デザインが完成した段階で、いつでもマスターページに手を入れることができます。デザインの完成を待たずにマスターページをすぐ作成することをお勧めする理由は、Visual Studioでは新規のコンテンツページがいとも簡単に追加できるのに対し、マスターページを使用していないASP.NETページをコンテンツページに変換するのはかなり面倒だからです。

 Webサイトに新しいコンテンツページを追加する作業は、WSP(Web Site Project)方式では[マスターページを選択する](Select master page)チェックボックスをオンにすることで行われ、WAP(Web Application Project)方式ではWeb Content Form型の項目を追加することで行われます。どちらの方式でもダイアログボックスが表示され、そこで新しいコンテンツページのマスターページを選択します。一方、ASP.NETページの中にマスターページを使用していないものがある場合、それをコンテンツページに変換するためには、マスターページで定義されているコンテンツページのマークアップを削除し、必要な名前付きコンテンツコントロールを追加し、ページ固有のマークアップを適切なコンテンツコントロールに移動するといった作業が必要です。それほど難しくはありませんが、チェックボックスをオンにしたりWeb Content Form型の項目を選択したりするより面倒なことは確かです。

Webサイトに新しいコンテンツページを追加する(WSP方式の場合)
Webサイトに新しいコンテンツページを追加する(WSP方式の場合)
WSP(Web Site Project)とWAP(Web Application Project)

 Visual StudioはASP.NETプロジェクトとしてWSP(Web Site Project)方式WAP(Web Application Project)方式をサポートしています。WSP方式のプロジェクトを作成するには[ファイル]メニューの[新しいWebサイト]を選択します。この方式ではデフォルトで自動コンパイルが行われます。つまり、ページがブラウザから初めてアクセスされたとき、そのページのコードビハインドクラス(デザインとコードを分離するクラス)に含まれるコードが自動的にコンパイルされます。また、このプロジェクトを構成するファイルはWebサイトのフォルダ構造の中に置かれる一群のファイルによって定義されます。

 WAP方式のプロジェクトを作成するには[ファイル]メニューの[新しいプロジェクト]を選択し、ASP.NETのWAP(Web Application Project)タイプのプロジェクトを作成します。WAP方式では、ページのコードビハインドクラスに含まれるコードはVisual Studio内で[ビルド]メニューを選択して明示的にコンパイルされます。また、WAP方式のプロジェクトを構成するファイルは、ある特定のプロジェクトファイルを使用して定義されます。

 開発者から見て、この2つのプロジェクト方式には、違いがほとんどわからない部分と、かなり違う部分があります。例えば、WSP方式でコンテンツページを作成するには[マスターページを選択する]チェックボックスをオンにしますが、WAP方式で作成するときは[マスターページを選択する]チェックボックスに相当するものがないので、Web Content Form型の項目を選択しなければなりません。

 この2つの方式の基礎を詳しく知りたければ、「Determining What Files Need To Be Deployed」というチュートリアルの「Taking a Trip Down Memory Lane」を参照ください。これはwww.asp.netで私が公開しているASP.NETホスティングに関するチュートリアル(ASP.NET Hosting Tutorials)の16件のチュートリアルの1つです。

マスターページをMasterPage.masterと命名しない方がよい

 WSP(Web Site Project)方式でWebサイトのマスターページを作成するときは、Visual Studioからマスターページの名前としてMasterPage.masterを使うよう勧められます。Visual Studioの勧める名前を使用してマスターページを作成すると、マスターページのコードビハインドクラスもMasterPageと命名され、次のように定義されます。

Partial Class MasterPage
   Inherits System.Web.UI.MasterPage
End Class 

 マスターページのコードビハインドクラスはSystem.Web.UI名前空間のMasterPageクラスを継承することに注意してください。この同じ2つの名前が衝突しないのは、マスターページのコードビハインドクラスとSystem.Web.UI名前空間のMasterPageクラスが別の名前空間に属するからです。

 しかし、強い型定義(strongly-typed)のマスターページ参照をいずれかのコンテンツページから取得しなければならない場合には面倒なことが起こる可能性もあります。これはささいな問題ですが、それでもマスターページにSite.masterといった別の名前を付けて、混乱が生じる余地をなくした方がよいでしょう(偶然ですが、WAP方式のプロジェクトに新しいマスターページを追加するときは、Visual StudioからSite.masterという名前が勧められます。WSPになぜ同じ命名法を使わないのか、私には分かりません)。


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

著者プロフィール

バックナンバー

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

もっと読む

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