ユーザーごとにテーマを設定する方法

最終更新日 2006 年 3 月 10 日

サンプルコードのダウンロード (aspnettips_ProfileTheme.msi, 253 KB)
※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

ASP.NET 2.0 の「プロファイル」機能を使うと、ユーザーごとに使用するテーマを切り替えることができます。プロファイル機能については、ユーザーごとに情報を保存、管理する方法で紹介しましたが、このときのサンプルをベースに、ユーザーごとにテーマを設定できるようにしてみます。

次のようなページを作成します（図１）。このページでは、ユーザーが DropDownList コントロールでテーマを選択し、プロファイルを登録すると、該当するテーマの色合いでページが表示されます。

　

　図1 今回作成するページ

今回は、次の手順でページを作成します。

web.config ファイルの編集
コントロールの配置
テーマの作成
テーマを反映させる処理の追加
実行

(1) web.config ファイルの編集

「ユーザーごとに情報を保存、管理する方法」で作成したサンプルをーベースに、プロファイル機能を拡張します。web.config ファイルの <profile> と </profile> の間に、次の 1 行を追加します。


      <profile>
        <properties>
          <add name="Name" type="System.String" />
          <add name="LastAccess" type="System.String" />
          <add name="color" defaultValue="blue" type="System.String"/>
        </properties>
      </profile>

リスト1 web.config

テーマの情報を color という名前のプロファイルに保存します。デフォルト値として "blue" を設定しておきます。

(2) コントロールの配置

TextBox1 と [プロファイルの登録] ボタンの間に、DropDownList コントロールを配置します（図２）。

　

　図2 DropDownList コントロールの配置

この DropDownList コントロールの ID は、デフォルトの DropDownList1 のままでかまいません。そして、Items プロパティの [...] ボタンを押して「ListItem コレクションエディタ」を表示し、メンバを次のように登録します。

DropDownList コントロールの Items プロパティ

メンバ	プロパティ	設定値
-	Text	-
-	Value	-
blue	Text	blue
blue	Value	blue
red	Text	red
red	Value	red

(3) テーマの作成

Web サイトの仮想フォルダ内に App_Themes というフォルダを用意し、その中にさらにテーマ名ごとにフォルダを作成します。
Visual Studio 2005 のソリューションエクスプローラ内で、仮想フォルダを右クリックし、ポップアップメニューから [ASP.NET フォルダの追加] - [Theme] を選択します。App_Themes\テーマ1 というフォルダが作成されるので、フォルダ名「テーマ1」を「blue」に変更します（図３）。

　

　図3 blue フォルダ

同じ方法で、もう一つ App_Themes\red というフォルダも作成します。
次に、テーマごとにスタイルシートを作成します。blue フォルダで、[新しい項目の追加] を選択し、ダイアログボックスで「スタイルシート」を選んでください。ファイル名は、デフォルト (StyleSheet.css) のままでかまいません。

同様に、red フォルダの下にもスタイルシート (red\StyleSheet.css) を作成します。

スタイルシートの書き方は、一般的な CSS の書き方と同じです。今回は、次リストのようにページの背景色を定義しています。


body {background-color:#eeeeff;
}

リスト2 blue\StyleSheet.css


body {background-color:#ffeeee;
}

リスト3 red\StyleSheet.css

ページの背景色を、blue\StyleSheet.css では青系色に、red\StyleSheet.css では赤系色にしています。

(4) テーマを反映させる処理の追加

テーマを反映させる処理を Default.aspx.vb ファイルの Page_PreInitイベントプロシージャに記述します。


    Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
        Dim ThemeName As String = Request("DropDownList1")

        If ThemeName <> String.Empty Then
            Profile.color = ThemeName
        End If

        If Profile.color = "blue" Or Profile.color = "red" Then
            Page.Theme = Profile.color
        End If
    End Sub

リスト4 Default.aspx.vb

(5) 実行

実行してみます。TextBox コントロールに適当な名前を入力し、さらにテーマを red に選択して [プロファイルの登録] ボタンを押すと、ページの背景色が赤系色になったはずです（図４）。

　

　図4 実行したところ 1

そして、Default.aspx をいったん閉じて、もう 1 度表示させると、また同じテーマが使われるので赤系色の背景で表示されます。。

　

　図5 実行したところ 2

このように、ASP.NET 2.0 のプロファイル機能とテーマ機能を使うことで、簡単にユーザーごとにページデザインを変更できます。