• SIS Lab
  • >
  • Blog
  • >
  • SinatraでTwitterBootstrapを使ってTODOアプリを作ってみよう

SinatraでTwitterBootstrapを使ってTODOアプリを作ってみよう

更新日:2023.05.05 作成日:2012.02.29
#Sinatra #TwitterBootstrap

Bootstrap, from Twitter

TwitterBootstrapを使ってみたいと思っていたところに、ドットインストールでTwitterBootstrapのレッスンがあることを発見。

Twitter Bootstrap (v2.0)の基礎 - ドットインストール

改めてドットインストールをやって見たけど想像以上だった。動画で今まさに欲しい情報を見ることが出来るのって素晴らしい。Twitter Bootstrap 使ってみようかなぁってところだったので、これで導入がスムーズになりそう。jQueryのレッスンもあったので、受けてみようって思った。

publicフォルダにCSSを

最初、layout.erbと同じフォルダにTwitterBoostrapのcssフォルダを置いていて、なんでcssが読み込まれないんだろうと思っててたら、Sinatraでは、publicフォルダに静的ファイルを置く作りになってた。勉強不足…

Static Files Static files are served from the ./public directory. You can specify a different location by setting the :public_folder option:

set :public_folder, File.dirname(FILE) + ‘/static’
Note that the public directory name is not included in the URL. A file ./public/css/style.css is made available as http://example.com/css/style.css .

Use the :static_cache_control setting (see below) to add Cache-Control header info.

Sinatra: README

SinatraでTODOアプリを作ってみよう

以下参考にさせてもらいました。

Bootstrap

span6とかclassの名前を指定するだけで、いい感じにしてしてくれるのは嬉しいですね。

layout.erb

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>To Do List</title>
    <meta charset=utf-8 />
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container-fluid">
    <div id="header">
    header
    </div>

<h1>To Do List</h1>
    <div class="row-fluid">
      <div class="span8" id="main">
         <%= yield %>
      </div>
      <div class="span4" id="sidebar" style="background-color:green;">a</div>
    </div>

<span class="synIdentifier">&lt;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&quot;footer&quot;</span><span class="synIdentifier">&gt;</span>
footer
<span class="synIdentifier">&lt;/</span><span class="synStatement">div</span><span class="synIdentifier">&gt;</span>

<span class="synIdentifier">&lt;/</span><span class="synStatement">div</span><span class="synIdentifier">&gt;</span>    
<span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&quot;</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span>
<span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;js/bootstrap.min.js&quot;</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span>


</body>
</html>

index.erb

<form action="/create" method="POST">
  <label>task</label>
  <input type="text" name="user" id="name">
  <input type="submit" value="Add Task!" class="btn" />
</form>


<% @post.each do |p| %>
   <div class="span6" style="height:100px; margin:0 auto 0 auto">
   <%= p.id %> <br />
   <%= p.user %> <br />
   <%= p.create_at %>
   </div>
<% end %>

Gemfile

source :rubygems
gem ‘sinatra‘
gem ‘dm-core‘
gem ‘dm-sqlite-adapter‘
gem ‘dm-migrations‘

config.ru

require ‘rubygems‘
require ‘bundler‘

Bundler.require

require ‘./app.rb‘
run Sinatra::Application

app.rb

# -*- coding: utf-8 -*-
DataMapper.setup(:default, 'sqlite3:db.sqlite3')

class Post
  include DataMapper::Resource
  property :id, Serial
  property :user, String
  property :create_at, DateTime
  auto_upgrade!
end

get '/' do
  @post = Post.all.map{|r| "#{r.id}, #{r.user},#{r.create_at} <br />"} 
  erb :index
end

get '/:id' do
  @post = Post.get(params[:id])
  erb :post
end

get '/create' do
  post = Post.create(:user => params[:user],:create_at => Time.now)
  "#{params[:user]}"
end

post '/create' do
  post = Post.new(:user => params[:user])
  if post.save
    status 201
    redirect '/'+post.id.to_s
  else
    status 412
    redirect '/'
  end
end

こんなのが出来ました。

SinatraでTwitterBootstrapを使ってTODOアプリを作ってみよう

参考

Related contents