comments 2

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

Ruby on Rails
Ruby on Rails / Andrew*

周回遅れで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を使うと実にサクリとできるそうじゃないですか!

(今回は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サーバの起動

Community manager rails 2013 04 28 10 52

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

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

Community manager rails 2013 04 28 11 04

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

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

rails g controller pages index

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

root :to => 'pages#index'

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

rm -f public/index.html

Community manager rails 2013 04 28 11 16

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

まとめ

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

Ruby on Rails / Andrew*

前回に引き続き、Ruby on Railsです。

https://inoccu.com/blog/2013/04/28/1122…

Filed under: プログラミング

About the Author

Posted by

ITエンジニア/経済産業省推進資格ITコーディネータ 株式会社ビビンコ代表取締役 AI・IoTに強いITコーディネータとして活動していたところ、ビジネスコンテスト「北九州でIoT」での入選をきっかけに、株式会社ビビンコを創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行う。 日本全国でセミナー・研修講師としての登壇も多数。 近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。

2 Comments

コメントを残す