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みたいなシステムということで。)

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を導入してログイン管理を行いたいと思います。

この記事を書いた人

井上 研一

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