Ruby on Rails マテリアルデザイン【Materialize】の導入


投稿日:2020年08月27日 (木)
レスポンシブデザインでもっとも人気があるのは「Bootstrap」です。
当サイトのプロジェクト「民泊サイトを構築する(Rails5.0)」でもBootstrapの導入方法を解説しています。

他のプロジェクトでは全て「Bulma」を導入しています。

今回はプロジェクトで触れることができなかった「Materialize」の導入方法を解説します。
導入さえしてしまえばMaterializeサイト通りの記述をするだけで見た目が変わります。

「Materialize」の導入はRails5.0で行います。

まずはGemFileに以下の記述を追加します。
jqueryを使えるようにする必要があります。
gem 'jquery-rails'
gem 'materialize-sass', '~> 1.0.0'
gem 'material_icons'

インストールします。
bundle

リネーム

「app¥assets¥stylesheets¥application.css」ファイルの拡張子に「s」をつけて「scss」ファイルに変更します。(application.scss)

リネームした「app¥assets¥stylesheets¥application.scss」ファイルに以下の記述を追加します。
@import "materialize";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

記述を追加したファイルの全文です。
【app¥assets¥stylesheets¥application.scss】
@import "materialize";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}


続いて「app¥assets¥javascripts¥application.js」ファイルに以下の記述を追加します。
//= require materialize-sprockets


記述を追加したファイルの全文です。
【app¥assets¥javascripts¥application.js】
// 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 materialize-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .


導入はこれで終わりです。

実際に使用するビューについて解説します。
レイアウトにナビゲーションバーの記述を追加します。
ナビゲーションバーをレスポンシブデザインで動作させるためには以下のスクリプトが必要です。
  <script>

    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, options);
    });

    // Or with jQuery

    $(document).ready(function(){
      $('.sidenav').sidenav();
    });

    // Navbar Dropdown Menu
    $(".dropdown-trigger").dropdown();


  </script>


また、アイコンを利用するために「app¥views¥layouts¥application.html.erb」ファイルのheadタグ内に以下の記述が必要です。
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 


実際にどのような記述になるか、レイアウトビューファイルを載せておきます。
【app¥views¥layouts¥application.html.erb】
<!DOCTYPE html>
<html>
  <head>
    <title>Materializeテスト</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
  </head>

  <body>
    <header>

      <!-- ドロップダウン -->
      <ul id="dropdown1" class="dropdown-content">
        <li><a href="#!">プロフィール</a></li>
        <li><a href="#!">受講コース</a></li>
        <li class="divider"></li>
        <li><a href="#!">ログアウト</a></li>
      </ul>

      <!-- ドロップダウン2 -->
      <ul id="dropdown2" class="dropdown-content">
        <li><a href="#!">プロフィール</a></li>
        <li><a href="#!">受講コース</a></li>
        <li class="divider"></li>
        <li><a href="#!">ログアウト</a></li>
      </ul>

      <!--  ナビゲーションバー -->
      <nav class="brown lighten-4 z-depth-2">
        <div class="container">

          <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Materializeテストサイト</a>
            <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">Menu</i></a>
            <ul class="right hide-on-med-and-down">
              <li><a href="#">コース</a></li>
              <li><a href="#">サインアップ</a></li>
              <li><a href="#">ログイン</a></li>

              <!-- Dropdown Trigger -->
              <li><a class="dropdown-trigger" href="#!" data-target="dropdown1"><i class="material-icons right">コース受講者名</i></a></li>

            </ul>
          </div>
        </div>

      </nav>

      <ul class="sidenav" id="mobile-demo">
        <li><a href="#">コース</a></li>
        <li><a href="#">サインアップ</a></li>
        <li><a href="#">ログイン</a></li>

        <!-- ドロップダウントリガー -->
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">コース受講者名<i class="material-icons right"></i></a></li>
      </ul>

    </header>

    <main>
      <div class="container">
        <%= yield %>
      </div>

    </main>

    <footer class="page-footer brown lighten-4">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Materializeテストサイト</h5>
            <p class="grey-text text-lighten-4">Materializeテストサイトです。</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">ソーシャル</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Twitter</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Facebook</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Google Plus</a></li>

            </ul>
          </div>
        </div>
      </div>

      <div class="footer-copyright">
        <div class="container">
        c 2020 Copyright Materializeテストサイト
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        <%= link_to "About Us", pages_about_path, :class => "grey-text text-lighten-4 right" %>
        </div>
      </div>
    </footer>

  </body>

  <script>

    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, options);
    });

    // Or with jQuery

    $(document).ready(function(){
      $('.sidenav').sidenav();
    });

    // Navbar Dropdown Menu
    $(".dropdown-trigger").dropdown();

  </script>

</html>


当サイトのRails5.0プロジェクトでは「Materialize」を導入していませんが参考にしていただけると幸いです。
ちなみに当サイトのデザインは「Bulma」を導入しています。


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秒ほどかかります。