Railsにこれから初めて触れる方を対象にしたチュートリアルです
MaterializeというCSSフレームワークを導入するチュートリアルになります
まず、rails newを実行し、Railsアプリのひな型を作成します
rails new materialize-sass
次に、作成したRailsアプリのディレクトリへと移動します
cd materialize-sass
先ほどのrails newでsqlite3のインストールがエラーになっている場合は、以下のようにバージョンを修正します
gem 'sqlite3', '1.3.13'
その後、bundle installを実行します
bundle install
これでOKです！
rails g controllerコマンドを使用して、Viewを作成します
rails g controller web index
その後、config/routes.rbを編集します
Rails.application.routes.draw do
root 'web#index'
get 'web/index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
Viewの作成はこれでOKです！
それでは、Materializeを導入します
今回はgemでインストールするので、materialize-sassを使用します
まず、Gemfileに追加します
# Using materialize-sass
gem 'materialize-sass', '~> 1.0.0'
gem 'jquery-rails
jquery-railsを追加しているのは、後々でJqueryを使うためです
また、この時gem 'duktape'をコメントアウトします
gem 'duktape'の影響でエラーが起きてしまうためです
gem 'duktape'
その後、bundle installを実行します
bundle install
その後、app/assets/javascripts/application.jsに以下のコードを追加します
//= require jquery
//= require materialize
次に、app/assets/stylesheets/application.cssをapp/assets/stylesheets/application.scssにリネームします
リネーム後、以下のコードを追加します
@import "materialize";
最後に、app/views/web/index.html.erbに以下のコードを追加してください
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
あとは、rails sを実行してlocalhost:3000にアクセスしてみてください
これでMaterializeの導入は完了です！