周回遅れで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みたいなシステムということで。)
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だけでも可)します。
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をインストールしたら、プロジェクトにも導入します。
# cssファイル、jsファイルなどが配置されます。
rails g bootstrap:install
# layoutファイルを作成(application.html.erbは既存なので上書き確認が出る)
# fluidオプションを指定しているので、レスポンシブデザインに対応する
rails g bootstrap:layout application fluid
この時点で同じ画面を開いてみると・・・
なんと!Bootstrapでできた、よくあるWebサービスっぽい画面になっている!
ついでに、スタティックなトップページを作成しておきます。
rails g controller pages index
config/routes.rbを編集して、pages#indexをトップページにします。
root :to => 'pages#index'
public/index.htmlを削除するのを忘れないようにします。
rm -f public/index.html
良い感じです。思わず会員登録してしまいそうです。
まとめ
ということで、まずはtwitter-boostrap-railsの導入までを進めました。
次回はDeviseを導入してログイン管理を行いたいと思います。