[動画あり] ASP.NET MVC4 アプリに Twitter Bootstrap を5分で組み込む

Visual Studio を使っての ASP.NET MVC4 Web アプリを作るときの話題。

Twitter Bootstrap について

"Twitter Bootstrap" とは、Twitter 社が公開している CSS/UI フレームワークの名前だ。

Twitter Bootstrap
http://twitter.github.com/bootstrap/

Twitter Bootstrap の CSS ファイルや JavaScript を自分の Web アプリに読み込み、適宜コーディングしてやれば、Twitter ライクなきれいな画面が作れる、しかもレスポンシブ (Responsive、デバイスの画面解像度にあわせて柔軟に自動でレイアウトされる)、という代物である。

ASP.NET MVC4 Web アプリに組み込む

NuGet からパッケージ入手

手持ちの ASP.NET MVC4 Web アプリに Twitter Bootstrap を組み込むには、もちろん、いろいろなやり方がある。

とりあえず自分は、NuGet から Twitter.Bootstrap パッケージをプロジェクトに追加して使っている。

Twitter.Bootstrap
http://nuget.org/packages/Twitter.Bootstrap

ちなみに、Visual Stuio Gallery には、Twitter Bootstrap をベースとした View で作ってくれるらしいプロジェクトテンプレートも見受けられる。
しかしプロジェクトテンプレートだと、既存のアプリに Twitter Bootstrap を組み込むのは難しい。

その点、上記 NuGet パッケージは容易に既存のアプリに Twitter Bootstrap を組み込むことができる。

レイアウト用の View は用意されていない

ところで上記 NuGet パッケージは、Twitter Bootstrap の CSS や JavaScript を適切に配置してくれるものの、レイアウト用の View などはさすがに用意してくれない。

自分でレイアウト用の View を書くことになる。

しかし、毎度毎度、Twitter Bootstrap のサイトからテンプレートをコピーしてきて ASP.NET MVC4 プロジェクトにフィットするよう書き換えるのは、まったくもって生産的ではない。

レイアウト用の View をテンプレ化、VS Gallery に公開

そこでレイアウト用の View を、Visual Studio のアイテムテンプレート化。

さらに、Visual Stuido Extension インストーラの形式にパッケージし、Visual Studio Gallery に公開した。

MVC 4 TwitterBootstrap Starter Layout Page (Razor)
http://visualstudiogallery.msdn.microsoft.com/268d0b05-6ba5-4793-9a10-7d9d2a478881

上記から .vsix ファイルをダウンロードして、エクスプローラ上で開けば、インストーラが起動する。
あとは画面の内容に従ってインストールを済ませるだけだ。

手順

具体的な手順としては次のとおり。

1. 先に書いたとおり、あらかじめの準備として、"MVC 4 TwitterBootstrap Starter Layout Page (Razor)" アイテムテンプレートを Visual Stuio にインストールしておく。
2. Visual Studio で ASP.NET MVC4 プロジェクトを開く。
3. NuGet Package Manager を使って、NuGet パッケージ: Twitter.Bootstrap を、そのプロジェクトにインストール。
4. 続けて、~/Views/Shared フォルダなどに、先にインストールしておいた "MVC 4 TwitterBootstrap Starter Layout Page (Razor)" アイテムテンプレートから、レイアウト用のビューを新規作成し、 ( たとえば _BootstrapLayout.cshtml などのファイル名で ) 保存する。
5. _ViewStart.cshtml を書き換えるなどして、いま新規で作ったレイアウト用ビューを使うようにする。
6. そのプロジェクトにインストールされている jQuery のバージョンを 1.7 以上の最新版にアップグレードしておく。
7. あとは順次、Twitter Bootstrap の機能に則って、.cshtml ビューをマークアップしていく。

こんな感じで、5分ほどあれば、最低限の対応ができる。

これらの手順を動画にまとめて公開した。



どうぞご参考まで。