Ruby on Rails BootstrapをRuby on Rails6.0に導入する


投稿日:2020年08月27日 (木)
Bootstrapの導入については当サイトのプロジェクト「民泊サイトを構築する(Rails5.0)」で解説しています。
Ruby on Rails6.0でBootstrapを導入する方法について触れることができなかったのでここで取り上げます。

まずはテストアプリケーションを作成します。
「BootTest」という名前のアプリケーションを作成します。

開発手順はかなり簡略化しています。
当サイトのプロジェクトとあわせて導入していただくことをお勧めします。


アプリケーション「BootTest」の作成
~/desktop/test $ rails _6.0.3_ new BootTest -d postgresql


「config/database.yml」ファイルにPostgresqlの設定を記述してデータベースを作成します。
~/Desktop/test/BootTest $ rails db:setup


「yarn」で「jQuery」と「Bootstrap」と「popper.js」をインストールします。
~/Desktop/test/BootTest $ yarn add jquery bootstrap popper.js


「config/webpack/environment.js」ファイルに以下の記述を追加します。
const webpack = require('webpack') 
 environment.plugins.append('Provide', 
   new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     Popper: ['popper.js', 'default'] 
   }) 
 ) 


「config/webpack/environment.js」ファイルの全文です。
const { environment } = require('@rails/webpacker')

module.exports = environment

const webpack = require('webpack') 
 environment.plugins.append('Provide', 
   new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     Popper: ['popper.js', 'default'] 
   }) 
 ) 


「app/javascript」フォルダに「stylesheets」フォルダを作成します。
作成した「stylesheets」フォルダに「application.scss」ファイルを新規作成します。

「app/javascript/stylesheets/application.scss(新規作成したファイル)」に以下の記述を追加します。
@import '~bootstrap/scss/bootstrap';


「app/javascript/packs/application.js」ファイルに以下の記述を追加します。
require("jquery")

import 'bootstrap';
import '../stylesheets/application';


「app/javascript/packs/application.js」ファイルの全文です。
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")

import 'bootstrap';
import '../stylesheets/application';


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)



「app/views/layouts/application.erb.html」ファイルの記述を変更します。

以下の記述を
 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

以下の記述に変更します。
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
「link」を「pack」に変更しただけです。


「app/views/layouts/application.erb.html」ファイルの全文です。
<!DOCTYPE html>
<html>
  <head>
    <title>BootTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>



設定はこれで完了です。
では実際にレスポンシブなナビゲーションバーを作成します。

ホームページのコントローラを作成しておきます。
~/Desktop/test/BootTest $ rails g controller Pages home


「app\views」フォルダに「shared」フォルダを新規作成します。
作成した「shared」フォルダに「_navbar.html.erb」ファイルを新規作成します。


「app/views/shared/_navbar.html.erb(新規作成したファイル)」
Bootstrapサイトのサンプルコードです。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


レイアウトファイル「app/views/layouts/application.erb.html」にレンダーの記述を追加します。

以下の記述を追加
<%= render 'shared/navbar' %>


「app/views/layouts/application.erb.html」ファイルの全文です。
<!DOCTYPE html>
<html>
  <head>
    <title>BootTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

    <!-- _navbar.html.erb をレンダーする -->
    <%= render 'shared/navbar' %>
    
    <!-- ページをコンテナに格納 -->
    <div class="container">
      <%= yield %>
    </div>

  </body>
</html>



サーバを起動してブラウザを確認してみます。
http://localhost:3000/pages/home




ドロップダウンが機能しています。





ウィンドウを小さくした時にバーガーメニューも機能しています。


MrRadiology 15日前





Rails6.0 Windows MacOSX

動画学習サイトの構築 Rails6.0

  0 (0)

タスク   128

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

民泊サイトの構築 Rails6.0

  0 (0)

タスク   128

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

動画学習サイトの構築 Rails5.0

  0 (0)

タスク   100

1,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

お仕事売買サイトの構築 Rails6.0

  0 (0)

タスク   146

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

民泊サイトの構築 Rails5.0

  0 (0)

タスク   136

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。