Play! framework Advent Calendar 2011 jpに、Twitter Bootstrap モジュールというエントリが投稿されており、Twitter BootstrapというCSSフレームワークがあることを知りました。
サイトを調べてみると、おもしろそうなので、昨日のOAuthサンプルのページにTwitter Bootstrapを適用してみました。
→ サンプルページ
1.Twitter Bootstrapのインストール
公式ページからTwitter Bootstrapをダウンロードし、playの/public 配下に解凍しました。
なお、Playには「twitterBootstrap モジュール」があるようなのですが、バージョンが少し古いようなので、モジュールは使用しませんでした。
2.main.htmlの修正
main.htmlのヘッダーを修正し、twitterBootstrapのCSSを組み込みました。
<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
<meta charset="${_response_encoding}">
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
#{get 'moreStyles' /}
<link rel="shortcut icon" type="image/png"
href="@{'/public/images/favicon.png'}">
<script src="@{'/public/javascripts/jquery-1.6.4.min.js'}"
type="text/javascript" charset="${_response_encoding}"></script>
#{get 'moreScripts' /}
<meta name="google-site-verification"
content="DruByTCM2Z-l9rdsrVzaqdVKyDiBEHL0MuRdojuD7lM" />
<link href="public/bootstrap/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
</head>
<body>
#{doLayout /}
</body>
</html>
3.index.htmlの修正
Bootstrapの公式ページ及びサンプルをみながら、index.htmlを以下のように修正しました。
#{extends 'main.html' /}
#{set title:'Home' /}
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#">Play & Bootstrap Test</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>Authentication Sample</h1>
<p>Play Frameworkで、OAuth認証とTwitter Bootstrapの練習。</p><br />
<div class="row show-grid" title="OAuth">
<div class="span3">
<a href="@{TwitterAuth.authenticate()}">
<img src="public/images/sign_twitter.png" /></a></div>
<div class="span3">
<a href="@{GoogleAuth.authenticate()}">
<img src="public/images/sign_google.png" /></a></div>
<div class="span3">
<a href="@{FacebookAuth.authenticate()}">
<img src="public/images/sign_facebook.png" /></div>
<div class="span3">
<a href="@{HatenaAuth.authenticate()}">
<img src="public/images/sign_hatena.png" /></a></div>
</div>
</div>
<div class="row">
<div class="span4">
<h2>Twitter</h2>
#{if userinfo.get("twitter").get("auth")!=null}
<p>認証されています。</p>
<p><img src='${userinfo.get("twitter").get("imageurl")}' width="32px"
hspace="10px" align="bottom" />
${userinfo.get("twitter").get("screenname")}</p>
#{/if}
#{else}
<p>認証されていません。</p>
#{/else}
<p><a class="btn" href="#">Logout »</a></p>
</div>
<div class="span4">
<h2>Google</h2>
#{if userinfo.get("google").get("auth")!=null}
<p>認証されています。</p>
<p><img src='${userinfo.get("google").get("imageurl")}' width="32px"
hspace="10px" align="bottom" />${userinfo.get("google")
.get("screenname")}</p>
#{/if}
#{else}
<p>認証されていません。</p>
#{/else}
<p><a class="btn" href="#">Logout »</a></p>
</div>
<div class="span4">
<h2>Facebook</h2>
#{if userinfo.get("facebook").get("auth")!=null}
<p>認証されています。</p>
<p><img src='${userinfo.get("facebook").get("imageurl")}' width="32px"
hspace="10px" align="bottom" />${userinfo.get("facebook")
.get("screenname")}</p>
#{/if}
#{else}
<p>認証されていません。</p>
#{/else}
<p><a class="btn" href="#">Logout »</a></p>
</div>
<div class="span4">
<h2>Hatena</h2>
#{if userinfo.get("hatena").get("auth")!=null}
<p>認証されています。</p>
<p><img src='${userinfo.get("hatena").get("imageurl")}' width="32px"
hspace="10px" align="bottom" />${userinfo.get("hatena")
.get("screenname")}</p>
#{/if}
#{else}
<p>認証されていません。</p>
#{/else}
<p><a class="btn" href="#">Logout »</a></p>
</div>
</div>
<footer>
<p>© Test</p>
</footer>
</div>
3.所 感
TwitterBootstrapを使うと、簡単に今風のUIが作れます。結構、良い感じです。
また、playの場合、main.htmlに登録しておくことで、動的に生成されるページデザインの一貫性が保たれるかもです。
Related posts:
- Newer: selenium2.0のWebDriver APIを試してみました。
- Older: 図書館でKINECT本を見つけた。
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://termat.sakura.ne.jp/java/play-framework%e3%81%a7twitter-bootstrap%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82/trackback/?_wpnonce=049052c19f
- Listed below are links to weblogs that reference
- Play frameworkでTwitter Bootstrapを使ってみた。 from TM's Workspace
