テーマを設定してCSSやJSを動的に変更する方法 -How to use Theme-

テーマを設定してCSSやJSを動的に変更する方法 -How to use Theme- | asp.net

2019/03/17
20:22

今回は asp.net においてテーマを設定することにより CSS や JS といったスタイルに関連するファイルを動的に変更できるように設定する方法について覚え書きしたいと思います。

CSS は通常はマスターページ等のヘッダーに実装しますが、インライン式で動的に変更できるように記述するとヘッダーではエラーとなることもあります。JSはレンダリングブロックを避けるため、通常はフッターの方に実装しますが、こちらはインライン式で実装することが可能です。

とはいえそれぞれのページにそれぞれの分岐を実装すると後で一括変更することが難しくなる場合もあります。そこで、テーマを利用することにより一括で CSS や JS 等のスクリプトファイルを切り替えることができます。

前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降

１．App_Themes フォルダ

まずは、CSS や JS 等のスクリプトファイルを１ヶ所に集めます。
ただし、どこでも良いわけではありません。asp.net Web アプリケーションのプロジェクト内に App_Themes ファルダがありますので、その下に任意のテーマ名のフォルダを作成します。（※App_Themes フォルダが存在しない場合は、手動で作成しても大丈夫です。）

上記例では、テーマ名を「default」としています。複数のフォルダを作成して切り替えることができるようになります。
ここでは、css / font / images / script フォルダを用意しています。

２．Web.config の実装

次に Web.config に作成したテーマ名の設定をします。
設定はいたって簡単です。pages 要素にテーマ名を設定するだけです。

Web.config

<configuration>
  <system.web>
    <pages theme="default">
      <!-- 途中省略 -->
    </pages>
    <!-- 途中省略 -->
  </system.web>
</configuration>

３．パスの取得方法

作成したテーマ名のフォルダへのパスを取得できる関数を実装します。
Web.config に設定されているテーマ名は Page.Theme で動的に取得することができます。App_themes というフォルダ名も固定なので、それぞれの文字列を連結してパスを返す関数を実装します。この関数を実装することで、JS の動的な切り替えができるようになります。

ThemeManager.vb

Option Explicit On
Option Strict On
Imports System.Web
Imports System.Web.UI
Namespace Library
    Public Class ThemeManager

        ''' <summary>
        ''' 設定されているテーマに紐づくディレクトリを取得する
        ''' </summary>
        ''' <returns></returns>
        Public Shared Function GetThemePath() As String

            Dim page As Page = DirectCast(HttpContext.Current.CurrentHandler, Page)
            Dim themeName As String = page.Theme

            If String.IsNullOrEmpty(themeName) Then
                themeName = "default"
            End If

            Return "~/App_Themes/" + themeName + "/"

        End Function

        ''' <summary>
        ''' 引数のファイルパスを設定されているテーマに基づくパスで取得する
        ''' </summary>
        ''' <returns></returns>
        Public Shared Function GetResolveUrl(ByVal filePath As String) As String

            Dim page As Page = DirectCast(HttpContext.Current.CurrentHandler, Page)
            Return page.ResolveUrl(ThemeManager.GetThemePath + filePath)

        End Function

    End Class
End Namespace

４．CSS と JS の設定方法

基本的にはマスターページや各ページにCSS及びJSの設定を行っていると思いますが、テーマを設定すると CSS のページへの記述は必要なくなります。
JS はレンダリングブロックを考慮してなるべくフッターに近い部分に設定しますが、そのパスは先程のVBで実装したThemeManager をインライン式で呼び出すことにより動的に設定が可能です。

マスターページ

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Base.master.vb" Inherits="AspNetTest.Base" %>
<%@ Import Namespace="BaseLibrary.Library" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="cph_header" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="cph_body" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="cph_footer" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
    <script src="<%=ThemeManager.GetResolveUrl("scripts/jquery-1.10.2.min.js")%>"></script>
    <asp:ContentPlaceHolder ID="cph_script" runat="server">        
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

TestPage.aspx

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Base.Master" CodeBehind="TestPage.aspx.vb" Inherits="AspNetTest.TestPage" %>
<%@ Import Namespace="BaseLibrary.Library" %>
<%@ Register Assembly="BaseLibrary" Namespace="BaseLibrary.Controls" TagPrefix="custom" %>

<asp:Content ID="header" ContentPlaceHolderID="cph_header" runat="server">
</asp:Content>

<asp:Content ID="body" ContentPlaceHolderID="cph_body" runat="server">
</asp:Content>

<asp:Content ID="footer" ContentPlaceHolderID="cph_footer" runat="server">
</asp:Content>

<asp:Content ID="script" ContentPlaceHolderID="cph_script" runat="server">
    <script src="<%=ThemeManager.GetResolveUrl("scripts/slick.min.js")%>"></script>
    <script src="<%=ThemeManager.GetResolveUrl("scripts/slick_ex.js")%>"></script>
    <script src="<%=ThemeManager.GetResolveUrl("scripts/jquery.lazyload.min.js")%>"></script>
    <script src="<%=ThemeManager.GetResolveUrl("scripts/common.js")%>"></script>
    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
        function(evt, args) {
            //Javascriptを再読み込みする
            $.getScript("<%=ThemeManager.GetResolveUrl("scripts/slick_ex.js")%>")
            $.getScript("<%=ThemeManager.GetResolveUrl("scripts/common.js")%>")
    });
</script>
</asp:Content>

あとは実際にWEBアプリケーションを配置する際にWeb.configのテーマ名を変更するとそのテーマに基づくCSSやJSが動的に適用されます。

もしも特定のページのみテーマの適用を除外したい場合は、aspx ページの @Page ディレクティブの EnableTheming 属性を false に設定します。

<%@ Page Title="" Language="vb" AutoEventWireup="false" EnableTheming="False"

最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。

関連記事

インライン式の使用方法 -aspxでのVBコードの記述方法- | asp.net
LazyLoadを使用して画像を遅延読み込みする方法 -How to use LazyLoad.js- | asp.net
テーマを設定してCSSやJSを動的に変更する方法 -How to use Theme- | asp.net
リピーターの明細毎のデータを取得・更新する方法 -How to get the dataitem value of all rows in repeater- | asp.net
多階層構造のリピーターコントロールにデータバインドする方法 -How to bind multilayer dataset to repeater- | asp.net

LazyLoadを使用して画像を遅延読み込みする方法 -How to use LazyLoad.js- | asp.net ホーム画面のスリープを無効にする方法 | Xamarin.Forms

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

　入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

ITブログ時々なんでもブログ