「[[マイクロソフト系技術情報 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フォールバック
--画面からのリンクを設定

-個別 の 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によってパッケージをインストールする。

**[[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フォールバック

>する。

-その他、個別のファイルについては、~
[[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~
&color(red){Bootstrapと競合する。Bootstrapを優先する場合、インストールしない。};
--インタラクティブな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]
***機能概要 [#od7ba443]
-著名なフロントエンドWebアプリケーションフレームワークのファイル群はCDNから配布されている。
-これらのファイル群をBundle & Minificationする場合、同時に、CDNフォールバックの設定をすることができる。

***設定の仕方 [#n3004d94]
-ScriptBundle、またはStyleBundleコンストラクターの第2引数に、CDNの URLを追加
-CdnFallbackExpressionプロパティに、ライブラリがロードできたかどうかを判定するための式を指定する。

***設定の例 [#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]

*その他 [#ie75cd1a]

**[[ASP.NET のプロジェクト・テンプレートの変遷]] [#f0cec70e]

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

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

***Linuxプラットフォーム [#iac494e7]
また、Webサービスの分野で多用されるLinuxプラットフォーム上で動作するOSSのランタイムの提供を開始している。

-[[.NET Standard]]
-[[.NET Core]]
-[[ASP.NET Core]]

*参考 [#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]], [[:移行]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS