FC2ブログ

記事一覧

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


今回は 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 以降



1.App_Themes フォルダ

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

aspnet_theme_01.png


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



2.Web.config の実装

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

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


aspnet_theme_02.png
 



3.パスの取得方法

作成したテーマ名のフォルダへのパスを取得できる関数を実装します。
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



4.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が動的に適用されます。

aspnet_theme_03.png


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

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






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




関連記事

コメント

コメントの投稿

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

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

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。