↓↓クリックして頂けると励みになります。
【08 | 日本語化】 << 【ホーム】 >> 【10 | Gmailの利用】
Notyは、通知メッセージを表示するためのJavaScriptライブラリであり、Railsアプリケーションで使用することができます。
notyのデザインについては以下を参照して下さい。
ned.im
Rails6.1では、notyをCDNで読み込ませる際に「app/views/layouts/application.html.erb」ファイルのheadタグに直接記述していました。
Rails7.1ではimportmapが標準となり、そこからCDNを読み込ませることができますが、notyが古いため読み込めません。
Rails6.1で利用していたのと同じ手法でnotyを実装することにします。
CDNの記述を直接追加します。
「app/views/layouts/application.html.erb」ファイルのheadタグ内に以下の記述を追加します。
<!-- noty --> <script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js" integrity="sha512-lOrm9FgT1LKOJRUXF3tp6QaMorJftUjowOWiDcG5GFZ/q7ukof19V0HKx/GWzXCdt9zYju3/KhBNdCLzK8b90Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css" integrity="sha512-0p3K0H3S6Q4bEWZ/WmC94Tgit2ular2/n0ESdfEX8l172YyQj8re1Wu9s/HT9T/T2osUw5Gx/6pAZNk3UKbESw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
また、以下の記述を削除し、そこに「<%= render 'shared/notification' %>」の記述を追加します。
削除する記述 app\views\layouts\application.html.erb
<p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>
記述更新 app\views\layouts\application.html.erb
<!DOCTYPE html> <html> <head> <title>GigHub7</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> <!-- noty3.1.4 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js" integrity="sha512-lOrm9FgT1LKOJRUXF3tp6QaMorJftUjowOWiDcG5GFZ/q7ukof19V0HKx/GWzXCdt9zYju3/KhBNdCLzK8b90Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css" integrity="sha512-0p3K0H3S6Q4bEWZ/WmC94Tgit2ular2/n0ESdfEX8l172YyQj8re1Wu9s/HT9T/T2osUw5Gx/6pAZNk3UKbESw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <!-- ナビゲーションバー --> <%= render "shared/navbar" %> <!-- noty --> <%= render 'shared/notification' %> <%= yield %> </body> </html>
「app\views\shared」フォルダに「_notification.html.erb」ファイルを新規作成します。
app\views\shared\_notification.html.erb(新規作成したファイル)
<% unless flash.empty? %> <script> <% flash.each do |key, value| %> <% type = key.to_s.gsub('alert', 'error').gsub('notice', 'success') %> new Noty ({ type: '<%= type %>', layout: 'topRight', timeout: '5000', theme: 'sunset', text: '<%= value %>' }).show(); <% end %> </script> <% end %>
バリデーションのメッセージもnotyで表示できるようにします。
記述更新 app\views\devise\shared\_error_messages.html.erb
<% if resource.errors.any? %> <script> <% resource.errors.full_messages.each do |message| %> new Noty ({ type: 'error', layout: 'topRight', timeout: '5000', theme: 'sunset', text: '<%= message %>' }).show(); <% end %> </script> <% end %>
ブラウザ確認
http://localhost:3000/
【08 | 日本語化】 << 【ホーム】 >> 【10 | Gmailの利用】
↓↓クリックして頂けると励みになります。