[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]] -[[戻る>ASP.NET]] * 目次 [#b1588e10] #contents *概要 [#n1389aec] 以下を行なうことでModernizationが可能と考える。 -NuGet化 -[[OWIN]]化 -BundleConfig --Bundle & Minification --CDNフォールバック --画面からのリンクを設定 -RouteConfig -個別 の Modernization --ASP.NET Web Forms の Modernization --ASP.NET MVC の Modernization *NuGet化 [#u2fc65e2] NuGetに登録されているライブラリについては、その取得方法をNuGet化する。 **NuGet [#t96ff136] ***NuGetについて [#k94ef67a] [[コチラ>NuGet]]を参照。 ***NuGetの操作手順 [#j5cfb585] [[コチラ>NuGet を使用したパッケージ管理]]を参照。 **既存ライブラリのNuGet化 [#ice601d2] 既存の参照設定してNuGetから取得したものを参照するようにする。 -参照設定を削除する。 -PM> Install-Package XXXXX コマンドにより、パッケージをインストールして参照設定を追加する。 -Gitからは、packagesフォルダを削除できる(ビルド時にpackages.configの内容に従って復元されるため)。 **既存JS、CSSファイル等のNuGet化 [#j5ba45e8] 既存のファイルを削除してNuGetから取得したものを参照するようにする。 -既存のファイルを削除する。 -PM> Install-Package XXXXX コマンドにより、パッケージ(JS、CSSファイル等)を取得する。 -JS、CSSファイルの参照方法を変更する(後述の[[BundleConfig>#ic37a72e]]を使用すると良い)。 -GitにはContent, fonts, Scriptsフォルダを含める。 --ビルド時にpackages.configの内容に従ってpackagesフォルダは復元されるが、ScriptやContentフォルダは復元されないため。 --ScriptやContentフォルダを復元する場合、Visual Studioのパッケージマネージャコンソールから、Update-Packageを行なう。 **既存ライブラリや、JS、CSSファイルの一括更新 [#h1094d04] 以下の手順で、ライブラリや、JS、CSSファイルを更新可能。 -packages.configを最新のものに書き換える。 -一度、packagesフォルダ、Content, fonts, Scriptsフォルダを削除する。 -ソリューションをリビルドすると、 --packagesフォルダが復元される。 --Content, fonts, Scriptsフォルダは復元されない。 -以下のように必要なパッケージに対して、Update-Packageを行う。~ (全てのパッケージに対して機械的にUpdate-Packageを行っても良い。) --Content, fonts, Scriptsフォルダを持つパッケージ ---Content, fonts, Scriptsフォルダを持つパッケージの特定する。~ 復元したpackagesフォルダを調べると、Content, fonts, Scriptsフォルダを持つパッケージを特定できる。 ---Content, fonts, Scriptsフォルダを持つパッケージに対してUpdate-Packageを行う。 --その他、Updateしたいパッケージ~ 必要に応じて、その他のパッケージに対しても、Update-Packageを行う。 **最新のテンプレート実装を参考にパッケージをインストール [#r99965a8] 新しいバージョンでサポートされた機能に必要なパッケージなどを、~ 新しいテンプレートのpackages.config等から読み取って、~ 必要に応じて、Install-Packageによってパッケージをインストールする。 例えば、以下のパッケージをインストールする。 Install-Package Microsoft.Net.Compilers Install-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform *OWIN化 [#m516ea9b] **[[OWIN]] [#jea128c3] **[[OWIN化手順]] [#w4fd9095] *[[BundleConfig>ASP.NET の BundleConfig]] [#ic37a72e] -ここでは、以下の様なウェブサイトやWebアプリケーションを作成する~ フロントエンドWebアプリケーションフレームワークのファイル群を --Bundle & Minification --CDNフォールバック >する。 -その他、個別のファイルについては、~ [[ASP.NET Web Forms]] 、 [[ASP.NET MVC]]個別で --Bundle & Minification --CDNフォールバック >する。 **Bundle & Minification [#y67baf40] ***Bootstrap [#o911cc56] -HTML及びCSSベースのデザインテンプレートとして用意されている。 --タイポグラフィ --フォーム --ボタン --ナビゲーション --その他構成要素 --JavaScript用拡張 --, etc. -インストール方法 Install-Package Bootstrap ***jQuery [#x4cb13d8] -jQuery --ウェブブラウザ用のJavaScriptコードをより容易に記述~ できるようにするために設計された軽量なJavaScriptライブラリ --インストール方法 Install-Package jQuery -jQuery UI --インタラクティブなWebサイトを開発するために使用される、~ jQueryをベースにしたJavaScriptのライブラリ --インストール方法 Install-Package jQuery.UI.Combined ***modernizr [#x515c105] ブラウザの機能サポート状況をチェックし、~ HTMLタグにサポート状況を判別できるクラスを付与、~ 結果を記録したmodernizrグローバルオブジェクトを生成する。 -インストール方法 Install-Package Modernizr ***Respond.js [#md2cb29d] IE8以下でレスポンシブWebデザインを実現する。 -インストール方法 Install-Package Respond **CDNフォールバック [#s62820fe] -著名なフロントエンドWebアプリケーションフレームワークのフィアル群はCDNから配布されている。 -これらのファイル群をBundle & Minificationする場合、同時に、CDNフォールバックの設定をすることができる。 **リンクのさせ方 [#a42aaaba] ***ヘッダでリンク [#zf481b99] -CSSファイルはヘッダでリンクする。 -JSファイルもヘッダでリンクする。 --modernizrなど、初期処理に必要なもの。 --・・・ ***フッタでリンク [#j2a3d34a] それ以外のJSファイルはフッタでリンクする。 *[[RouteConfig>ASP.NET の RouteConfig]] [#k9acbdf0] -[[ASP.NET MVC]] 4 以降には、既定で実装されている。 -Modernizationは、 --[[ASP.NET Web Forms]] --[[ASP.NET MVC]] 4 以前 >が対象となる。 *個別 の Modernization [#ib7cd2e2] 以下を参照。 **[[ASP.NET Web Forms の Modernization]] [#s1c7b64d] **[[ASP.NET MVC の Modernization]] [#u1c0d8ee] *既定のプロジェクト・テンプレートの調査 [#e4fddd28] **VS2010 [#ne9d5379] [[OWIN]]もBundle、Routing、Authenticationテンプレートもサポートされていない。 ***[[ASP.NET Web Forms]] [#x12a00b7] 非[[OWIN]] ***[[ASP.NET MVC]] [#ob6f19b8] 非[[OWIN]] **VS2012 [#jcd3c4f6] -[[OWIN]]は、まだサポートされていない。 -Bundle、Routing、Authentication(OAuth)テンプレートがサポートされ始めた。 ***[[ASP.NET Web Forms]] [#n6268fca] -非[[OWIN]] -以下がサポートされた --BundleConfig --RouteConfig --AuthConfig -モジュール --Bundleには以下のモジュールが使用されている。 ---System.Web.Optimization --Routingには以下のモジュールが使用されている。 ---Microsoft.AspNet.FriendlyUrls --Authentication(OAuth)には以下のモジュールが使用されている。 ---DotNetOpenAuth ---Microsoft.AspNet.Membership ---System.Web.Security.Membership ***[[ASP.NET MVC]] 3 [#wcc124f5] -非[[OWIN]] -Authenticationには以下のモジュールが使用されている。 --OAuthは未サポート --System.Web.Security.Membership ***[[ASP.NET MVC]] 4 [#i2e7df4a] -非[[OWIN]] -以下がサポートされた --BundleConfig --AuthConfig --※ MVCでは、RouteConfig は前からサポートされていた。~ ( v4 から各Configクラスが外出しになっただけ。) -モジュール --Bundleには以下のモジュールが使用されている。 ---System.Web.Optimization --Routingには以下のモジュールが使用されている。 ---System.Web.Routing --Authentication(OAuth)には以下のモジュールが使用されている。 ---DotNetOpenAuth ---Microsoft.Web.WebPages.OAuth ---Webmatrix.Webdata.Websecurity ---System.Web.Security.Membership **VS2013 [#rea2d27d] -[[OWIN]]化対応がなされた。 -様々な認証対応テンプレートも追加された。 ***[[ASP.NET Web Forms]] [#n6268fca] -認証対応テンプレート --組織アカウントの場合~ 恐らくWIFを使用してWS-Federationの認証連携を行う。 --個人アカウントの場合~ ---[[OWIN]]ミドルウェアである[[ASP.NET Identity]]を使用するために[[OWIN]]化対応がなされている。 ---[[ASP.NET Identity]]によって、外部ログインや、OAuthServer実装もサポートされ始めた。 -[[上記>#n6268fca]]から以下の変更が加えられた。 --認証なし、~ 個人アカウント、組織アカウント、Windows認証~ などの認証テンプレートがサポートされた。 --個人アカウントの場合~ Authenticationは以下のモジュールに変更された。 ---Microsoft.AspNet.Identity.Core ---Microsoft.AspNet.Identity.Owin ---Microsoft.Owin.Security ***[[ASP.NET MVC]] 4 - 5 [#f8de12b5] -変更内容は[[ASP.NET Web Forms>#n6268fca]]と同様。 **VS2015 [#h8e67ca1] [[ASP.NET Core]]がサポートされた。 ***.NET Framework [#gee7e68a] -大枠、[[VS2013>#rea2d27d]]と同じ。 -[[ASP.NET Web Forms]], [[ASP.NET MVC]] 5 ***[[ASP.NET Core]] [#n563b16a] -[[ASP.NET]] 5 & [[ASP.NET MVC]] 6 -[[ASP.NET Core]]用のテンプレートはすべて[[OWIN]]。~ (と言うより、[[ASP.NET Core]]自体が[[OWIN]]互換レイヤーを実装している) **VS2017 [#d4ecdb36] ・・・ *参考 [#gb31eef8] **Bundle & Minification [#ef36e93f] - [ASP.NET Optimization] javascript や cssの Bundle と Minification 機能を使ってみる - Netplanetes~ http://www.pine4.net/Memo/Article/Archives/545 **CDNフォールバック [#xe4f708a] -効果的なフォールバック戦略の作成方法~ https://msdn.microsoft.com/ja-jp/library/hh273396.aspx -jQuery, jQueryUI, Bootstrap利用時のCDNフォールバック対応 | auxak blog~ http://blog.auxak.com/cdn-fallback/ - CDNダウン時のjs/cssのフォールバック | odekakeshimasyo.me~ https://odekakeshimasyo.me/web-cdn-fallback.html - パブリックCDNからのロードに対して、フォールバックを行う - Qiita~ http://qiita.com/jkr_2255/items/6c195a0de5e3ebaf4ac1 ---- Tags: [[:.NET開発]], [[:ASP.NET]], [[:ASP.NET Web Forms]], [[:OWIN]], [[:NuGet]]