2013.04.28 · 技術と道具

Ruby on Railsってtwitter-bootstrap-railsとDeviseを使ったらすぐにクールなアプリが作れるじゃん(その1)

周回遅れでRuby on Railsをやっているなぁというのは重々承知なのですが、やっぱりLightweight Lauguage(って最近言わなくなったよね?それがふつうになったから?)好きの私としてはRubyとRuby on Railsは嗜んでおかないといけないと思うわけで、最近やっています。

いや、Ruby自体は2004年頃にLinuxZaurus向けのアプリを開発するのに使っていたし、一昨年くらいにRails(しかもJRuby)でアプリを書いたこともあるのですがね。(強がり)
でも、あんまりマスターした感がなかった。なので、今一度腰を据えてやろうとしているわけです。

twitter-bootstrap-railsでサクッと良いデザインのサイトを作る

Bootstrapは結構使っていて、Artisan Edgeのサイトなどは完全Bootstrapですし、最近はSublime Text 2+ZenCoding+BootstrapじゃないとHTMLを書く気にならないのですが、Railsですとtwitter-bootstrap-railsを使うと実にサクリとできるそうじゃないですか!

twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 – ppworks blogを参考にさせていただきました。だって、トリプルいいことがあるらしいし。

(今回はCommunityManagerというアプリを作ってみたいと思います。ま、ATNDみたいなシステムということで。)

BASH
rails new community_manager
rails g scaffold event name:string start_datetime:datetime end_datetime:datetime place:string content:text participation_limit:integer
rake db:migrate
rails s #Webサーバの起動

Scaffoldでアプリができました。

Gemfileに下記を追加して、bundle install(もしくはbundleだけでも可)します。

RUBY
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'less-rails' #あとで必要と言われるのでこの行も追加
gem 'coffee-rails', '~> 3.2.1'
gem 'twitter-bootstrap-rails' #まずはこの行を追加
gem 'therubyracer', :platforms => :ruby #あとで必要と言われるのでこの行のコメントを外しておく
gem 'uglifier', '>= 1.0.3'
end

twitter-bootstrap-railsのGemをインストールしたら、プロジェクトにも導入します。

BASH
# cssファイル、jsファイルなどが配置されます。
rails g bootstrap:install
# layoutファイルを作成(application.html.erbは既存なので上書き確認が出る)
# fluidオプションを指定しているので、レスポンシブデザインに対応する
rails g bootstrap:layout application fluid

この時点で同じ画面を開いてみると・・・

なんと!Bootstrapでできた、よくあるWebサービスっぽい画面になっている!

ついでに、スタティックなトップページを作成しておきます。

BASH
rails g controller pages index

config/routes.rbを編集して、pages#indexをトップページにします。

RUBY
root :to => 'pages#index'

public/index.htmlを削除するのを忘れないようにします。

BASH
rm -f public/index.html

良い感じです。思わず会員登録してしまいそうです。

まとめ

ということで、まずはtwitter-boostrap-railsの導入までを進めました。
次回はDeviseを導入してログイン管理を行いたいと思います。

2013/04/28 11:22
← いまさらだけど、世界最小ミラーレス一眼 PENTAX Q レ…
Ruby on Railsってtwitter-bootstr… →
井上 研一
経済産業省推進資格ITコーディネータとして中小企業のDX・AI活用の現場で伴走支援を行う。「ITCプロセスガイドライン4.0」および「中小企業向けAI活用ガイド」執筆メンバー。著書・講演多数。ITエンジニアとして25年以上の実務経験。AI導入の実務に10年以上携わる。自ら開発したAIサービス「Gen2Go」が北九州発!新商品創出事業の認定を受ける。2026年4月より北九州市立大学大学院マネジメント研究科の学生としての顔も持つ。

本サイトおよびブログに掲載している内容は、特に明記のない限り、井上研一個人の見解に基づくものです。所属・関与する組織、団体、企業、研究会等の公式見解を示すものではありません。