ASP.NET MVC4とTwitter Bootstrapを組み合わせる(Twitter.Bootstrap.MVC4を使ってみた)

0.前置き

以前、「HTML・CSSデザインフレームワークを使ってみた」というポストを書きました。
こういったデザインフレームワークをWebアプリケーションフレームワークと組み合わせるときに、
少しだけですけど面倒な時があります。
ASP.NET MVC4でも同じです。テンプレートページを作るのとか…。

1.Twitter.Bootstrap.MVC4の紹介

今回紹介するTwitter.Bootstrap.MVC4は、ASP.NET MVC4とTwitter Bootstrapを組み合わせる機能(ツール、テンプレートなど)を提供します。
作者による紹介ページは、「Twitter.Bootstrap.MVC4; the Bootstrap package for ASP.Net MVC4」です。
Githubのサイトはこちらです。

2.インストール

Visual Studioのプロジェクトを作成するところから順に説明します。

  1. 「新しいプロジェクト」から「ASP.NET MVC 4 Webアプリケーション」を選択する。
  2. プロジェクトテンプレートでは、「空」を選択する。
  3. パッケージマネージャーコンソールを起動する。
  4. 「PM > Install-Package twitter.bootstrap.mvc4」を実行する。
  5. 「PM > Install-Package twitter.bootstrap.mvc4.sample」を実行する。

これでOK。

3.実際に使ってみる

何がどうなっているかいくつか確認して見ます。

デフォルトビュー
/Views/sharedの配下に、レイアウトファイルがいくつかと、
「Create.cshtml」、「Details.cshtml」、「Index.cshtml」が用意されています。
Controllerだけ実装すれば、上記のアクションに該当するビューを各コントローラごとに作る必要はありません。
#要件に対して柔軟ではないですが、さくっと作れますね。

トップメニューの作成補助
Bootstrap上のトップメニューの作成補助機能です。

header

NavigationExtensions.csとして提供されています。
実装は以下のような感じです。

public class ExampleLayoutsRouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.MapNavigationRoute<ExampleLayoutsController>("Example Layouts", c => c.Starter())
                .AddChildRoute<ExampleLayoutsController>("Marketing", c => c.Marketing())
                .AddChildRoute<ExampleLayoutsController>("Fluid", c => c.Fluid())
                .AddChildRoute<ExampleLayoutsController>("Sign In", c => c.SignIn());
    }
}

アラート出力
BootstrapBaseControllerを継承してコントローラを作成すれば、TempDataを用いたアラート出力が可能になります。
こんな感じです。メッセージの出力については、_alerts.cshtmlでよしなにやってくれます。この実装方法いいかも。

/[HttpPost/]
public ActionResult Create(HomeInputModel model)
{
    if (ModelState.IsValid)
    {
        // ...
        Success("Your information was saved!");
        return RedirectToAction("Index");
    }
    Error("there were some errors in your form.");
    return View(model);
}

出力は以下の感じです。

message1

4.サンプルを書いてみての補足

普段あまりASP.NET MVCのコード書かないので、このコードは参考になりました。
アラートってあんな方法で出すとか。

5.サンプルコード

今回は大したサンプルを書かなかったので、載せません。
作者が提供しているtwitter.bootstrap.mvc4.sampleをご利用ください。

6.最後に

実はビューのテンプレートも現在鋭意作成中らしいです。
twitter.bootstrap.mvc4.template
コード自体はもう存在するので完成が待ち遠しいです。

と…思ったら、MvcScaffolding4TwitterBootstrapMvc←こんなコードもありました。
twitter.bootstrap.mvc4用のスキャッフォールディングらしいです。
インストールして触ってみたけど、なぜかコード生成するときにVisual Studioがフリーズする。
また今度調べてみよ。

広告

HTML・CSSデザインフレームワークを使ってみた

0.前置き

仕事で技術検証のためにWebアプリをよく作ります。
そのときにいつも困るのが見た目です。
色をどうしようとか、段組みをどうしようとか…。
本来、集中したいとこではないけど、つい気になってしまうし、苦手な分野です。
そこで同僚に教えてもらったのが、HTML・CSSデザインフレームワーク!(勝手に命名しました)
今回はいくつかフレームワークの例をあげ、実際にその1つを試してみようと思います。

1. HTML・CSSデザインフレームワークとは

素早く、それっぽい見た目のWebアプリを制作することを支援するデザインフレームワークです。
多くの場合、CSSとJavaScript、画像がセットになって提供されています。
指定されたclass属性をHTMLタグに追加するだけで、利用可能になる場合が多いです。

BootStrap曰く、

Built for and by nerds
Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

すばらしい。まさしくこれを求めていました。

2. 代表的なフレームワーク

どんなフレームワークがあるのかぐぐって見ました。
良さそうなものを、列挙します。

  • 99Lime
    デザインが柔らか目。要素も少なくシンプル。
  • Bootstrap
    Twitterが作っているから、いまっぽい。
  • YAML
    いい感じ。
  • BlueTrip
    いい感じ。
  • 52framework
    いい感じ。

ざっとサンプルを見ただけでは、ちょっと判断できないですね。
利用方法も似たり寄ったりです。
拡張などを考慮しなくてよい場合は、見た目で決めてよいでしょう。
# そもそもデザインを作りこむ場合は、独自でフレームワークを用意すると思います。

3. 99Limeを使ってみた

私は99Limeを選びました!見た目がポップな感じで気に入ったので。
それで作ったページが以下のスクリーンショットです。
99lime_sample

制作時間は、99Limeのフレームワークセットをダウンロードしてから完成まで、1時間!
シンプルなクラス構成なので、99Lime上のチュートリアルで十分理解できます。

HTMLのコードを少し見てみます。たとえば、最初の段組みはこんな感じ。(最大12分割可能)

<div class="col_7">
 //左側
</div>
<div class="col_5">
 //右側
</div>

苦手なfloatとの戦いもさようなら。。。

Facebookっぽいマークがついたボタンはこんな感じ。

<button>
  Post to Facebook wall <span class="icon social blue">f</span>
</button>

アイコン作成の作業ともおさらば。。。

かなりお手軽です。

4.サンプルコード

サンプルコードはgithubにホスティングしてあります。
99limeのサンプル
スクリーンショットのindex.html

5. おわりに

HTML・CSSデザインフレームワークをしらべて、99Limeを使ってみました。
Webアプリの中身に集中したいときに効果を発揮します。感動ものです。
懸念としてはカスタマイズするときに、どれくらい制約があるのかぐらいです。
今日はこれでおしまい。