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

目次

概要

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

  • RouteConfig?
  • BundleConfig?
    • Bundle & Minification
    • CDNフォールバック
    • 画面からのリンクを設定
  • 個別 の 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化手順

RouteConfig

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

が対象となる。

BundleConfig

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

する。

  • その他、個別のファイルについては、
    ASP.NET Web FormsASP.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?と同じように設定可能だが、現バージョンでは設定不可能なもよう。

リンクのさせ方

ヘッダでリンク

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

フッタでリンク

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

個別 の Modernization

以下を参照。

ASP.NET Web Forms の Modernization

ASP.NET MVC の Modernization

その他

ASP.NET のプロジェクト・テンプレートの変遷

Webサービス開発へ対応するASP.NET Core

Visual Studio、ASP.NET(特にWeb Forms)は、
エンタープライズ向けであったこともあり、
Webサービス隆盛の時代の流れに乗り遅れた感はある。

Webサービス

このため、現在は、Webサービスの分野に適合したフレームワークをリリースしている。

Linuxプラットフォーム

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

参考

Bundle & Minification

CDNフォールバック


Tags: :.NET開発, :ASP.NET, :ASP.NET Web Forms, :OWIN, :NuGet, :移行


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-09-07 (金) 12:44:43 (102d)