![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[マイクロソフト系技術情報 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]], [[:移行]]
