.NET TIPS

[ASP.NET]アプリケーション共通のヘッダ/フッタを追加するには?

山田 祥寛
2004/05/07

 Webサイトをデザインする際、各ページのヘッダやメニュー、フッタ部などを共通化したいというケースは少なくない。これは、企業サイトならば特定のロゴ・デザインをユーザーに定着付けるという意味合いもある一方で、Webページのユーザビリティを向上させる施策でもある。固定位置に決まったメニューやナビゲート・バーがあることで、ユーザーはサイト上の階層構造をほとんど意識することなく、目的のページにアクセスすることができる。

 また、ヘッダ/フッタの共通化は、ユーザーだけではなく、開発する側にとってもメリットがある。サイトの外枠が決まっていることで、本当に重要なコンテンツ部分の構築に集中できるからだ。

 ASP.NETでは、別稿「TIPS:[ASP.NET]アプリケーション共通のロギングを行うには?(Global.asax編)」でも紹介したGlobal.asaxを利用することで、アプリケーション共通のヘッダ/フッタを簡単に管理可能である。もっとも、ただ単純に固定的なヘッダ/フッタを出力するだけでは、サンプルとして面白くないので、ここではデータベース上で管理されたページ情報をもとに、ページ・タイトルや<meta>タグを合わせて出力してみることにしよう。

 SEO(検索エンジン最適化)という観点では、<title>タグや<meta>タグのKeyword属性、Description属性に適切な値をセットしておくことは重要なポイントの1つだ。多くのページを個別に管理していると、思わず抜けがちになるこういった情報も、データベース化することでより厳密に管理できるようになる。

1. ページ情報管理用のテーブルを用意する

 コーディングに先立って、ページ情報を管理するテーブルを用意しておこう。

フィールド名 データ型 概要
url VARCHAR(100) URL(主キー)
title VARCHAR(50) ページ・タイトル
keywords VARCHAR(100) カンマ区切りのキーワード
description VARCHAR(255) ページの詳細情報
ページ情報管理用のpageInfoテーブルのフィールド・レイアウト

 また、作成したテーブル内にテスト用のデータとして、仮に以下のデータを入力しておく。

フィールド名 データ
url /netIns/sample.aspx
title 共通ヘッダ/フッタを付加する
keywords Global.asax,ポータル
description 共通ヘッダ/フッタをアプリケーションの全ファイルに付加
ページ情報管理用のpageInfoテーブルのテスト用データ

2. Global.asaxを作成する

 それでは、以下で具体的なコードを見てみることにしよう。Application_OnBeginRequestイベント・プロシージャでヘッダ部の生成を、Application_OnEndRequestイベント・プロシージャでフッタ部の生成を、それぞれ行えばよい。

 Application_OnBeginRequestイベントはリクエスト処理の最初に発生し、Application_OnEndRequestイベントはリクエスト処理の最後に発生する。よって、リクエストの実処理をはさんで、コンテンツの先頭と末尾に出力データを付加できるというわけだ。

<%@ Application Description="Insider.NET Sample" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script Language="C#" runat="Server">
Hashtable objTbl=new Hashtable();
void Application_OnBeginRequest(Object sender, EventArgs e) {
  // リクエストURLをキーに、ページ情報がデータベースに存在するか
  // どうかを判定するフラグ。初期値はfalseとしておく
  objTbl[Request.RawUrl] = false;
  SqlConnection objDb=new SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=nettips");
  // リクエストURLをキーにpageInfoテーブルからページ情報を取得
  SqlCommand objCom = new SqlCommand("SELECT * FROM pageInfo WHERE url=@url",objDb);
  objCom.Parameters.Add("@url",Request.RawUrl);
  objDb.Open();
  SqlDataReader objDr=objCom.ExecuteReader();
  // データベースからページ情報を取得できた場合にのみヘッダ部の
  // HTMLを生成。また、Hashtableで管理されたフラグをtrueに変更する
  if (objDr.Read()) {
    objTbl[Request.RawUrl] = true;
    Response.Write("<html>");
    Response.Write("<head>");
    Response.Write("<title>" + objDr.GetString(1) + "</title>");
    Response.Write("<meta http-equiv='Content-Type' content='text/html;charset=x-sjis' />");
    Response.Write("<meta name='keywords' content='" + objDr.GetString(2) + "' />");
    Response.Write("<meta name='description' content='" + objDr.GetString(3) + "' />");
    Response.Write("</head>");
    Response.Write("<body>");
  }
  objDr.Close();
  objDb.Close();
}
void Application_OnEndRequest(Object sender, EventArgs e) {
  // Hashtable内の対応するフラグがtrueの場合のみ
  // フッタ部のHTMLを出力
  if ((bool)objTbl[Request.RawUrl]) {
    Response.Write("</body>");
    Response.Write("</html>");
  }
}
</script>
アプリケーション共通のヘッダとフッダを付加するGlobal.asax(C#)
 
<%@ Application Description="Insider.NET Sample" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script Language="VB" runat="Server">
  ' リクエストURLをキーに、ページ情報がデータベースに存在するか
  ' どうかを判定するフラグ。初期値はFalseとしておく
Dim objTbl=New Hashtable()
Sub Application_OnBeginRequest(sender As Object, e As EventArgs)
  objTbl.Item(Request.RawUrl)=False
  ' リクエストURLをキーにpageInfoテーブルからページ情報を取得
  Dim objDb As New SqlConnection("Data Source=(local);User ID=sa;Password=sa;Persist Security Info=True;Initial Catalog=nettips")
  Dim objCom As New SqlCommand("SELECT * FROM pageInfo WHERE url=@url",objDb)
  objCom.Parameters.Add("@url",Request.RawUrl)
  objDb.Open()
  Dim objDr As SqlDataReader =objCom.ExecuteReader()
  ' データベースからページ情報を取得できた場合にのみヘッダ部の
  ' HTMLを生成。また、Hashtableで管理されたフラグをTrueに変更する
  If objDr.Read() Then
    objTbl.Item(Request.RawUrl)=True
    With Response
      .Write("<html>")
      .Write("<head>")
      .Write("<title>" & objDr.GetString(1) & "</title>")
      .Write("<meta http-equiv='Content-Type' content='text/html;charset=x-sjis' />")
      .Write("<meta name='keywords' content='" & objDr.GetString(2) & "' />")
      .Write("<meta name='description' content='" & objDr.GetString(3) & "' />")
      .Write("</head>")
      .Write("<body>")
    End With
  End If
  objDr.Close()
  objDb.Close()
End Sub
Sub Application_OnPostRequestHandlerExecute(sender As Object, e As EventArgs)
  ' Hashtable内の対応するフラグがTrueの場合のみ
  ' フッタ部のHTMLを出力
  If CType(objTbl.Item(Request.RawUrl),Boolean) Then
    With Response
      .Write("</body>")
      .Write("</html>")
    End With
  End If
End Sub
</script>
アプリケーション共通のヘッダとフッダを付加するGlobal.asax(VB.NET)

 Global.asax内でHashtableクラスによるフラグの管理を行っているのは、フッタを出力する際に再びデータベースを参照しなくて済むようにするためだ。これによって、何度もデータベースへ接続する必要がなくなるので、ページ生成のオーバーヘッドを抑制することができる。

3. sample.aspxを生成する

 sample.aspxはあくまで動作確認用のWebフォームなので、ここでは、ごくごく最低限の記述にとどめることとする。なお、Visual Studio .NETを使用している場合には、自動的に生成された固定的なヘッダ、フッタ部分を手動で取り除いておく必要がある。

<script Language="C#" runat="Server">
  …任意のコード…
</script>
sample00
動作確認用のWebフォームsample.aspx

 では、具体的にsample.aspxをブラウザから参照してみよう。ブラウザの[ソースの表示]を利用して出力されたHTMLソース・コードを参照してみると、sample.aspxで記述されたコンテンツの前後にヘッダ/フッタが付加された、以下のようなソース・コードを確認できるはずだ。ソース・コードは見やすいように、適宜改行を入れてある。

<html>
<head>
<title>共通ヘッダ・フッタを付加する</title>
<meta http-equiv='Content-Type' content='text/html;charset=x-sjis' />
<meta name='keywords' content='Global.asax,ポータル' />
<meta name='description' content='共通ヘッダ/フッタをアプリケーションの全ファイルに付加' />
</head>
<body>
sample00
</body>
</html>

 ここでは、ごく単純な例を挙げるにとどめるが、もちろん、より複雑なメニューやナビゲート・バー、そのほかデザインの構築にも、上記サンプルは応用できる。ぜひ、ご自分のサイトでも活用してみてほしい。End of Article

カテゴリ:Webフォーム 処理対象:Global.asax
関連TIPS:[ASP.NET]アプリケーション共通のロギングを行うには?(Global.asax編)
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]ページのタイトルやメタ情報を動的に変更するには?
[ASP.NET]アプリケーション共通のロギングを行うには?(Global.asax編)
[ASP.NET]ポストとポストバックの違いは?
[ASP.NET]データベースの内容をクライアントにダウンロード提供するには?
[ASP.NET]ナビゲーションAPIで前後ページへのナビゲーション・バーを作成するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間