rubyのSinatraを使ってWebアプリケーションを作るためのたたき台です。簡単なwebアプリやblog(のようなもの)を作成することが出来ます。
| デモ | Sinatra Easy Template |
| ソース | github |
| ダウンロード | sinatra-easy-template.zip |
起動
ダウンロードしたzipを任意の場所に展開したら、app.rbを実行します。
$ cd sinatra-easy-temaplte $ ruby app.rb == Sinatra/1.2.6 has taken the stage on 4567 for development with backup from Thin >> Thin web server (v1.2.10 codename I'm dumb) >> Maximum connections set to 1024 >> Listening on 0.0.0.0:4567, CTRL+C to stop . .
http://0.0.0.0:4567/ (注:環境によって変わります) をブラウザで開きます。
rackup
$ rackup [2011-06-29 23:04:06] INFO WEBrick 1.3.1 [2011-06-29 23:04:06] INFO ruby 1.8.7 (2010-01-10) [i686-darwin10] [2011-06-29 23:04:06] INFO WEBrick::HTTPServer#start: pid=4093 port=9292
shotgun
$ shotgun == Shotgun/WEBrick on http://127.0.0.1:9393/ [2011-06-29 23:04:25] INFO WEBrick 1.3.1 [2011-06-29 23:04:25] INFO ruby 1.8.7 (2010-01-10) [i686-darwin10] [2011-06-29 23:04:25] INFO WEBrick::HTTPServer#start: pid=4095 port=9393
にも対応しています。
ページの追加、編集、削除
新しいページを増やすには、views/ 以下にhamlファイルを置きます。
$ cd views/ $ echo "%h1 This is Test." > test.haml
http://0.0.0.0:4567/test.html にアクセスして下さい。
hamlファイルを編集すれば、ページ内容も更新されます。
要らないページはファイルを削除すれば消えます。
$ rm test.haml # やっぱ要らない
再度 http://0.0.0.0:4567/test.html にアクセスすると ''Sinatra doesn’t know this ditty.''エラーになります。
基本レイアウトの調整
views/layout.haml には、全てのページで使われる基本テンプレートが表示されています。
!!! %html(lang='ja') %head %meta(charset='utf-8') %title= [@page_title, 'Sinatra Easy Template'].compact.join(' - ') %link(rel='stylesheet' type='text/css'){:href => @stylesheet || 'css/style.css'} %body %header %h1 <a href=".">Sinatra Easy Template</a> %nav %ul %li <a href="./index.html">Home</a> %li <a href="./demo.html">Demo</a> %li <a href="./demo-app.html">Demo(App)</a> %li <a href="./showcase.html">Showcase</a> %li <a href="./history.html">History</a> %li <a href="./contact.html">Contact</a> #contents != yield %aside %h1 Sidebar Menu 1 %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. %h1 Download %ul %li <a href="https://github.com/ongaeshi/sinatra-easy-template/zipball/master">sinatra-easy-template.zip</a> %li <a href="https://github.com/ongaeshi/sinatra-easy-template">src</a> %script{:type=>"text/javascript"} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-13136329-8']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); %hr %footer %p ! Develop by <a href="./contact.html">ongaeshi</a> ! Powered by <a href="http://www.ruby-lang.org/">Ruby</a> #{::RUBY_VERSION}, ! <a href="http://www.sinatrarb.com/">Sinatra</a> #{Sinatra::VERSION}
!= yield 内に各ファイルの内容が挿入されます。
header, nav(ナビゲーション), aside(サイドバー), footer 等が必要無い場合、ここでタグを削除すれば全てのページから消えます。
webアプリ(動的なページ)を追加する
app.rb に関数を追加すれば、rubyを使って動的なページを作ることが出来ます。
# app.rbの一番最後に追加して下さい。 . . # ユーザエージェントの表示 get '/user_agent' do request.user_agent end
http://127.0.0.1:9393/user_agent
アクセスしたブラウザが表示されます。
スタイルシート
scssを使っています。
Sass - Syntactically Awesome Stylesheets
ミックスインを利用することで 960.gs, Blueprint, Bluetrip のようなグリッドレイアウトがスタイルシートの編集だけで完結します。
views/css/style.scss : 72行目当たり
#contents { @include column; - @include span-17; + @include span-13; @include colborder; section { margin: 0 1em; . . . body > aside { @include column; - @include span-6; + @include span-10; @include last; h1 { font-size: 1.2em; margin: { bottom: 0.5em; }; } h2 { font-size: 1.0em; } h3 { font-size: 0.8em; } p { font-size: small; } ul { font-size: small; } } . .
サイドーバーが横に広くなりました。
css3の角丸デザインもパラメータ指定出来るので、簡単に調整することが出来ます。
views/css/style.scss : 15行目当たり
body > header { @include column; @include span-24; margin-top: 1em; padding-bottom: 0.5em; * { margin: 0; } h1 { @include span-13; - @include border-radius(20px); + @include border-radius(50px); @include box-shadow(3px 3px 2px #888888); font: {
もっと丸くなりました。
border-radiusの実体は以下のようなコードです。
views/css/mixin.scss : 6行目当たり
/* 角丸表示 */ @mixin border-radius($length) { border-radius: $length; -webkit-border-radius: $length; -moz-border-radius: $length; }
@mixin, @include, @import等は普通のcssでは出来ません、scssとても便利です。
