送信

MSDN スキルアップセンター > ホーム > Column This Week > 「300 秒でズバリ !!」 & 「10 行でズバリ !!」シリーズ > Visual Studio 2005 版 > ASP.NET > 10 行でズバリ !! Web ページの共通化 (マスタページ) (VB)

10 行でズバリ !! Web ページの共通化 (マスタページ) (VB)

マイクロソフト株式会社デベロッパー & プラットフォーム統括本部
エバンジェリスト近藤和彦

最終更新日 2006 年 1 月 18 日

このコンテンツのポイント

複数の Web ページで共通的なデザインや機能をテンプレート化する方法を理解する。

今回紹介するコード

＜Page2.aspx.vb＞

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim textBox1OfMasterPage As TextBox
    textBox1OfMasterPage = Master.FindControl ("TextBox1")
    Label1.Text = "Page 2 : " + textBox1OfMasterPage.Text
End Sub

今回のシステム要件

Visual Studio 2005 すべてのエディション、または Visual Web Developer 2005
画面キャプチャは、Visual Studio 2005 Team Suite を利用した場合の例となります。

はじめに

多くの Web サイトでは、ヘッダ、フッタ、メニューなど、複数の Web ページで共通的なデザインや機能を持っています。

ASP.NET 2.0 のマスタページは、このような共通部分をテンプレート化することができ、これによって各 Web ページで重複した実装を行う必要がなくなるとともに、修正箇所が 1 箇所に集約されるため保守性も向上します。

ここでは、このマスタページを活用した Web ページの共通化の方法について解説します。

作成するサンプルアプリケーションの説明

ここでは、共通的なデザインを持つ 1 つのマスタページを作成し、2 つの Web ページでこれを共有します。

Web ページ 1 (Page1.aspx)

Web ページ 2 (Page2.aspx)

図 1. マスタページを活用した Web ページの例

まず初めに、事前準備として、新しい Web サイトを作成します。
Web サイトの新規作成方法については、「10 行でズバリ !! ASP.NET Web フォームによる Web アプリケーション開発 (VB)」を参考にして下さい。

マスタページの作成

共通デザインや機能を提供するマスタページを作成します。
マスタページを作成するには、Visual Studio のメニューより、 [ファイル] － [新規作成] － [ファイル] を選択し、表示される [新しい項目の追加] ダイアログから、 [マスタページ] を選択します。

図 2. マスタページの作成

名前: MasterPage.master
言語: Visual Basic

拡張子 ".master" のマスタページが追加されます。
マスタページの作成方法は特に難しいことはなく、以降は、基本的に通常の Web ページを作成するのと同じ要領です。ドラッグアンドドロップで UI コントロールを配置し、UI コントロールをダブルクリックすることで処理ロジックを記述することができます。

各 Web ページ独自のコンテンツについては、ContentPlaceHolder コントロールを貼り付け、その表示領域を定義します。マスタページを作成した場合、デフォルトでひとつの ContentPlaceHolder コントロールが貼り付けられています。

今回は、デザイナ画面より ContentPlaceHolder コントロールの上部に、以下の実装を行います。

「ASP.NET 2.0 マスタページ」という文字を記述
その下に TextBox コントロール (ID=TextBox1) を貼り付け

図 3. マスタページのデザイン

コンテンツページの作成

各 Web ページ (コンテンツページ) を作成する場合、通常の Web ページと同様、 [Web フォーム] を選択します。

Visual Studio のメニューより [ファイル] － [新規作成] － [ファイル] を選択し、 [新しい項目の追加] ダイアログから [Web フォーム] を選択しますが、その際、ダイアログ下部の [マスタページを選択する] チェックボックスをチェックします。

図 4. コンテンツページの作成

名前: Page1.aspx
言語: Visual Basic
マスターページを選択する: チェックする

[追加] ボタンをクリックすると、 [マスタページを選択して下さい] ダイアログが表示されます。
ここから、先ほど作成したマスタページを選択します。

図 5. マスタページの選択

[OK] ボタンをクリックすると、Web ページが追加されます。
マスタページのデザインがグレーアウトされた状態で表示され、最終的な Web ページのデザインを確認しながら、それぞれのコンテンツページの開発ができます。

図 6. コンテンツページのデザイン

後は、ContentPlaceHolder コントロールで定義した領域に対して、通常の Web ページと同様、ドラッグアンドドロップで UI コントロールを配置し、UI コントロールをダブルクリックすることで処理ロジックを記述することができます。

ここでは、単純に「ASP.NET 2.0 コンテンツページ」という文字のみを記述します。

図 7. コンテンツページのデザイン (Page 1)

動作確認

それでは実行してみましょう。

Visual Studio のメニューより、 [デバッグ] － [デバッグなしで開始] を選択すると、ブラウザが起動され、コンテンツページ (Page1.aspx) が表示されます。

この際、マスタページのデザインと、実際のコンテンツページのデザインがマージされ、最終的にブラウザ上に表示されます。

図 8. 実行結果 (Page1.aspx)

以上が、マスタページを利用した基本的な Web ページの作成方法となります。

マスタページのデータを取得する

もう少しマスタページの機能についてみてみましょう。マスタページは、単純に Web ページの共通デザインだけでなく、共通機能も実装することができます。

ここでは、マスタページ上におかれたテキストボックスの値を、コンテンツページから取得する方法について解説します。

新しいコンテンツページ (Page2.aspx) を作成します。
独自コンテンツの表示領域 (ContentPlaceHolder コントロール) に以下の UI コントロールを貼り付けます。

Label コントロール (ID はデフォルトのLabel1 を使用)
Button コントロール (ID はデフォルトのButton1 を使用)

図 9. コンテンツページ (Page2.aspx) のデザイン

ボタン (Button1) がクリックされた時の処理として、下記のコードを記述します。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim textBox1OfMasterPage As TextBox
    textBox1OfMasterPage = Master.FindControl ("TextBox1")
    Label1.Text = "Page 2 : " + textBox1OfMasterPage.Text
End Sub

Master オブジェクトによって、コンテンツページからマスタページのデータを操作することができます。

ここでは FindControl メソッドによって、ID が "TextBox1" というマスタページ上の TextBox コントロールを検索してそのオブジェクトを取得し、ローカル変数として作成した TextBox コントロールに格納しています。

後はこの TextBox コントロールに設定されている文字列を加工して、Web ページの Label1 に設定しています。

それでは、実行してみましょう。

ブラウザのアドレスにPage2.aspx のパスを入力して、Page2.aspx を表示します。
マスタページのテキストボックスに任意の文字列を入力し、Web ページのボタンをクリックします。すると、下記のようにマスタページの文字列が加工されてラベル上に表示されることが確認できます。

図 10. 実行結果 (Page2.aspx)

おわりに

マスタページを活用し、複数のWeb ページでデザインや機能を共通化する方法について解説しました。

マスタページを使わずにそれぞれのページごとに共通部分を実装した場合、変更が発生すると、すべてのページを修正しなければなりません。これは、手間がかかる上に、修正漏れが発生するといった危険性もあります。

マスタページによって、よりシンプル、かつ直感的に共通化を行うことができ、これによって、

冗長な機能やデザインを作成したり、修正するための手間がなくなる
共通機能と個別機能を分けて並行開発できる
既に実績ある共通部品を再利用することによって品質の向上を期待することができる

などのメリットが考えられます。

補足事項

マスタページの基本的な作成方法について解説してきました。

このように、基本的には Visual Studio が必要な定義や作業を自動的に行うため、マスタページの仕組みについて特に意識しなくても開発は可能です。しかし、より緻密な制御を行う場合には、やはりマスタページの仕組みについて理解する必要があるため、ここで補足事項として触れます。

まず、マスタページについてみてみましょう。

Visual Studio を [ソース] ビューに切り替え、マスタページの HTML ソースを確認します。
通常の Web フォームと同じような HTML ソースが定義されていますが、ポイントが 2 点あります。

まず、先頭行に Master ディレクティブ (<%@Master ...%>) があることを確認することができます。
<<%@Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
Master ディレクティブはこのページがマスタページであることを示し、マスタページに関する設定を行うことができます。
さらに、本文中に ContentPlaceHolder コントロール (<asp:ContentPlaceHolder>) があることを確認することができます。
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"%>
ContentPlaceHolder コントロールは、いわばコンテンツを表示するための予約域です。実際にはこの ContentPlaceHolder コントロールは 1 つのマスタページの中に複数定義することができます。

次に、コンテンツページについてみてみましょう。

Visual Studio を [ソース] ビューに切り替え、コンテンツページの HTML ソースを確認します。
コンテンツページについてはポイントが 3 点あります。

通常の Web ページとは異なり、<html>、<head>、<body> タグは定義しません。実際のWeb ページ表示時には、マスタページの定義が適用されます。
Page ディレクティブ (<%@Page ... %>) のMasterPageFile にマスタページファイル (.master) の場所を指定します。
<%@Page MasterPageFile="~/MasterPage.master" .... %>

Content コントロール (<asp:Content>) があることを確認することができます。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:Label1 ID="Label1" runat="server" />
        <br/>
        <asp:Button1 ID="Button1" runat="server" Text="Button1" />
</asp:Content>

Content コントロールの中に、各 Web ページ固有のコンテンツを定義します。

マスタページ上の予約域 (ContentPlaceHolder コントロール) との対応づけのために、Content コントロールの ContentPlaceHolderID に、マスタページの該当する ContentPlaceHolder コントロールの ID を指定します。

特に ContentPlaceHolder コントロールを複数定義した場合には、この ID の対応づけが重要な意味を持ちます。

ページのトップへ

Visual C# の内容はこちらに掲載しています。
	10 行でズバリ !! Web ページの共通化 (マスタページ) (C#)

10 行でズバリ !! Web ページの共通化 (マスタ ページ) (VB)