今回はRuby on RailsでBootstrap4を使う方法を記載したいと思います。
最終的にはECサイトを作成したいと思います。
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| ruby | 2.4.2p198 |
| Rails | 5.1.4 |
Bootstrap4デザインのインストール
Gemfileにbootstrapを追加します。
ディレクトリの場所「アプリケーション名/」
対象ファイル「Gemfile」
[ファイルの編集]
|
1 |
$ vi Gemfile |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.1.4' # Use mysql as the database for Active Record gem 'mysql2', '>= 0.3.18', '< 0.5' # Use Puma as the app server gem 'puma', '~> 3.7' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # See https://github.com/rails/execjs#readme for more supported runtimes gem 'therubyracer', platforms: :ruby # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] # Adds support for Capybara system testing and selenium driver gem 'capybara', '~> 2.13' gem 'selenium-webdriver' end group :development do # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', '< 3.2' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # jquery gem "jquery-rails" gem "jquery-turbolinks" # Bootstrap4デザイン gem 'bootstrap', '~> 4.0.0.alpha3' |
[追加した部分]
|
1 2 3 4 5 6 |
# jquery gem "jquery-rails" gem "jquery-turbolinks" # Bootstrap4デザイン gem 'bootstrap', '~> 4.0.0.alpha3' |
私の場合は、「jquery-rails」がデフォルトで記載していなかった為、追加します。
[bundleインストール]
|
1 |
$ bundle install |
ディレクトリの場所「app/assets/stylesheets/」
対象ファイル「application.scss」
app/assets/stylesheets/application.cssを「application.scss」に名前を変更して以下の記述を加えます。
「application.css」の一応バックアップを取って置きます。
[application.cssのバックアップ]
|
1 |
$ cp application.css application.css_bk |
[リネーム]
|
1 |
$ mv application.css application.scss |
[ファイルの確認]
|
1 |
$ ls -al |
[実行結果]
|
1 2 3 4 5 6 |
total 20 drwxrwxr-x 2 uchida uchida 4096 Dec 18 21:08 . drwxrwxr-x 6 uchida uchida 4096 Dec 14 13:33 .. -rw-rw-r-- 1 uchida uchida 709 Dec 18 20:58 application.css_bk -rw-r--r-- 1 uchida uchida 709 Dec 18 21:05 application.scss -rw-rw-r-- 1 uchida uchida 179 Dec 14 14:49 shopping.scss |
名前が変更されました。
・application.scssに@import "bootstrap";を追加します。
[ファイルの編集]
|
1 |
$ vi app/assets/stylesheets/application.scss |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ @import "bootstrap"; |
[追加した部分]
|
1 |
@import "bootstrap"; |
・application.scssに「*= require_tree .」「*= require_self」を削除します。
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * * * */ @import "bootstrap"; |
[削除した部分]
|
1 2 |
*= require_tree . *= require_self |
ディレクトリの場所「app/assets/javascripts/」
対象ファイル「application.js」
app/assets/javascripts/application.jsに以下のように記述します。
[ファイルの編集]
|
1 |
$ vi app/assets/javascripts/application.js |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require bootstrap //= require jquery_ujs //= require rails-ujs //= require turbolinks //= require_tree . |
[追加した部分]
|
1 2 3 |
//= require jquery //= require bootstrap //= require jquery_ujs |
これでBootstrapの設定が完了したので、ビューにBootstrapのクラスを指定します。
ディレクトリの場所「app/views/shopping/」
対象ファイル「index.html.erb」
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="header"> <div class="nav-left"> <div id="head-logo"> <%= link_to image_tag('/images/logo/logo_001.png'), '/' %> </div><!-- head-logo --> </div><!-- nav-left --> <div id="nav-search"> <%= form_tag '/', :method => 'get' do %> <p> <%= text_field_tag :search, params[:search], placeholder: "キーワード検索", class: "form-control" %> <%= button_tag "検索", :name => nil, class: "btn btn-primary" %> </p> <% end %> </div><!-- nav-search --> </div><!-- header --> <h1>Hello</h1> <p> 現在登録されているユーザは次のとおりです。 </p> <p> <!-- アクションから渡されてきたモデルクラスのオブジェクトの配列の数だけ順にメールアドレスとパスワードを取得して画面に>表示 --> <% @users.each do |user| %> [メールアドレス] <%= user.email %>, [パスワード] <%= user.password %><br /> <% end %> </p> |
[変更した部分]
|
1 2 |
<%= text_field_tag :search, params[:search], placeholder: "キーワード検索", class: "form-control" %> <%= button_tag "検索", :name => nil, class: "btn btn-primary" %> |
フィールドに「class: “form-control”」を加えます。
Submitボタンに「class: “btn btn-primary”」を加えます。
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
見た目がBootstrapデザインに変わったことがわかります。
[変更前]
[変更後]
これで一通りの作業が終了しました。
Ruby on Rails5でコントローラーからテンプレートの表示
Ruby on Rails5でモデルの作成とデータベースの利用
Ruby on Rails5でBootstrap4デザインにする
Ruby on Rails5で検索フォームと一体型になった検索ボタン作成方法
Ruby on Rails5でFontAwesomeを導入する方法(アイコンが使用可能)
Ruby on Rails5でBootstrap4のナビゲーションバーを使用する方法
Ruby on Rails5でBootstrap4のナビゲーションバーに画像(ロゴ)を設置
Ruby on Rails5でBootstrap4を使用しながらCSSを使用する
Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法
Ruby on Rails5でBootstrap4のドロップメニューログインアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューでカートアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューで注文履歴を作成
