ASP.NET の Modernization のバックアップ(No.22)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• ASP.NET の Modernization へ行く。
  • 1 (2017-01-16 (月) 09:49:41)
  • 2 (2017-01-16 (月) 12:23:55)
  • 3 (2017-01-16 (月) 14:28:42)
  • 4 (2017-01-16 (月) 21:07:01)
  • 5 (2017-01-17 (火) 09:05:19)
  • 6 (2017-01-17 (火) 12:35:23)
  • 7 (2017-01-17 (火) 17:08:19)
  • 8 (2017-01-18 (水) 12:32:25)
  • 9 (2017-01-18 (水) 16:03:18)
  • 10 (2017-01-18 (水) 23:09:41)
  • 11 (2017-01-19 (木) 14:54:53)
  • 12 (2017-01-19 (木) 22:35:05)
  • 13 (2017-01-20 (金) 10:22:39)
  • 14 (2017-01-20 (金) 16:13:34)
  • 15 (2017-01-23 (月) 18:03:03)
  • 16 (2017-01-23 (月) 23:29:52)
  • 17 (2017-01-24 (火) 15:00:56)
  • 18 (2017-01-29 (日) 18:42:27)
  • 19 (2017-01-29 (日) 22:18:46)
  • 20 (2017-02-15 (水) 14:44:15)
  • 21 (2017-02-27 (月) 18:21:49)
  • 22 (2018-04-12 (木) 10:54:25)
  • 23 (2018-04-16 (月) 12:14:01)
  • 24 (2018-09-07 (金) 12:44:43)

---

「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

以下を行なうことでModernizationが可能と考える。

• NuGet化
• OWIN化

• BundleConfig?
  • Bundle & Minification
  • CDNフォールバック
  • 画面からのリンクを設定

• RouteConfig?

• 個別 の Modernization
  • ASP.NET Web Forms の Modernization
  • ASP.NET MVC の Modernization

NuGet化 †

NuGetに登録されているライブラリについては、その取得方法をNuGet化する。

NuGet †

NuGetについて †

コチラを参照。

NuGetの操作手順 †

コチラを参照。

既存ライブラリのNuGet化 †

既存の参照設定してNuGetから取得したものを参照するようにする。

• 参照設定を削除する。
• PM> Install-Package XXXXX コマンドにより、パッケージをインストールして参照設定を追加する。
• Gitからは、packagesフォルダを削除できる（ビルド時にpackages.configの内容に従って復元されるため）。

既存JS、CSSファイル等のNuGet化 †

既存のファイルを削除してNuGetから取得したものを参照するようにする。

• 既存のファイルを削除する。
• PM> Install-Package XXXXX コマンドにより、パッケージ（JS、CSSファイル等）を取得する。
• JS、CSSファイルの参照方法を変更する（後述のBundleConfigを使用すると良い）。
• GitにはContent, fonts, Scriptsフォルダを含める。
  • ビルド時にpackages.configの内容に従ってpackagesフォルダは復元されるが、ScriptやContentフォルダは復元されないため。
  • ScriptやContentフォルダを復元する場合、Visual Studioのパッケージマネージャコンソールから、Update-Packageを行なう。

既存ライブラリや、JS、CSSファイルの一括更新 †

以下の手順で、ライブラリや、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を行う。

最新のテンプレート実装を参考にパッケージをインストール †

新しいバージョンでサポートされた機能に必要なパッケージなどを、
新しいテンプレートのpackages.config等から読み取って、
必要に応じて、Install-Packageによってパッケージをインストールする。

HttpClientなど、BCL 入りした、ものの差替など。 †

<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化 †

OWIN †

OWIN化手順 †

BundleConfig †

• ここでは、以下の様なウェブサイトやWebアプリケーションを作成する
  フロントエンドWebアプリケーションフレームワークのファイル群を
  • Bundle & Minification
  • CDNフォールバック

する。

• その他、個別のファイルについては、
  ASP.NET Web Forms 、 ASP.NET MVC個別で
  • Bundle & Minification
  • CDNフォールバック

する。

Bundle & Minification †

Bootstrap †

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

• インストール方法

  Install-Package Bootstrap 

jQuery †

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

    Install-Package jQuery

• jQuery UI
  Bootstrapと競合する。Bootstrapを優先する場合、インストールしない。
  • インタラクティブなWebサイトを開発するために使用される、
    jQueryをベースにしたJavaScriptのライブラリ
  • インストール方法

    Install-Package jQuery.UI.Combined

modernizr †

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

• インストール方法

  Install-Package Modernizr

Respond.js †

IE8以下でレスポンシブWebデザインを実現する。

• インストール方法

  Install-Package Respond

CDNフォールバック †

機能概要 †

• 著名なフロントエンドWebアプリケーションフレームワークのファイル群はCDNから配布されている。
• これらのファイル群をBundle & Minificationする場合、同時に、CDNフォールバックの設定をすることができる。

設定の仕方 †

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

設定の例 †

• 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

リンクのさせ方 †

ヘッダでリンク †

• CSSファイルはヘッダでリンクする。
• JSファイルもヘッダでリンクする。
  • modernizrなど、初期処理に必要なもの。
  • ・・・

フッタでリンク †

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

RouteConfig †

• ASP.NET MVC 4 以降には、既定で実装されている。

• Modernizationは、
  • ASP.NET Web Forms
  • ASP.NET MVC 4 以前

が対象となる。

その他 †

CSSレイアウト †

CSSフレームワークの適用 †

Bootstrapなどを導入して、レスポンシブ・デザインに対応する。

個別 の Modernization †

以下を参照。

ASP.NET Web Forms の Modernization †

ASP.NET MVC の Modernization †

既定のプロジェクト・テンプレートの調査 †

VS2010 †

OWINもBundle、Routing、Authenticationテンプレートもサポートされていない。

ASP.NET Web Forms †

非OWIN

ASP.NET MVC †

非OWIN

VS2012 †

• OWINは、まだサポートされていない。
• Bundle、Routing、Authentication(OAuth)テンプレートがサポートされ始めた。

ASP.NET Web Forms †

• 非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 †

• 非OWIN

• Authenticationには以下のモジュールが使用されている。
  • OAuthは未サポート
  • System.Web.Security.Membership

ASP.NET MVC 4 †

• 非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 †

• OWIN化対応がなされた。
• 様々な認証対応テンプレートも追加された。

ASP.NET Web Forms †

• 認証対応テンプレート

• 組織アカウントの場合
  恐らくWIFを使用してWS-Federationの認証連携を行う。

• 個人アカウントの場合
  
  • OWINミドルウェアであるASP.NET Identityを使用するためにOWIN化対応がなされている。
  • ASP.NET Identityによって、外部ログインや、OAuthServer?実装もサポートされ始めた。

• 上記から以下の変更が加えられた。

• 認証なし、
  個人アカウント、組織アカウント、Windows認証
  などの認証テンプレートがサポートされた。

• 個人アカウントの場合
  Authenticationは以下のモジュールに変更された。
  • Microsoft.AspNet?.Identity.Core
  • Microsoft.AspNet?.Identity.Owin
  • Microsoft.Owin.Security

ASP.NET MVC 4 - 5 †

• 変更内容はASP.NET Web Formsと同様。

VS2015 †

ASP.NET Coreがサポートされた。

.NET Framework †

• 大枠、VS2013と同じ。
• ASP.NET Web Forms, ASP.NET MVC 5

ASP.NET Core †

• ASP.NET 5 & ASP.NET MVC 6
• ASP.NET Core用のテンプレートはすべてOWIN。
  （と言うより、ASP.NET Core自体がOWIN互換レイヤーを実装している）

VS2017 †

・・・

参考 †

Bundle & Minification †

• [ASP.NET Optimization] javascript や cssの Bundle と Minification 機能を使ってみる - Netplanetes
  http://www.pine4.net/Memo/Article/Archives/545

CDNフォールバック †

• 効果的なフォールバック戦略の作成方法
  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, :移行

     

Site admin: dotNetDevelopmentInfrastructure

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.063 sec.