Help us understand the problem. What is going on with this article?

rails でflashメッセージを作成(toastrを使う)

More than 1 year has passed since last update.

はじめに

忘れそうなのでメモしました。

gemインストール

gem "toastr-rails"
$ bundle install
assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require toastr #これを追加します。
//= require_tree .
assets/stylesheets/application.scss
@import "toastr"; #これを追加します。

もし、sassを使っていなければ、

assets/stylesheets/application.css
*= require toastr

これで準備完了です。

使う前にちゃんと使えるかテストして見ます。
application.html.erbに以下のように追加します。

application.html.erb
<script type="text/javascript">
  toastr.success("hello")
</script>

これを追加してページにアクセスすると以下のようなアラートが右上に出現します。

スクリーンショット 2019-07-04 16.50.54.png

色はこの4色みたいです。以下参考

application.html.erb
<script type="text/javascript">
  toastr.success("hello")
  toastr.warning("hello")
  toastr.error("hello")
  toastr.info("hello")
</script>

スクリーンショット 2019-07-04 18.22.13.png

flashメッセージに適応する

まず、前提としてflashのシンボルは :alert と :notice の2つです。(deviseを使ってたのでその2つになりました)ホントは :error と :successのほうが都合がいいのですが。。。
flashメッセージがある時適宜flashを使いたいのでapplication.html.erbに記述します。

layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>InstagramClone</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= 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, shrink-to-fit=no">
  </head>

  <body>
    <%= render 'layouts/header' if user_signed_in? %>
    <%= yield %>
    <%= render "layouts/footer" %>

<!--ここから下を追加しています。----------------------- -->
    <% if flash.any? %>
      <script type="text/javascript">
        <% flash.each do |key, value| %>
          <% key = "success" if key == "notice" %>
          <% key = "error" if key == "alert" %>
          toastr['<%= key %>']('<%= value %>');
        <% end %>
      </script>
    <% end %>
<!--ここまでです----------------------------------- -->
  </body>
</html>

まず、if flash.any? flashがあるかないかを判定してます。その次に見た目が奇妙なのですが、
scriptタグでflashのeach分を囲ってます。

でtoastrで扱うメソッドが :info :success :error :warning の4つです。しかし、flashのシンボルが :alert と :notice になっているため、変換して上げる必要があります。
その記述が以下の2つになります。

<% key = "success" if key == "notice" %>
<% key = "error" if key == "alert" %>

:notice を :success に :alert を :error に変換してます。
最後に値をtoastrに入れて終わりです。

おまけ

こんな書き方も出来るみたいです。

layouts/application.html.erb
<% if flash.any? %>
  <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 %>
sakakinn
主にRailsについて記事を投稿しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away