technoshop

杉並区和泉のソフトウェアハウス、株式会社テラソフトの技術ブログです。主に.NET MVCとKnockoutJSの情報をまとめます。

.Net MVC4にBootstrapをLessで組み込む

.Net MVC4 Bootstrap

こんにちは。ザクです。Webデザイン苦手というプログラマーは多いと思います。私もその一人です。

テラソフトのWeb開発では、Webデザインに「Bootstrap」を活用しています。レイアウトやボタンのデザインなんかは、Bootstrapにお任せできるので、ちょー便利ですよね。


.Net MVCで利用するときには、Contentフォルダにcssファイルをそのままコピーしても使えますが、どうせ使うならLessで組み込みたいものです。ここではBootstrapをLessで、.Net MVCに組み込む方法を説明します。

Less版Bootstrapを手に入れる

まず、Lessで作成されたBootstrapを入手します。上のサイトからダウンロードできるzip版にはcssしか入っていないので、Githubからダウンロードします。zip版を落とすか、git cloneしてもいいでしょう。

twbs/bootstrap · GitHub

MVC4プロジェクトにLess関連パッケージをインストール

Bootstrapを入れたプロジェクトを用意します。既存のものでも、新規作成してもよいでしょう。新規の場合は、イントラアプリでもインターネットアプリでもいいです。

プロジェクトが用意できたらLess関連のNuGetパッケージをインストールします。（20014/9時点最新版）

NuGet Gallery | Bundle Transformer: LESS 1.9.20

NuGet Gallery | JavaScript Engine Switcher for .Net: MSIE 1.1.11

NuGet Gallery | Bundle Transformer: Microsoft Ajax 1.9.13

ついでにBootstrapをLessでプロジェクトに組み込みたい場合は、こちらもインストールします。

NuGet Gallery | Bootstrap Less Source 3.2.0.1

パッケージのインストールができたら、以下のようにContentとScriptにBootstrapのファイルがコピーされているはずです。

f:id:technoshop:20140918103144j:plain

Web.configにLess用のjsEngineを登録する

bundleTransformerタグ内にあるcoreタグの真下に、以下のようにlessのタグを追加します。それ以外のタグは先のパッケージインストール時に正しく追加されているはずですので、特に編集する必要はありません。

<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
　　<core>
　　～省略～
　　</core>
    <less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None" javascriptEnabled="true">
      <jsEngine name="MsieJsEngine" />
    </less>
</bundleTransformer>

BundleConfig.csにBootstrapを設定する

Bootstrapで利用するjs/cssファイル群はリソースファイルなので、MVC4のリソース管理であるBundleConfigで正しく取り込んでやる必要があります。

まず、jsファイルから。プロジェクトのScriptフォルダ内に、２つのBootstrapファイルがコピーされているので、それらをデフォルトのjsバンドルに組み込みます。僕はファイルの種類ごとにAddするのが面倒なので、いつも使うjsファイルはまとめて登録してます。

次にcssです。constでBootstrapのバンドル名を設定します。Bootstrapとわかるように"~/Bundles/Bootstrap"としました。そのバンドルをcommonStyleBundleの変数に入れてやり、Bootstrap Lessのメインファイルとなるbootstrap.lessへのパスを指定してIncludeします。それを他のcss同様にAddしたら完成です。

public class BundleConfig
{
  public const string BootstrapPath = "~/Bundles/Bootstrap";
       
  // Bundling の詳細については、http://go.microsoft.com/fwlink/?LinkId=254725 を参照してください
  public static void RegisterBundles(BundleCollection bundles)
  {          
      bundles.Add(new ScriptBundle("~/bundles/js").Include(
                   "~/Scripts/jquery-{version}.js",
                   "~/Scripts/jquery.unobtrusive*",
                   "~/Scripts/jquery.validate*",
                   "~/Scripts/bootstrap.js"));

      var commonStylesBundle = new CustomStyleBundle(BootstrapPath);
      commonStylesBundle.Orderer = new NullOrderer();
      commonStylesBundle.Include("~/Content/bootstrap/bootstrap.less");
      bundles.Add(commonStylesBundle);
      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
  }
}

上のサンプルでは、MVCのデフォルトcssであるSite.cssを残しました。理由は、後でBootstrapのバージョンを上げたくなった場合、Bootstrapのlessを直接編集すると編集した部分が上書きされて消えてしまうので、追加でcssをカスタマイズする部分はBootstrapとは別に管理したいからです。Bootstrapで定義されていないcssはこのファイルに記述します。Bootstrapの定義を上書きしたい場合も、こちらに記述します。

もし、2.3.2を使いたくなった場合は、先にインストールしたBootstrapパッケージをバージョンを指定してインストールすればよいでしょう。Githubからダウンロードしたlessファイルを手動でContentフォルダにコピーしてもOKです。その場合は、Includeのパスが合っていることに注意してください。グリフィコンが入っているimgパスの場所もlessファイルを編集して調整する必要があるかもしれません。

レイアウトでBootstrapをバンドルする

最後にViewでBootstrapを使えるように、レイアウトファイル_Layout.cshtmlにBootstrapを取り込みます。ファイルを作るのが面倒な場合は、MVC5からLayout他Viewのファイルを拝借してきます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        @Styles.Render(MvcApplication1.BundleConfig.BootstrapPath)
        @Styles.Render("~/Content/sitecss")
        @* favicons and touch icons go here *@
    </head>
    <body>
    <div class="container">
        <div class="masthead">
            <h3 class="text-muted">@Html.ActionLink("Application Name", "Index", "Home")</h3>
            <ul class="nav nav-justified">
                <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = "active" })</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

        @Scripts.Render("~/bundles/js") 
        @RenderSection("Scripts", required: false)       
    </body>
</html>

アプリを起動して、Bootstrapのデザインが反映されていたら組み込み完成です。

f:id:technoshop:20140918130646j:plain