手軽に導入できる!Ruby on RailsでBootStrapを使う方法【初心者向け】

Ruby on RailsでBootstrapを導入する方法を解説しています。デザインの知識がなくても使えるBootstrapですが、railsではGemというものを入れて利用します。初心者でも簡単に理解できるので、ぜひ活用してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

BootstrapとはTwitter社が製作したCSSフレームワークのことです。

これを使用することによって簡単にレイアウトを整えたり、レスポンスブデザインを適用することができたりと、Webアプリケーション開発にあたって重要な知識になります。それでは実際にRubyのフレームワークのRailsで作ったWebアプリケーションで、Bootstrapを使用してみましょう。

Bootstrap自体の使い方はこちらをご覧ください。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

 

田島悠介

今回はRuby on RailsでBootstrapを導入する手順を紹介するよ。

大石ゆかり

田島メンター!!最初は何をすればいいんでしょうか〜?

田島悠介

今回は例として、ボタンをひとつ作成するよ。まずはコントローラーを作成して、「index.html.erb」を編集してみよう。

大石ゆかり

分かりました!

 

実際にBootstrapを使用してみよう

今回はPagesというコントローラーにindexアクションを作成して使用してみたいと思います。

rails g controller Pages index

#以下表示される文字
Running via Spring preloader in process 35186
create app/controllers/pages_controller.rb
route get 'pages/index'
invoke erb
create app/views/pages
create app/views/pages/index.html.erb
invoke test_unit
create test/controllers/pages_controller_test.rb
invoke helper
create app/helpers/pages_helper.rb
invoke test_unit
invoke assets
invoke coffee
create app/assets/javascripts/pages.coffee
invoke scss
create app/assets/stylesheets/pages.scss

そして「index.html.erb」を以下のように編集してください.

<h1>Pages#index</h1>
<p>Find me in app/views/pages/index.html.erb</p>
<%= link_to "Sign up", '#', class: "btn btn-lg btn-primary" %>

以下のようなページが表示されれば成功です。

3fb9f0e1d105c89ccf5d614e63aa4d1c-300x130

その後「Gemfile」に以下を追加してください。

gem 'bootstrap-sass',       '3.2.0.0'

その後Gemfileを読み込むために、ターミナルで、

bundle install

としましょう。

 

大石ゆかり

この「bootstrap-sass」というgemが必要になるわけですね。

田島悠介

そうだね。次に「application.css」を編集しよう。場所は分かるかな?

大石ゆかり

app/assets/stylesheetsの中ですね。やってみます!

 

またBootstrapを適用させるために、「application.css」に以下を追加してください。

@import "bootstrap-sprockets";
@import "bootstrap";

するとボタンのレイアウトにBootstrapが適用されていることがわかります。

db850c5187108495a4037a801d5c6b48-300x167

以上でBootstrapの適用は完了となります。

Bootstrapを使用することで、デザインの知識がなくても短時間でボタンやフォームの作成が可能となります。是非導入してみましょう。自分でコーディングしなくてもレイアウトを整えられるのでおすすめです。

 

田島悠介

最後にrails sを行ってpages/indexを確認してみよう。

大石ゆかり

ボタンが適用されてるのが分かりますね!

田島悠介

Bootstrapを利用することでデザインがとてもやりやすくなるので、ぜひ使っていきたいね。

大石ゆかり

そうですね、積極的に使用してみます。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。