Twitter Bootstrap モジュール
Play! framework Advent Calendar 2011 jp #play_ja : ATND の 18 日目です。
playframework で Twitter Bootstrap を利用する手順を紹介します。
Twitter Bootstrap とは
Twitter 社が 2011 年 8 月に発表 した、Web サービスのフロントエンドを作成するためのツールキットです。GitHub で公開されており、誰でも無料でダウンロードして使用することができます。
主な内容は LESS で書かれた CSS のセットで、グリッドレイアウトやかっこいいフォーム、角丸ボタンなど、Web サービスの画面を作成するために必要なひと通りのデザインが用意されています。
詳しくは以下の記事を参照してください。
twitterBootstrap モジュール
playframework には、この Twitter Bootstrap を 簡単に利用する twitterBootstrap モジュール があるのですが、どういうわけか GitHub にソースコードが公開されているのみで、playframework のリポジトリにモジュールがアップロードされていません。
このため、twitterBootstrap のドキュメント に記載されている内容をそのまま実行しても、モジュールのインストール時にエラーが発生します。
いろいろと試してみたところ、これを回避するためにはアプリケーションにモジュールを直接 git clone してしまえば良いようです。以下に手順を示します。
play アプリケーションの作成
まずは sample という名前で play アプリケーションを作成します。途中でアプリケーション名を訊ねられるので、デフォルトで良い場合はそのまま Enter を叩きます。
/Users/garbagetown/temp% play new sample ~ _ _ ~ _ __ | | __ _ _ _| | ~ | '_ \| |/ _' | || |_| ~ | __/|_|\____|\__ (_) ~ |_| |__/ ~ ~ play! 1.2.4, http://www.playframework.org ~ ~ The new application will be created in /Users/garbagetown/temp/sample ~ What is the application name? [sample] ~ ~ OK, the application is created. ~ Start it with : play run sample ~ Have fun! ~
less モジュールの設定と取り込み
Twitter Bootstrap は LESS で書かれているので、作成した sample アプリケーションで less モジュール を利用するよう設定します。
/Users/garbagetown/temp% cd sample/
/Users/garbagetown/temp/sample% vi conf/dependencies.yml
# Application dependencies
require:
- play
- play -> less 0.3続いて、play dependencies コマンドを利用して less モジュールを取り込みます。
/Users/garbagetown/temp/sample% play dependencies ~ _ _ ~ _ __ | | __ _ _ _| | ~ | '_ \| |/ _' | || |_| ~ | __/|_|\____|\__ (_) ~ |_| |__/ ~ ~ play! 1.2.4, http://www.playframework.org ~ ~ Resolving dependencies using /Users/garbagetown/temp/sample/conf/dependencies.yml, ~ ~ play->less 0.3 (from playContributedModules) ~ ~ Installing resolved dependencies, ~ ~ modules/less-0.3 ~ ~ Done! ~
これで sample アプリケーションで LESS が利用できるようになりました。
twitterBootstrap モジュールの clone と設定
いよいよ twitterBootstrap モジュールを取り込みます。sample アプリケーションの modules ディレクトリ配下に twitterBootstrap プロジェクトを clone します。
/Users/garbagetown/temp/sample% git clone https://github.com/sclasen/twitterBootstrap.git modules/twitterBootstrap Cloning into conf/twitterBootstrap... remote: Counting objects: 113, done. remote: Compressing objects: 100% (71/71), done. remote: Total 113 (delta 31), reused 105 (delta 23) Receiving objects: 100% (113/113), 29.90 KiB, done. Resolving deltas: 100% (31/31), done.
続いて、twitterBootstrap のドキュメント に記載されているとおり、.less ファイルへのリクエストを twitterBootstrap モジュールへ引き渡すよう routes ファイルを編集します。
catch all ルートよりも前に設定する必要がある点に注意してください。
.less ファイルの prefix は自由に設定できるので、業務で利用する際など twitter という名称が不適切な場合は、適宜変更すると良いでしょう。
/Users/garbagetown/temp/sample% vi conf/routes
(snip)
GET /twitter module:twitterBootstrap
# Catch all
* /{controller}/{action} {controller}.{action}最後に、.less ファイルを利用するよう html ファイルを編集します。どの html に書いても動作しますが、main.html に書くのが適当でしょう。
/Users/garbagetown/temp/sample% vi app/views/main.html <!DOCTYPE html> <html> <head> <title>#{get 'title' /}</title> <meta charset="${_response_encoding}"> <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}"> <link rel="stylesheet" media="screen" href="/twitter/bootstrap.less"> #{get 'moreStyles' /} (snip) </html>
以上で twitterBootstrap を利用する準備が整いました。
Twitter Bootstrap
それでは app/views/Application/index.html を編集して、Twitter Bootstrap で用意されたデザインをいくつか利用してみましょう。
Twitter Bootstrap のレファレンスサイト は、それ自体が Twitter Bootstrap を利用しているので、このサイトのソースコードを眺めてみると Twitter Bootstrap が非常に簡単に利用できることが分かります。*1
Layouts
div に container クラスを指定すると、センタリングされた固定幅 940px の表示領域を定義することができます。
#{extends 'main.html' /}
#{set title:'Home' /}
<div class="container">
<h1>Twitter Bootstrap</h1>
</div>
Grid
デフォルトでは幅 940px を 16 個のセルに分割するグリッドシステムを利用することができます。
(snip) <div class="container"> <h1>Twitter Bootstrap</h1> <div class="row"> <div class="span4"> <h2>span4</h2> </div> <div class="span12"> <h2>span12</h2> </div> </div> </div>
Tables
行毎に背景色を塗り替えるテーブルも class に zebra-striped を指定するだけで利用できます。
(snip)
<div class="span4">
<h2>span4</h2>
<table class="bordered-table zebra-striped">
<thead>
<tr>
<th>#</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>2</td>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td colspan="3">colspan3</td>
</tr>
</tbody>
</table>
</div>
(snip)
Forms
xlarge, large, medium, small, mini と、様々な大きさの input 項目が用意されています。
(snip)
<div class="span12">
<h2>span12</h2>
<form>
<fieldset>
<div class="clearfix">
<label for="xlInput">X-Large input</label>
<div class="input">
<input type="text" id="xlInput" class="xlarge">
</div>
</div>
<div class="clearfix">
<label for="lInput">Large input</label>
<div class="input">
<input type="text" id="lInput" class="large">
</div>
</div>
(snip)
ソースコードは省略しますが、disable 項目やチェックボックス、ラジオボタン、テキストエリアのスタイルも用意されています。
また、カラフルなボタンも用意されています。
(snip)
</fieldset>
<div class="actions">
<button class="btn primary">Primary</button>
<button class="btn">Default</button>
<button class="btn info">Info</button>
<button class="btn success">Success</button>
<button class="btn danger">Danger</button>
</div>
(snip)
この他にも固定位置のナビゲーションバーやタブメニュー、パンくずリスト、メッセージ表示領域など、非常に豊富なスタイルが用意されています。
LESS
Twitter Bootstrap は LESS で書かれているので、変数やミックスイン、入れ子ルール、関数や演算子などを使用することができます。
ここでは modules/twitterBootstrap/public/preboot.less を編集して文字色を全体的に赤色にしてみます。
/Users/garbagetown/temp/sample% vi modules/twitterBootstrap/public/preboot.less /* Preboot.less * Variables and mixins to pre-ignite any new web development project * ------------------------------------------------------------------ */ (snip) // Grays @black: #f00; // #000 から #f00 に変更 @grayDark: lighten(@black, 25%); @gray: lighten(@black, 50%); @grayLight: lighten(@black, 75%); @grayLighter: lighten(@black, 90%); (snip)
h1 要素の文字色は、modules/twitterBootstrap/public/type.less において変数 @grayDark として設定されています。
/Users/garbagetown/temp/sample% vi modules/twitterBootstrap/public/type.less
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
* ---------------------------------------------------------------------------------------- */
(snip)
// HEADINGS
// --------
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: @grayDark;
small {
color: @grayLight;
}
}
(snip)変数 @grayDark は上記の preboot.less において、lighten 関数で @black を 25% 明るくした色として定義されているので、@black の値を #000 から #f00 に変更すると、@grayDark の値は #404040 から #ff8080 に変更されます。
LESS は、煩雑になりがちな CSS を簡潔に管理することができる強力なツールです。
同様のツールに Sass があり、今後どちらが主流となるか見極めが難しい状況ではありますが、両者の違いは細かな文法の差異程度であり、基本的な概念はほぼ同じなので、いずれか一方をマスターしておくと良いでしょう。
最後に
Twitter Bootstrap を使うことで、全体的なデザインや CSS に定義する class 名の検討など、定型的な作業を省略することができます。また、Twitter Bootstrap をくり返し適用することで、プロジェクト間における情報の共有やノウハウの蓄積を効果的に行えるようになります。さらに、この Twitter Bootstrap が内蔵する LESS を使うことで、例えばコーポレートカラーに変数名を付けて共有するなど、CSS を統一的かつ簡潔に管理することができるようになります。
Twitter Bootstrap が LESS を使用していることで、プロジェクトへの適用の敷居がわずかながら高まっていることもまた事実ですが、今回ご紹介したとおり、twitterBootstrap プラグインは非常に簡単に利用することができます。
playframework には、twitterBootstrap プラグインの他にも Javascript の記述を簡易にする CoffeeScript 用の プラグイン など、少しだけ先の技術を容易に利用することのできるプラグインが多数作成されています。playframework は Heroku を始めとするクラウドサービスへのデプロイも容易ですし、はじめからステートレスアーキテクチャとして設計されているため、セッションレプリケーションなどの重苦しい仕掛けも不要です。
ご興味を持たれた方は、是非とも重い腰を少しだけ持ち上げて、コマンドプロンプトから play new sample と入力してみてください。そして twitterBootstrap や LESS, CoffeeScript などのプラグインを設定してアプリケーションを開発してみてください。そこそこ見栄えの良いアプリケーションを簡易な文法で開発したら、未完成でもいいので思い切って Heroku にデプロイ してみてください。
そして、次はあなたが playframework の楽しさを周りの人に教えてあげてください。
最後まで読んで頂き、ありがとうございました。
Play! framework Advent Calendar 2011 jp #play_ja : ATND の 19 日目は @yosuke_furukawa さんです。
