Play! framework Advent Calendar 2011 jp #play_ja : ATND の 18 日目です。
playframework で Twitter Bootstrap を利用する手順を紹介します。
Twitter 社が 2011 年 8 月に発表 した、Web サービスのフロントエンドを作成するためのツールキットです。GitHub で公開されており、誰でも無料でダウンロードして使用することができます。
主な内容は LESS で書かれた CSS のセットで、グリッドレイアウトやかっこいいフォーム、角丸ボタンなど、Web サービスの画面を作成するために必要なひと通りのデザインが用意されています。
詳しくは以下の記事を参照してください。
playframework には、この Twitter Bootstrap を 簡単に利用する twitterBootstrap モジュール があるのですが、どういうわけか GitHub にソースコードが公開されているのみで、playframework のリポジトリにモジュールがアップロードされていません。
このため、twitterBootstrap のドキュメント に記載されている内容をそのまま実行しても、モジュールのインストール時にエラーが発生します。
いろいろと試してみたところ、これを回避するためにはアプリケーションにモジュールを直接 git clone してしまえば良いようです。以下に手順を示します。
まずは 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! ~
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 モジュールを取り込みます。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 を利用する準備が整いました。
それでは app/views/Application/index.html を編集して、Twitter Bootstrap で用意されたデザインをいくつか利用してみましょう。
Twitter Bootstrap のレファレンスサイト は、それ自体が Twitter Bootstrap を利用しているので、このサイトのソースコードを眺めてみると Twitter Bootstrap が非常に簡単に利用できることが分かります。*1
div に container クラスを指定すると、センタリングされた固定幅 940px の表示領域を定義することができます。
#{extends 'main.html' /}
#{set title:'Home' /}
<div class="container">
<h1>Twitter Bootstrap</h1>
</div>
デフォルトでは幅 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>
行毎に背景色を塗り替えるテーブルも 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)
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)
この他にも固定位置のナビゲーションバーやタブメニュー、パンくずリスト、メッセージ表示領域など、非常に豊富なスタイルが用意されています。
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 さんです。
*1：現在の twitterBootstrap モジュールは Twitter Bootstrap 1.2.0 を利用しているので、最新版の Twitter Bootstrap で定義されたデザインは利用できないことがあります
第二回 #Playframework 勉強会 in Tokyo #play_ja で playdocja のこれまでとこれからについて発表してきました。
ぼくの発表資料は slideshare にアップロードしてあります (実際に使用したのは無駄なエフェクトや実験的な動画を埋め込んだ keynote 版で細部が異なります) 。
当日の模様や各発表者の方の概要は主催者 @ikeike443 さん のブログにまとまっているので、そちらをご参照頂くとして、以下には個人的な振り返りをつらつらと書き留めておきます。
まずは良かった点、今後も継続したい点。
続いて悪かった点、今後は改善したい点。
最後に今後は挑戦したい点。
スポンサー企業の 株式会社イージフ様、株式会社シャノン様、企画・運営の @ikeike443 さん、@fujya さん、@yosu さん、@twintaro さん、発表者の方々、懇親会でお話しさせて頂いた方々、ありがとうございました。
みんな大好き eclipse で playframework の開発を快適に行えるように playframework 向け ruble を作ってみました。
aptana studio で使えるコードスニペットの集まりで、textmate で言うところの bundle のようなものです。
以下、 aptana (いまは titanium studio ですが) のドキュメント より抜粋。
Ruble (short for RUby BundLE) is a runtime environment that allows for the extensibility of IDEs and text editors using Ruby. Compatibility with TextMate bundles is a priority--we want to make it reasonably straightforward to convert an existing TextMate bundle into a Ruble bundle, while still allowing commands and snippets to be more concise and more powerful.
To begin, you might wish to start with Modifying an existing Ruble, and then move on to Creating a new Ruble to hold your own custom code.
要するに textmate の bundle とできるだけ互換性を持たせた ruby 製の ide 拡張で、既存の ruble をそのまま使うも良し、カスタマイズするも良し、新しい ruble を作るも良し、ということみたいです。
ちなみにぼくは「ルーブル」と発音していますが、正解かどうかは分かりません。
まずは eclipse に aptana studio プラグイン をインストールしてください。
os や eclipse, aptana のバージョンには依存しないはずです。mac os x または windows xp に eclipse ide for java developers 3.7, aptana studio 3.0.4 という環境で動作を確認しています。
aptana studio をインストールしたら、ホームディレクトリ配下に git://github.com/garbagetown/play.ruble.git を git clone してください。
ホームディレクトリのパスは os によって異なるので注意が必要です。mac os x の場合は "/Users/ユーザ名/Documents/Aptana Rubles/", windows xp の場合は "C:\Documents and Settings\ユーザ名\Aptana Rubles\" です。windows 7 は環境がないので分かりません。
$ cd ~/Documents/Aptana\ Rubles/ $ git clone git://github.com/garbagetown/play.ruble.git Cloning into play.ruble... remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remote: Total 10 (delta 1), reused 10 (delta 1) Receiving objects: 100% (10/10), done. Resolving deltas: 100% (1/1), done. $ ls play.ruble $ ls play.ruble/ README.md bundle.rb snippets
「ディレクトリ名にスペース含めるんじゃねえよキモいだろカスが」という真っ当な感性をお持ちの方には Bundle 用ディレクトリをカスタマイズする方法 もあるようです。
git をインストールされていない方は play.ruble の github から tar.gz または zip ファイルをダウンロードすることも可能です。
ダウンロードしたファイルを展開して上述のホームディレクトリ配下にコピーしてください。
大きなお世話だとは思いますが git は入れておいた方が楽しいのでインストールすることをお勧めします。
aptana の中の方に連絡して 新規 budle リストに取り込んでもらった ので、aptana の次のバージョン以降はメニューから Commands -> Bundle Development -> Install Bundle と進めば、新規 bundle リストに Play framework が表示されることになるはずです。
適当な html ファイルを aptana の html エディタで開いて "list" などのキーワードに続けて tab キーをタイプすれば、スニペットが補完されます。
登録されているスニペットの一覧はメニューの Commands -> Play framework で確認してください。
一応 logger や controllers, models のスニペットも play の vim bundle からポーティングしていますが、対象ファイルを java エディタで開いた場合は aptana スニペットによるコード補完が有効にならないのであまり意味はありません。この辺りの補完は eclipse の補完機能を使ったほうが便利だと思います。
playframework のタグ、java extension はひと通り網羅しようと思っています。
このブログのコメント欄か、 github の issues にポストしてください。
長らく放置していたゴミブログのデザインを少し変えました。
今後は playframework を中心に、技術系の情報を備忘録として掲載していく予定です。
twitter 連携はしませんので、新規投稿を追いかけたい方は rss を活用してください。
なんだかブログを書かずに放っておくと広告が入るようなので適当に更新。近頃こんなの聴いています。
レイ・ハラカミさんとか竹村延和さんあたりが好きなら聴けると思います。かわいらし系エレクトロニカ。
英語読んだりコード書いたりしているときは歌モノだと邪魔になるのでこーいうぴこぴこしたやつをよく聴きます。
