【Rails】【ソースコードあり】簡単にMaterializecssを導入する方法

Materializeというフレームワークをご存知でしょうか?グーグルの提唱するマテリアルデザインに基づいたフロントエンドのフレームワークです。

https://materializecss.com

今回は、RailsでMaterializecssの導入からナビゲーションバー ・モーダルの設置まで実際に操作しながらやっていきたいと思います。

ソースコードはこちら

https://github.com/FumiOnRails/materializecss-text

実行環境はCloud9で行います。

Materializecssの導入

  1. Gemfileの編集
  2. application.scssの編集
  3. application.jsの編集

Materializecssのハンズオン

  1. controllerとviewの作成
  2. ナビゲーションバーの設置
  3. モーダルの設置

Materializecssの導入

1.Gemfileの編集

まずはgemでmaterializeのインストールをしましょう。以下を追加してbundleします。アイコンをしようする場合は、material_iconsも追加します。

Gemfile

source 'https://rubygems.org'

gem 'rails', '~> 5.0.0'

#gem sqlite3だと1.4がインストールされてうまく行かない
#version 1.3.13を指定して回避
gem 'sqlite3','1.3.13'

gem 'puma', '~> 3.0'

#sass-railsは2019/3/26でサポートが終わるので、sassc-railsを使う
# https://github.com/sass/sassc-rails
gem 'sassc-rails'

gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'

# materializecssはjqueryを使用しているので、
# 導入されていることを確認する。
gem 'jquery-rails'

gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'

# Materializecssの導入
gem 'materialize-sass', '~> 1.0.0'
# Materializeのアイコンの導入
gem 'material_icons'

group :development, :test do
  gem 'byebug', platform: :mri
end

group :development do
  gem 'web-console'
  gem 'listen', '~> 3.0.5'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

注意点としては、jqueryがインストールされている事を確認する事です。materializecssはjqueryを使用しているので、提供されているjavascriptのパーツが動かないです。

また、materializecssとは直線関係ありませんが、sqlite3のバージョン指定とsass-rails=>sasscへの変更もやっておきましょう。

Terminal

bundle install

bundle installしてエラーがなければ完了です。

2.application.scssの編集

次にapplication.scssファイルを編集します。application.cssがある場合は削除し、代わりにapplication.scssを追加します。そして以下のコードを書き込んでMaterializeをインポートします。

app/assets/stylesheets/application.scss

/*
 * 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, vendor/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 material_icons
 *= require_self
 *= require_tree .
 */

// materializecssをインポートする
@import "materialize";

3.application.jsの編集

最後にapplication.jsを編集します。MaterializeのJapascriptが使えるようにしましょう。以下をapplication.jsに追加します。先ほども言った通り、materializecssはjqueryを使用しているので、materialize-sprocketsはjqueryより下に配置します。

app/assets/javascript/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, vendor/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 jquery_ujs
//= require materialize-sprockets
//= require turbolinks
//= require_tree .

以上で、Materializeの導入は終わりです。

Materializecssのハンズオン

このパートでは、よく使うパーツであるナビゲーションバーとモーダルの使い方を実際に動かしながら、解説していきます。

完成品はこちらになります。

それでは早速やっていきましょう。

1.controllerとviewの作成

下準備として静的ページを作ります。homeコントローラーを作成し、indexアクションを追加しましょう。

Terminal

rails g controller home

app/controllers/home_controller.rb

class HomeController < ApplicationController

  def index
  end
end

次にhomeのviewを作成し、”Hello Materialize”を出力してみましょう。まず、以下のコードを実行します。

Terminal

touch app/views/home/index.html.erb

app/views/home/index.html.erb

<h1>Hello Materialize</h1>

次に、homeのindexをルートパスに設定します。

config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
end

Terminalでrails serverを実行し、”Hello Materialize”が出力できれば準備は完了です。

2.ナビゲーションバーの設置

では、Materializecssのパーツを使ってみましょう。

Materializecssのパーツは、大きく分けて2つあります。

javascriptによる初期化が必要なパーツと必要のないパーツです。
ナビゲーションバーは後者になります。

javascriptによる初期化が必要ないパーツは、classをつけるだけで使用できるようになります。

以下のコードを書いて、ナビゲーションバーを導入しましょう。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MaterializecssTest</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!--レスポンシブデザインにするために追加-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body>
    <!--グローバルナビゲーションの配置-->
    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#">Sass</a></li>
          <li><a href="#">Components</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
    </nav>
    
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

ナビゲーションバーがページの上部に表示されれば、成功です。

3.モーダルの設置

最後にモーダルを追加します。

このパーツは、javascriptによる初期化が必要です。

初期化は、使用するページのどこかにjavascriptを書き込むことでできるようになります。今回はapp/assets/javascriptのフォルダにinit.jsファイルを作成します。(bodyタグに埋め込むとあとで管理が煩雑になるため)

まず、init.jsを作成しましょう。

Terminal

touch app/assets/javascript/init.js

初期化の方法は、materializecss.comの公式ドキュメントを参考にします。

https://materializecss.com/modals.html

モーダルの初期化は、以下のように書き込みます。

app/assets/javascript/init.js

 // modal の初期化
  
  // 注意点1 イベントの着火をDOMContentLoaded => turbolinks:loadに変える
  document.addEventListener('turbolinks:load', function() {
  // 注意点2 countを0にセットする
    M.Modal._count = 0;
    var elems = document.querySelectorAll('.modal');
    // optionsで公式docsを参考にカスタマイズ
    var options = {
      opacity: 0.8,
      inDuration: 100	
    };
    M.Modal.init(elems, options);
  });

注意点は2つあります。

まずは、gem turbolinksを使用している場合、イベントの着火をDOMContentLoaded => turbolinks:loadに変えることです。詳しくはこちらを参照ください。

2つ目は、モーダル特有のものです。M.Modal._count = 0;でカウントを0にセットします。バクか仕様かは、わかりませんが、0にしないと起動しないことがあります。

最後にindexページのマークアップをしましょう。

app/views/home/index.html.erb

  <h1>Hello Materialize</h1>
  
  <!-- Modalのトリガー。ボタン部分-->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modalの本体。ボタンを押すことで起動 -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

気をつける部分は、modalのトリガー部分のクラスに”modal-trigger”を付与すること、href=”#modal1″とモーダル本体のid=”modal1″を一致させることです。

rails serverでページを開き、モーダルが起動すれば完了です。

以上で、materializecssの簡単な使い方の解説は終わりです。皆さんもぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です