gem toastrの導入 - ケーキ屋さんがプログラミングしてみた

こんにちはー

ただいまコピーサイトを作って勉強中

今回は、、、、、

gem toastrについて

検索してみるとこちらのgithubがhitしました。

GitHub - tylergannon/toastr-rails: Rails engine for https://github.com/CodeSeven/toastr

んー、toastrってなんだ！

どうやら、

「ログインしました」「ログアウトしました」「emailを入力してください」

など、アラートやエラーメッセージを表示させる際に活躍するようです。

demoはこちら→toastr examples

f:id:norika69:20170121155223p:plain

こんな感じ！

jQueryを使用するのでまずはjQueryを導入する必要があります。

railsに関してはデフォルトで入ってるから大丈夫！

Gemfileにデフォルトで記載されているgemについて - Qiita

今回はユーザー管理に便利なgem deviseと一緒に使用します。

deviseの導入に関しては今回は省きますー

参照→Deviseの設定手順をまとめてみた。その1 導入編 - Qiita

ではgem toastr 早速導入してみましょー＼(^o^)／

① Gemfileに記述

　 gem 'toastr-rails'　

　⚠️bundle install忘れずに

② toastrをapplication.cssとapplication.jsに追加

application.cssに、

*= require toastr

scssの場合は、

@import "toastr";

application.jsに、

//= require toastr

③ jsでtoastrを呼び出す

・トップページのアラートにtoastrを適応したい時

　app/views/layouts/application.html.erb

<!-- flashにメッセージがある時 -->
<% unless flash.empty? %>
 　<script type="text/javascript">
 　　<% flash.each do |f| %>
 　　　<% type = f[0].to_s.gsub('alert','error').gsub('notice','info') %>
　　　　　toastr['<%=type %>']('<%=f[1] %>');
 　　<% end %>
　　</script>
<% end %>

f:id:norika69:20170121154609p:plain

・devise関連のビューのアラートにtoastrを適応したい時

　app/views/devise/〇〇.html.erb

<%= devise_error_messages! %>をすべて以下の記述に変える。

（部分テンプレート化すると楽💮 ）

<% unless resource.errors.empty? %>
　<script type= "text/javascript">
　　<% resource.errors.full_messages.each do |msg| %>
　　　toastr.error('<%= msg %>');
　　<% end %>
　</script>
<% end %>

f:id:norika69:20170121154440p:plain

それぞれこんな感じにアラートをカスタマイズできました💓

なお、アラートメッセージを日本語化したい時は、

config/locales/devise.en.ymlの記述をそれぞれ日本語に変更することで、

日本語化することができます◎💡

参考→Railsのログイン認証gemのDeviseのカスタマイズ方法 - Rails Webook

今回はこんな感じで終了ーーーー＼(^o^)／