ASP.NET の Modernization のバックアップの現在との差分(No.12)

追加された行はこの色です。
削除された行はこの色です。
[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>ASP.NET]]

* 目次 [#b1588e10]
#contents

*概要 [#n1389aec]
以下を行なうことでModernizationが可能と考える。

-NuGet化
-[[OWIN]]化

-RouteConfig

-BundleConfig
--Bundle & Minification
--CDNフォールバック
--[[CDNフォールバック>#s62820fe]]
--画面からのリンクを設定

-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を行なう。
--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
**[[HttpClient>HttpClientの類の使い方#n074732e]]など、BCL 入りした、ものの差替など。 [#x9961993]

 <package id="Microsoft.Net.Http.ja" version="2.0.20710.0" targetFramework="net46" />

-↓に差し替える。
 <package id="System.Net.Http" version="4.3.0" targetFramework="net46" />
 <package id="System.Net.Http.Formatting.Extension" version="5.2.3.0" targetFramework="net46" />

-Nugetの場合、以下でインストールできる。
 Install-Package System.Net.Http
 Install-Package System.Net.Http.Formatting.Extension

*OWIN化 [#m516ea9b]

**[[OWIN]] [#jea128c3]

**[[OWIN化手順]] [#w4fd9095]

*[[RouteConfig>ASP.NET の RouteConfig]] [#k9acbdf0]
-[[ASP.NET MVC]]  4 以降には、既定で実装されている。

-Modernizationは、
--[[ASP.NET Web Forms]]
--[[ASP.NET MVC]] 4 以前

>が対象となる。 

*[[BundleConfig>ASP.NET の BundleConfig]] [#ic37a72e]
-ここでは、以下の様なウェブサイトやWebアプリケーションを作成する~
フロントエンドWebアプリケーションフレームワークのファイル群を
--Bundle & Minification
--CDNフォールバック
--[[CDNフォールバック>#s62820fe]]

>する。

-その他、個別のファイルについては、~
[[ASP.NET Web Forms]] 、 [[ASP.NET MVC]]個別で
--Bundle & Minification
--CDNフォールバック
--[[CDNフォールバック>#s62820fe]]

>する。

**Bundle & Minification [#y67baf40]

***Bootstrap [#o911cc56]
-HTML及びCSSベースのデザインテンプレートとして用意されている。
--タイポグラフィ
--フォーム
--ボタン
--ナビゲーション
--その他構成要素
--JavaScript用拡張
--, etc.

-インストール方法
 Install-Package Bootstrap 

***jQuery [#x4cb13d8]
-jQuery
--ウェブブラウザ用のJavaScriptコードをより容易に記述~
できるようにするために設計された軽量なJavaScriptライブラリ
--インストール方法
 Install-Package jQuery

-jQuery UI
-jQuery UI~
&color(red){Bootstrapと競合する。Bootstrapを優先する場合、インストールしない。};
--インタラクティブなWebサイトを開発するために使用される、~
jQueryをベースにしたJavaScriptのライブラリ
--インストール方法
 Install-Package jQuery.UI.Combined

***modernizr [#x515c105]
ブラウザの機能サポート状況をチェックし、~
HTMLタグにサポート状況を判別できるクラスを付与、~
結果を記録したmodernizrグローバルオブジェクトを生成する。

-インストール方法
 Install-Package Modernizr

***Respond.js [#l6a7ec25]
***Respond.js [#md2cb29d]
IE8以下でレスポンシブWebデザインを実現する。

-インストール方法
 Install-Package Respond

**CDNフォールバック [#s62820fe]
-著名なフロントエンドWebアプリケーションフレームワークのフィアル群はCDNから配布されている。
**[[CDN>CDN（Content Delivery Network）]]フォールバック [#s62820fe]
***機能概要 [#od7ba443]
-著名なフロントエンドWebアプリケーションフレームワークのファイル群はCDNから配布されている。
-これらのファイル群をBundle & Minificationする場合、同時に、CDNフォールバックの設定をすることができる。

*[[RouteConfig>ASP.NET の RouteConfig]] [#k9acbdf0]
-[[ASP.NET MVC]]  4 以降には、既定で実装されている。
***設定の仕方 [#n3004d94]
-ScriptBundle、またはStyleBundleコンストラクターの第2引数に、[[CDN>CDN（Content Delivery Network）]]の URLを追加
-CdnFallbackExpressionプロパティに、ライブラリがロードできたかどうかを判定するための式を指定する。

-Modernizationは、
--[[ASP.NET Web Forms]]
--[[ASP.NET MVC]] 4 以前
***設定の例 [#r90d00d2]
-ScriptBundleの場合~
 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);

>が対象となる。 
-StyleBundleの場合~
インターフェイス上はScriptBundleと同じように設定可能だが、現バージョンでは設定不可能なもよう。

-参考
--ASP.NET MVC 5 主要 JavaScriptライブラリのCDN、Fallbackまとめ - KatsuYuzuのブログ~
http://katsuyuzu.hatenablog.jp/entry/2014/10/02/000330

**リンクのさせ方 [#a42aaaba]
***ヘッダでリンク [#zf481b99]
-CSSファイルはヘッダでリンクする。
-JSファイルもヘッダでリンクする。
--modernizrなど、初期処理に必要なもの。
--・・・

***フッタでリンク [#j2a3d34a]
それ以外のJSファイルはフッタでリンクする。

*個別 の Modernization [#ib7cd2e2]
以下を参照。

**[[ASP.NET Web Forms の Modernization]] [#s1c7b64d]
**[[ASP.NET MVC の Modernization]] [#u1c0d8ee]

*既定のプロジェクト・テンプレートの調査 [#e4fddd28]
*その他 [#ie75cd1a]

**VS2010 [#ne9d5379]
[[OWIN]]もBundle、Routing、Authenticationテンプレートもサポートされていない。
**[[ASP.NET のプロジェクト・テンプレートの変遷]] [#f0cec70e]

***[[ASP.NET Web Forms]] [#x12a00b7]
非[[OWIN]]
**Webサービス開発へ対応する[[ASP.NET Core]] [#k27de135]
Visual Studio、ASP.NET（特にWeb Forms）は、~
エンタープライズ向けであったこともあり、~
Webサービス隆盛の時代の流れに乗り遅れた感はある。

***[[ASP.NET MVC]] [#ob6f19b8]
非[[OWIN]]
***Webサービス [#v7b862c1]
このため、現在は、Webサービスの分野に適合したフレームワークをリリースしている。
-[[ASP.NET MVC]]
-[[ASP.NET Web Pages]]

**VS2012 [#jcd3c4f6]
-[[OWIN]]は、まだサポートされていない。
-Bundle、Routing、Authentication(OAuth)テンプレートがサポートされ始めた。
***Linuxプラットフォーム [#iac494e7]
また、Webサービスの分野で多用されるLinuxプラットフォーム上で動作するOSSのランタイムの提供を開始している。

***[[ASP.NET Web Forms]] [#n6268fca]
-非[[OWIN]]
-[[.NET Standard]]
-[[.NET Core]]
-[[ASP.NET Core]]

-以下がサポートされた
--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]
**[[CDN>CDN（Content Delivery Network）]]フォールバック [#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]]
Tags: [[:.NET開発]], [[:ASP.NET]], [[:ASP.NET Web Forms]], [[:OWIN]], [[:NuGet]], [[:移行]]