- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>ASP.NET の Modernization]]
* 目次 [#cb2dcf69]
#contents
*概要 [#p4222e1f]
コチラの内容をまとめた。
-Modify template : Add the Startup class to template to correspond to the OWIN pipeline.~
https://github.com/OpenTouryoProject/OpenTouryo/issues/198
-Modify template : Link Bootstrap and jQuery from the template.~
https://github.com/OpenTouryoProject/OpenTouryo/issues/199
-Modify template : Correspond the JavaScript and CSS to bundle and minify, or to CDN.~
https://github.com/OpenTouryoProject/OpenTouryo/issues/200
-Modify template : Maintenance of the master page.~
https://github.com/OpenTouryoProject/OpenTouryo/issues/201
*[[共通項>ASP.NET の Modernization]] [#le39c2c1]
[[コチラ>ASP.NET の Modernization]]を参照。
*[[BundleConfig>ASP.NET の BundleConfig]] [#b48396de]
基本的な事項は、[[コチラ>ASP.NET の BundleConfig]]を参照。
**初期設定 [#s5b54b4c]
***Optimization.WebFormsをインストールする。 [#v05e2164]
[[ASP.NET Web Forms]]では、追加で以下のインストールが必要になる。
Install-Package Microsoft.AspNet.Web.Optimization.WebForms
***Web.configに定義を追加する。 [#y511bb29]
また、インストール後に以下の定義をWeb.configに追加する必要がある。
***[[Web.config>#nf687ad7]]に定義を追加する。 [#y511bb29]
また、インストール後に以下の定義を[[Web.config>#nf687ad7]]に追加する必要がある。
<pages>
<namespaces>
<add namespace="System.Web.Optimization" />
</namespaces>
<controls>
<add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
</controls>
</pages>
</system.web>
**Bundle & Minification [#wefbae22]
以下のように、[[ASP.NET Web Forms]]用の追加の[[BundleConfig>ASP.NET の BundleConfig]]を行う。
***インストール [#neb771b9]
[[共通項>ASP.NET の Modernization]]でインストールしたパッケージに加え以下をインストールする。
Install-Package Microsoft.AspNet.ScriptManager.MSAjax
Install-Package Microsoft.AspNet.ScriptManager.WebForms
***定義方法 [#z6ec33f3]
-定義対象
--WebFormsJs~
詳細は不明。情報が殆ど無い。
---WebForms.js
---WebUIValidation.js
---MenuStandards.js
---Focus.js
---GridView.js
---DetailsView.js
---TreeView.js
---WebParts.js
--MsAjaxJs~
JS file related to ASP.NET Ajax
---MicrosoftAjax.js
---MicrosoftAjaxApplicationServices.js
---MicrosoftAjaxTimer.js
---MicrosoftAjaxWebForms.js
-設定
--BundleConfigを追加する。~
(最新の[[ASP.NET Web Forms]]プロジェクト・テンプレートからBundleConfigを自動生成して入手)。
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
BundleTable.EnableOptimizations = true;
BundleTable.Bundles.UseCdn = true; // same as: bundles.UseCdn = true;
// ( new ScriptBundle("~/XXXX") のパスは実在するpathと被るとRender時にバグる。
// なので、bundlesと実在しないpathを指定している(CSSも同じbundlesを使用する)。
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/Scripts/app/Site.js"));
bundles.Add(new ScriptBundle("~/bundles/otr").Include(
"~/Scripts/otr/common.js",
"~/Scripts/otr/ie_key_event.js",
"~/Scripts/otr/else.js"));
// こちらのCDNフォールバック設定はScriptManager内で行われているため不要
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
// こちらのCDNフォールバック設定はScriptManager内で行われているため不要
// これらのファイルには明示的な依存関係があり、ファイルが動作するためには順序が重要です
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
// 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備ができたら、
// http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。
bundles.Add(new ScriptBundle(
"~/bundles/modernizr",
"//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js") // min 無し
{
CdnFallbackExpression = "window.Modernizr"
}.Include("~/Scripts/modernizr-*"));
ScriptManager.ScriptResourceMapping.AddDefinition(
"respond",
new ScriptResourceDefinition
{
Path = "~/Scripts/respond.min.js",
DebugPath = "~/Scripts/respond.js",
CdnPath = "//ajax.aspnetcdn.com/ajax/respond/1.4.2/respond.min.js",
CdnDebugPath = "//ajax.aspnetcdn.com/ajax/respond/1.4.2/respond.js",
CdnSupportsSecureConnection = false,
LoadSuccessExpression = "window.respond"
});
}
}
-BundleConfigを呼び出す。~
Global.asax or Startup から BundleConfig.RegisterBundlesメソッドを呼び出す。
public class Startup
{
public void Configuration(IAppBuilder app)
{
// アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください
// アプリケーションのスタートアップで実行するコードです
// URLルーティングの登録
RouteConfig.RegisterRoutes(RouteTable.Routes);
// バンドル&ミニフィケーションの登録
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
-CSSについては、Bundle.configに定義する。
<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
<styleBundle path="~/bundles/css">
<include path="~/Content/bootstrap.css" />
<include path="~/Content/Site.css" />
</styleBundle>
</bundles>
**CDNフォールバック [#s8ee8670]
***ScriptManager [#x116b8c6]
[[ASP.NET Web Forms]]ではScriptManagerにCDNフォールバック機能が実装されている。
-アセンブリから取得する場合はCDNフォールバックの定義は不要。
-以下の場合は、CDNフォールバックの定義が必要になる。
--自前のScriptManager定義を使用する場合
--CDNフォールバック動作をカスタマイズする場合
***ScriptBundle [#ef4a1813]
その他、[[ASP.NET MVC]]と同様に、ScriptBundleクラスで、~
個別にCDNフォールバックの定義を行なうこともできる。
***定義方法 [#s25dcf4f]
詳しくは、[[コチラ>https://github.com/OpenTouryoProject/OpenTouryo/issues/200]]を
-[[ScriptManagerの場合>#q7b86fa2]]
-[[ScriptBundleの場合>ASP.NET の Modernization#s62820fe]]
**リンクのさせ方 [#xbdfa1a0]
[[初期設定>#s5b54b4c]]が完了していること。
***JS [#id2a0390]
Scripts.Renderメソッドと<asp:ScriptManager>タグを使用する方法がある。
-Scripts.Render
--Header
<title>・・・</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
</asp:PlaceHolder>
--Footer
<%: Scripts.Render("~/bundles/XXXX") %>
-ScriptManager
<body>
<form runat="server">
<asp:ScriptManager EnableCdn="true" runat="server">
<Scripts>
<%--ScriptManager のバンドル スクリプトの詳細については、http://go.microsoft.com/fwlink/?LinkID=301884 を参照してください --%>
<%--Framework スクリプト--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--サイト スクリプト--%>
</Scripts>
</asp:ScriptManager>
***CSS [#f1858a71]
webopt:bundlereferenceと言うタブを使用するもよう。
<title>・・・</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/bundles/css" />
**ScriptReference [#r2152a06]
***カスタマイズ [#q7b86fa2]
ScriptReferenceは、jQueryなどのファイルのバージョンとCDNを指定できない。~
ただし、次のようにマッピングをカスタマイズすれば、動作をカスタマイズして任意のCDNから任意のバージョンを取得できる。
var mapping = ScriptManager.ScriptResourceMapping;
// Map jquery definition to the Google CDN
mapping.AddDefinition("jquery", new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-2.0.0.min.js",
DebugPath = "~/Scripts/jquery-2.0.0.js",
CdnPath = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.js",
CdnSupportsSecureConnection = true,
LoadSuccessExpression = "window.jQuery"
});
***ScriptBundleとの関連 [#r10bf580]
同じような疑問を持つ人がいる。
-Optimizing ScriptManager | The ASP.NET Forums~
https://forums.asp.net/t/2027312.aspx?Optimizing+ScriptManager
-asp.net - VS2012 - Web Forms - Bundling Confusion - Stack Overflow~
http://stackoverflow.com/questions/12290537/vs2012-web-forms-bundling-confusion
以下に回答がある。
-ASP.NET 4.5 ScriptManager Improvements in WebForms | .NET Web Development and Tools Blog~
https://blogs.msdn.microsoft.com/webdev/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms/
-ASP.NET 4.5 ScriptManager Improvements in WebForms – My.Ramblings~
https://blogs.msdn.microsoft.com/pranav_rastogi/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms/
--MsAjaxJs
---ScriptManager
ScriptManager.ScriptResourceMapping.AddDefinition("MsAjaxBundle", new ScriptResourceDefinition
{
Path = "~/bundles/MsAjaxJs",
CdnPath = "http://ajax.aspnetcdn.com/ajax/4.5/6/MsAjaxBundle.js",
LoadSuccessExpression = "window.Sys",
CdnSupportsSecureConnection = true
});
PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjax.js", "window.Sys && Sys._Application && Sys.Observer");
---ScriptBundle
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
・・・
--WebFormsJs
---ScriptManager
ScriptManager.ScriptResourceMapping.AddDefinition("WebFormsBundle", new ScriptResourceDefinition
{
Path = "~/bundles/WebFormsJs",
・・・
---ScriptBundle
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
・・・
--PreApplicationStartCode
---PreApplicationStartCode クラス (System.Web.WebPages.Razor)~
https://msdn.microsoft.com/ja-jp/library/system.web.webpages.razor.preapplicationstartcode.aspx
>この型/メンバーは、.NET Framework インフラストラクチャをサポートします。~
独自に作成したコードから直接使用するためのものではありません。
結論としては、
-ScriptManagerの中から、ScriptBundleを組み合わせて使っている。
-PreApplicationStartCodeは、ScriptManager内部の実装であり、~
ScriptManager内でCDNフォールバックも定義されている。
となる。
*[[RouteConfig>ASP.NET の RouteConfig]] [#z952e103]
基本的な事項は、[[コチラ>ASP.NET の RouteConfig]]を参照。
**機能概要 [#sfdb6d92]
[[ASP.NET Web Forms]]の[[RouteConfig>ASP.NET の RouteConfig]]では、~
ファイルの拡張子(*.aspxなど)をURLに付与しなくても済むよう、~
「ASP.NET Friendly URLs」と言う機能を追加できる。
**設定方法 [#d1509727]
***インストール [#g6b3e8d5]
「ASP.NET Friendly URLs」のインストール
Install-Package Microsoft.AspNet.FriendlyUrls
***定義方法 [#l0dd072e]
-RouteConfigを追加する。~
(最新の[[ASP.NET Web Forms]]プロジェクト・テンプレートからRouteConfigを自動生成して入手)。
public static class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
//var settings = new FriendlyUrlSettings();
//settings.AutoRedirectMode = RedirectMode.Permanent;
//routes.EnableFriendlyUrls(settings);
}
}
-RouteConfigを呼び出す。~
Global.asax or Startup から RouteConfig.RegisterRoutesメソッドを呼び出す。
public class Startup
{
public void Configuration(IAppBuilder app)
{
// アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください
// アプリケーションのスタートアップで実行するコードです
// URLルーティングの登録
RouteConfig.RegisterRoutes(RouteTable.Routes);
// バンドル&ミニフィケーションの登録
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
*参考 [#b3a19659]
-Adding Bundling and Minification to Web Forms – RickAndMSFT on Azure & MVC~
https://blogs.msdn.microsoft.com/rickandy/2012/08/14/adding-bundling-and-minification-to-web-forms/
**[[BundleConfig>ASP.NET の BundleConfig]] [#d735cd46]
***Bundle と Minification [#s832ac35]
-ASP.NET Web FormsでOptimizationを活用して、CSSとJavascriptを最適化するには? | sia.tech~
http://sianis.azurewebsites.net/?p=61
-[ASP.NET Optimization] javascript や cssのBundle と Minification 機能を使ってみる - Netplanetes~
http://www.pine4.net/Memo/Article/Archives/545
- ASP.NET 4.5 ScriptManager Improvements in WebForms | .NET Web Development and Tools Blog~
https://blogs.msdn.microsoft.com/webdev/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms/
***CDNフォールバック [#fce577b9]
- ASP.NET アプリの高速化 : CDN の利用とフォールバック対応 – THE TRUTH IS OUT THERE~
https://blogs.msdn.microsoft.com/chack/2013/05/12/asp-net-cdn/
**[[RouteConfig>ASP.NET の RouteConfig]] [#k0869edb]
-ASP.NET Friendly URLsを使う #aspnetjp by @masaru_b_cl | be free~
https://takanosho.wordpress.com/2013/12/21/one-asp-net-advent-calendar-2013/
----
Tags: [[:.NET開発]], [[:ASP.NET]], [[:ASP.NET Web Forms]], [[:OWIN]], [[:NuGet]], [[:移行]]