RailsでBootstrapを使うには?実際にボタンを作って学べる!

web開発

2017/04/13

web開発

プログラミング言語RubyのフレームワークであるRuby on RailsでBootstrapを使う方法について解説します。

※Bootstrapとは何かを学習したい人は、Bootstrapについて解説した記事をご覧ください。

Ruby on RailsでBootstrapを使えば、少ない工程でWeb開発ができるでしょう。

本記事ではWeb開発経験のある筆者がRuby on RailsでBootstrapを使う方法について、実際にBootstrapでボタンをを生成することを行いながら使いながら解説します。

ぜひ最後まで読んで、Ruby on RailsにおけるBootstrapの使い方を学習してください。

 

Ruby on RailsでBootstrapを使おう!(プロジェクトの作成)

まずは「rails new」コマンドで新たなプロジェクト(アプリケーション)を作成しましょう。

ターミナルを開いて、デスクトップに「bootstrap_app」というプロジェクト(アプリケーション)を作成します。

以下のコマンドをターミナルに打ち込みましょう。

そして、「bootstrap_app」のフォルダに移動します。

以下のコマンドをターミナルに打ち込みます。

そして、ローカルサーバーを立ち上げて、うまくプロジェクト(アプリケーション)ができているかを確認しましょう。

「rails s」でローカルサーバーを立ち上げて、「http://localhost:3000/」にアクセスします。

「http://localhost:3000/」にアクセスして、以下の画面が現れたら成功です。

http://localhost:3000/

 

Ruby on RailsのプロジェクトにBootstrapを導入しよう!

では、先ほど作成したプロジェクトにBootstrapを導入していきます。

まずはBootstrapのページに行き、「Download Bootstrap」をクリックしてください。

Download Bootstrap

そして、左側にある「Download Bootstrap」より、zipファイルをダウンロードします。

zipファイルをダウンロード

zipファイルの解凍ができたら、ファイルの中に

・CSSフォルダ

・fontsフォルダ

・jsフォルダ

の3つのフォルダがあるかと思います。

3つのフォルダ

今回はその中にある

・bootstrap-theme.css

・bootstrap.css

・fontsフォルダ

・bootstrap.js

の4つを使います。これら4つのファイルとフォルダを以下のようにアプリケーションフォルダに配置します。

・vendor/assets/javascriptsフォルダに「bootstrap.js」を配置

・vendor/assets/stylesheetsフォルダに「bootstrap.css」と「bootstrap-theme.css」を配置

・vendor/assets/に「fontsフォルダ」を配置

します。

以上の配置が完了したら、app/assets/stylesheets/application.cssを以下のように編集します。

※元のソースコードに13行目の「*= require bootstrap」を加えています。

また、app/assets/javascripts/application.jsを以下のように編集します。

※元のソースコードに16行目の「//= require bootstrap」を加えています。

これでRuby on RailsにBootstrap導入の準備ができました。

次の章からは実際にBootstrapを使っていきましょう!

 

Bootstrapを使ってみよう!

では、実際にBootstrapを使っていきます。

今回はscaffoldを使ってアプリケーションを作成していきます。

※scaffoldを詳しく学習したい人は、scaffoldについて解説した記事をご覧ください。

では、以下のコマンドをターミナルに打ち込んでください。今回はTweetモデルに対して、titleカラムとtextカラムを作成します。

では、サーバーを起動させて、「localhost:3000/tweets」にアクセスしましょう。以下の画面になれば成功です。

「localhost:3000/tweets」にアクセスした場合

では、この画面にBootstrapを使ってみましょう。

今回はBootstrapでボタンを作ってみます。BootstrapのButton Groupのページに行きます。

今回はその下にある「Basic example」というソースコードをコピーします。

Basic example

そして、app/views/tweets/index.html.erbを開いて、一番下に先ほどコピーしたソースコードを貼り付けます。

すると、index.html.erbは以下のようになるかと思います。

では、Bootstrapが適応されたかを確認しましょう。再び「localhost:3000/tweets」にアクセスしましょう。

すると、以下のような画面になるかと思います。

Bootstrapの適応結果

ちゃんとBootstrapが適応されていますね。CSSを一度も記述することなくボタンが生成されました。

 

いかがでしたか?Ruby on RailsでBootstrapを使う方法について解説しました。

udemyでは、Ruby on Railsを3日でマスターできる講座を用意しています。ぜひ受講して、Ruby on Railsをマスターしてみてはいかがでしょうか?

  

【3日でマスター!】短期間でRailsをマスターしたい人にオススメです

【3日でできる】はじめての Ruby on Rails 4 入門(Rubyから学べる) - Udemy

【3日でできる】はじめての Ruby on Rails 4 入門(Rubyから学べる) - Udemy

Ruby on Railsをマスターしたら、あなたはどんなWebサービスを作りますか?

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事