| |
|
.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>
|
ここでは、ごく単純な例を挙げるにとどめるが、もちろん、より複雑なメニューやナビゲート・バー、そのほかデザインの構築にも、上記サンプルは応用できる。ぜひ、ご自分のサイトでも活用してみてほしい。
|
|
generated by
|
|
Insider.NET 記事ランキング
本日
月間
