簡単にSinatraアプリを作るための「Sinatra Easy Template」

rubySinatraを使って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とても便利です。

今後の構想

  • 空のテンプレートを生成するコマンドを作る (rails scaffold に相当)
  • 多言語化 : index.ja.haml とか置いたら日本語環境の時はindex.hamlの代わりに使われるように
  • デザインテンプレートを何パターンか増やす (募集中)
  • 実際に利用するサイトがもっと増えるといいな (募集中)

感想、バグ報告、パッチ等、頂けたら嬉しいです。