[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]] -[[戻る>ASP.NET の Modernization]] * 目次 [#cb2dcf69] #contents *概要 [#p4222e1f] コチラの内容をまとめた。 -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に追加する必要がある。 <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 AspNet.ScriptManager.bootstrap Install-Package AspNet.ScriptManager.jQuery Install-Package AspNet.ScriptManager.jQuery.UI.Combined 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 { // バンドルの詳細については、http://go.microsoft.com/fwlink/?LinkID=303951 を参照してください。 public static void RegisterBundles(BundleCollection bundles) { 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")); // これらのファイルには明示的な依存関係があり、ファイルが動作するためには順序が重要です 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").Include( "~/Scripts/modernizr-*")); ScriptManager.ScriptResourceMapping.AddDefinition( "respond", new ScriptResourceDefinition { Path = "~/Scripts/respond.min.js", DebugPath = "~/Scripts/respond.js", }); } } -BundleConfigを呼び出す。~ Global.asax or Startup から BundleConfig.RegisterBundlesメソッドを呼び出す。 public class Startup { public void Configuration(IAppBuilder app) { // アプリケーションの設定方法の詳細については、http://go.microsoft.com/fwlink/?LinkID=316888 を参照してください // アプリケーションのスタートアップで実行するコードです RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } } -CSSについては、Bundle.configに定義する。 <?xml version="1.0" encoding="utf-8" ?> <bundles version="1.0"> <styleBundle path="~/Content/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の場合~ 以下のように、「CdnFallbackExpression」を使用する。 ScriptBundle jquery = new ScriptBundle( "~/bundles/jquery", "http://ajax.aspnetcdnn.com/ajax/jQuery/jquery-2.0.0.min.js") .Include("~/Scripts/jquery-{version}.js"); jquery.CdnFallbackExpression = "window.jQuery"; bundles.Add(jquery); **リンクのさせ方 [#xbdfa1a0] [[初期設定>#s5b54b4c]]が完了していること。 ***JS [#id2a0390] Scripts.Renderメソッドと<asp:ScriptManager>タグを使用する方法がある。~ しかしながら、これら2つの方法の適切な使用が明確でないという問題がある。 -Scripts.Render <title>・・・</title> <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> </asp:PlaceHolder> -ScriptManager <body> <form runat="server"> <asp:ScriptManager 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="~/Content/css" /> **asp:ScriptReferenceのカスタマイズ [#q7b86fa2] asp: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" }); *[[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 を参照してください // アプリケーションのスタートアップで実行するコードです 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 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]]