Ruby on Rails 【フラッシュメッセージ】Ruby on Rails6.0でtoastrを使う


投稿日:2020年08月27日 (木)
当サイトのプロジェクト「民泊サイトを構築する(Rails5.0)」でtoastrを利用したフラッシュメッセージの表示を解説しています。
Ruby on Rails6.0でtoastrを利用できるようにする方法について触れる機会がなかったのでここで紹介したいと思います。

Ruby on Rails6.0でtoastrをインストールする場合はyarnを利用します。
~/Desktop/test/ToastrTest $ yarn add toastr


「config/initializers/assets.rb」ファイルに以下の記述を追加します。
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.js']
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.css']


「config/initializers/assets.rb」ファイルの全文です。
# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )

Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.js']
Rails.application.config.assets.precompile += ['node_modules/toastr/build/toastr.min.css']



「app/javascript/packs/application.js」ファイルに以下の記述を追加します。
import toastr from 'toastr'
import './src/application.scss'

window.toastr = toastr


「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';

import toastr from 'toastr'
import './src/application.scss'

window.toastr = toastr

// 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/javascript/packs」フォルダに「src」フォルダを新規作成します。
作成した「src」フォルダに「application.scss」ファイルを新規作成します。


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


これでtoastrの設定は完了です。
では実際にビューを作成してテストしてみます。

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


「app/views/shared/_message.html.erb(新規作成したファイル)」を以下の記述を追加します。
<% unless flash.empty? %>
  <script type="text/javascript">
    <% flash.each do |key, value| %>
      <% type = key.to_s.gsub('alert','error').gsub('notice','success') %>
      toastr['<%= type %>']('<%= value %>')
    <% end %>
  </script>
<% end %>


「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。
<%= render 'shared/message' %>


「app\views\layouts\application.html.erb」ファイルの全文です。
<!DOCTYPE html>
<html>
  <head>
    <title>ToastrTest</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' %>

    <!-- toastr -->
    <%= render 'shared/message' %>
    
    <!-- ページをコンテナに格納 -->
    <div class="container">
      <%= yield %>
    </div>

  </body>
</html>



これでフラッシュメッセージがtoastr表示になりました。





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