EngineIT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。MVCにおいて、クライアントが「JavaScript」や「css(スタイルシート)」などをサーバからダウンロードする際のネットワークトラフィックを最小限に抑えるために、複数のJavaScriptやcssをダウンロードして束ねる(Bundle)事により、HTTPリクエストの数を減少させて、ページの表示速度を向上させるための機能です。この設定を記述する定義ファイル(C#プログラム)が「BundleConfig.cs」です。(図111)以下は実際にBundle.configありの場合と無しの場合について、ネットワークトラフィックを比較した結果です。以下のサンプルを基にBundleConfigの書き方をご紹介いたします。}}(図121)基本的な方針として、「対象ファイル」(バンドルしたい対象)とその「URL(のセット)」を紐づけた上で、アプリケーションに登録します。登録にはBundleCollectionクラスのAddメソッドを使います。(構文)Add(【Bundle型のオブジェクト】)そして、Addメソッドの引数であるBundle型のオブジェクトはJavaScriptのバンドルの場合は「ScriptBundle」メソッドを、cssのバンドルの場合は「StyleBundle」メソッドをそれぞれ使用します。「仮想パス」というのは、バンドルを実際に呼び出す際に使用する仮想の名前です。cssの場合StyleBundle(【String型の仮想パス】)更に、上記のScriptBundle、StyleBundleクラスの「Include」メソッドを使って、実際にバンドルする対象のファイルを列挙していきます。StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/bootstrap_pulse.css");bundles.Add(test);//~中略~}また、Includeメソッドで指定するバンドル対象は、ワイルドカードを指定して複数指定する事も可能です。MVCのプロジェクトを作成する際に、もし「プロジェクトテンプレート」(予め簡単な画面が作られた状態でアプリを作れる機能)を使って作った場合は「BundleConfig.cs」は元々存在しているので、その場合は本手順の実施は不要です。※↓こんな感じの画面が見える人は、恐らくApp_Start内にBundleConfig.csが既にあるはず(図130)デフォルトの「プロジェクトテンプレート」で作成された画面ただし、「空のMVCプロジェクト」から作っており、もしBundleConfig.csが無い場合でも通常のクラスと同様に新しく作ればOKです。(作成手順)・1App_Startフォルダを「右クリック」⇒「追加」⇒「クラス」と選択(図131)・2クラス名を「BundleConfig.cs」にして「追加」を押下(図132)・3前提パッケージのインストールBundleConfigを使うにはパッケージ「Microsoft.AspNet.Web.Optimization」が必要となりますので、NuGetパッケージマネージャーからダウンロードします。●NuGetパッケージマネージャーを開く方法1:「ツール」⇒「NuGetパッケージマネージャー」⇒「パッケージマネージャーコンソール」と選択します。(図133)方法2:サンプルPGを貼り付けると、「Microsoft.AspNet.Web.Optimization」が必要が箇所でエラーになるので、それを右クリックする事でもNuGetを開けます。(図134)●Microsoft.AspNet.Web.Optimizationのインストール「参照」タブから「Microsoft.AspNet.Web.Optimization」を検索し、インストールを押下します。(図135)1↓(図135)2↓(図135)3●コードの追記あとは(1-2)で記載しているサンプルのようにBundleConfigの内容を記述すればOKです(※バンドル対象のファイル名は各自のものに置き換えをお願いします)(図121)以上でBundleConfig.csの設定は完了ですが、実際にバンドルを操作するためには、他にもいくつか設定が必要な項目があります。それらの項目について詳しくは下記の記事をご参照ください。⇒(解説)BundleConfigが読み込まれない場合に確認するべきポイント以下は対応内容を箇条書きにした表です。具体的な内容は上記URLの記事をご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。EngineIT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。Reserved.Top。