CodeZine(コードジン)

特集ページ一覧

ASP.NET MVC5で導入されたBootstrapを理解しよう

ASP.NET MVC5+Bootstrapでレスポンシブでリッチなサイトを構築 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/05/22 14:00
目次

Visual StudioでASP.NET MVC5のプロジェクトを作成

 Bootstrapの概要について理解できたと思いますので、Visual Studio 2013でASP.NET MVC5のプロジェクトを作成してみましょう。

Webプロジェクトの作成

 まずVisual Studioからプロジェクトの作成を選び、ASP.NET Webアプリケーションの作成を選択します。

ASP.NET Webアプリケーションの作成
ASP.NET Webアプリケーションの作成

 ダイアログに従って、ファイルの場所やソリューション名を入力します。

テンプレートでMVCを選択
テンプレートでMVCを選択

 次にテンプレートの種類を選択します。今回はMVCのテンプレートを選択します(Web Formsを選択した場合もBootstrapが使われます)。

Webプロジェクトを実行

 それでは、さっそく実行してみましょう。[デバッグ]メニューの[デバッグ開始]からブラウザを起動します。

ブラウザで初期画面を表示(PCサイズ)
ブラウザで初期画面を表示(PCサイズ)

 ブラウザにASP.NETの初期ページが表示されます。ここでブラウザの横幅を広げると、ナビゲーションメニューにHomeやAboutが表示され、Getting startedをはじめとする3つのボックスが3つ横に並んでいることが分かります。次にここでブラウザの横幅を狭めてみましょう。

スマホサイズで表示
スマホサイズで表示

 そうすると、ナビゲーションメニューは非表示となり、右上のボタンをクリックしたときだけ表示されるようになります。また、Getting startedといった説明用ボックスが縦に並んでいることが分かります。

 このようなレスポンシブデザインが適用されていることが分かります。

ASP.NET MVCで生成されるひな形ページについて

 続けて、Visual Studioに展開されたBootstrapのファイルについて見ていきましょう。

ASP.NETに展開されたBootstrapのファイル群
ASP.NETに展開されたBootstrapのファイル群

 CSSはContensフォルダ配下に、JavaScriptはScriptsフォルダ配下に配置されていることが分かります。ASP.NET MVC4以前に比べてSite.cssのサイズはとてもコンパクトになっています。

Bootstrapのバージョン変更

 ASP.NET MVC5でのBootstrapのバージョンは3.0.0です。バージョンを変えたい場合には、NuGetからアップデートできます。

NuGetからバージョンを最新化
NuGetからバージョンを最新化

 最新バージョンではなく、特定のバージョンを入れたい場合には、[パッケージマネージャコンソール]からバージョン指定でインストールできます。本稿では執筆時点の最新バージョン3.1.1でアップデートします。

パッケージマネージャコンソールで、Bootstrapのバージョンを変更するコマンドと結果
PM> Install-Package bootstrap -Version 3.1.1

依存関係 'jquery (>= 1.9.0)' の解決を試みています。
'bootstrap 3.1.1' をインストールしています。
'bootstrap 3.1.1' が正常にインストールされました。
BsSample から 'bootstrap 3.0.0' を削除しています。
'bootstrap 3.0.0' が BsSample から正常に削除されました。
'bootstrap 3.1.1' を BsSample に追加しています。
'bootstrap 3.1.1' が BsSample に正常に追加されました。
'bootstrap 3.0.0' をアンインストールしています。
'bootstrap 3.0.0' が正常にアンインストールされました。

Bootstrapの利用箇所の確認

 Bootstrapを使用するには、CSSとJavaScriptを配置して、それらを読み込む設定を記述します。Visual Studioで生成されたコード内で、どのように記述されているか確認してみましょう。

 まず、App_StartのBundleConfigクラスを確認します。BundleConfigクラスには、読み込まれる複数のファイルを効率よくまとめるバンドルという仕組みの設定を記述します。なお、バンドルに関する説明はこちらの記事が参考になるでしょう。

Bootstrap実行に必要なファイルを定義(BundleConfig.cs)
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        // (1)BootstrapのJavaScriptを読み込み
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));

        // (2)BootstrapのCSSを読み込み
        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css"));
    }
}

 (1)の部分でbootstrap.jsを、(2)の部分でbootstrap.cssを指定していることが分かります。その前ではBootstrapで使用するJQuery関連のファイルを読み込んでいます。

レイアウトの設定

 バンドルしたファイルを呼び出すコードは「Views\Shared\_Layout.cshtml」に記載されています。_Layout.cshtmlは全ページで参照される共通レイアウトです。

共通レイアウトでBootstrapファイルを読み込み(_Layout.cshtml)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />

    <!-- スマートフォン向けにviewportをデバイス幅に設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>

    <!-- (1)BootstrapのCSSを読み込み -->
    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    <div class="container body-content">

        <!-- Index.cshtmlなどを読み込み -->
        @RenderBody()

        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
        </footer>
 
   </div>

    @Scripts.Render("~/bundles/jquery")

    <!-- (2)BootstrapのJavaScriptを読み込み -->
    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)
</body>
</html>

 バンドルで指定したBootstrapを、(1)のCSS「~/Content/css」、(2)のJavaScript「~/bundles/bootstrap」で読み込んでいることが分かります。これで、すべてのページでBootstrapが利用できるようになっていることが確認できました。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET MVC5+Bootstrapでレスポンシブでリッチなサイトを構築

著者プロフィール

  • WINGSプロジェクト 青木 淳夫(アオキ アツオ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きた...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5