[動画あり] 既存の ASP.NET MVC4 アプリを手早く Twitter Bootstrap 対応にする

Twitter Bootstrap とは?

こちらのブログをご覧頂いているような皆様であれば、説明不要かもしれないが、
"Twitter Bootstrap" とは Twitter Inc. が公開している CSS ライブラリのことである。

※JavaScript も含まれているので、厳密には CSS ライブラリと言い切ってしまうのは語弊があるかもしれないが...

本家サイトはこちら。
Bootstrap, from Twitter
http://twitter.github.com/bootstrap/

この CSS や画像、スクリプトなどの "セット" を使えば、Twitter ライクな見た目きれいな Web ページデザインが手軽にできる、というわけだ。

Twitter Bootstrap は NuGet で導入可能、だが...

ASP.NET による Web アプリケーション開発においても、Twitter Bootstrap の導入は、当然のごとく可能である。

NuGet パッケージマネージャを使って、既存の ASP.NET Web アプリケーションプロジェクトにTwitter Bootstrap を追加インストールすることは簡単だ。

以下のとおり、NuGet パッケージが公開されている。

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

ただし、この NuGet パッケージをインストールしただけでは、当然、既存の Web アプリの表示が変わるわけではない。

Twitter Bootstrap として提供されるCSSファイル、画像ファイル、JavaScript ファイルが、プロジェクトに配置されるまでである。
それらを利用するよう "配線" するのはプログラマの仕事だ。

プロジェクトテンプレートもあるが...

まぁ、そういった配線も面倒なので、ASP.NET Web アプリケーションプロジェクトを新規に立ち上げる時は、Twitter Bootstrap を使って仕上げられた "プロジェクトテンプレート" を使ったほうがいいのかもしれない。

Visual Studio ギャラリーで、そのようなプロジェクトテンプレートが公開されている模様だ。
(ただし自分は試用ことはない)

BootstrapMVC Project Template
http://visualstudiogallery.msdn.microsoft.com/e8c5ff6a-8e6a-4aaf-832f-f83808087b7d

とはいえ、新規にプロジェクトを作成するときはいいものの、今手元にある既存のプロジェクトを Twitter Bootstrap 化したい場合は、残念ながらこのプロジェクトテンプレートでは使いにくい。

そこでアイテムテンプレート!

...ということで、ASP.NET MVC4 用のレイアウトページのアイテムテンプレートを自作してみた。

Visual Studio ギャラリーにて、下記に公開している。

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

これの何がうれしいかというと、初めから Twitter Boostrap 専用のプロジェクトテンプレートから作り始めなくても、今ある既存の ASP.NET MVC4 アプリに対して、Twitter Bootstrap 化ができる、という点。

既存の ASP.NET MVC4 アプリのプロジェクトに、Twitter.Bootstrap NuGet パッケージを追加し、マスターのレイアウトページを上記アイテムテンプレートで差し替えれば、まずは開始地点としては上々のものにできあがる次第。

具体的な使い方を動画でも公開してある。
使い出のある方がいらっしゃれば、どうぞご活用いただきたい。