Rails6.1 | 民泊予約アプリ作成 | 09 | Notyの利用 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【 08 | 日本語化】 << 【ホーム】 >> 【10 | Gmailの利用】

Notyは、通知メッセージを表示するためのJavaScriptライブラリであり、Railsアプリケーションで使用することができます。

notyのデザインについては以下を参照して下さい。
ned.im

Rails6.0を利用していた時、notyはyarnを使ってインストールていましたが、application.scssからのスタイルシート読み込みが本番環境のRails6.1でできなくなってしまったので、CDN経由で読み込ませることにします。
ただ、本番環境では動きませんが、念の為yarnでの追加も行っておきます。

コマンド
yarn add noty@3.1.4

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>VacationRental</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <!-- bootstrap5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

    <!-- 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\javascript\packs\application.js」に以下の記述を追加します。

記述追加　app\javascript\packs\application.js(19行目)

window.Noty = require("noty")

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.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

// jQuery
require("jquery")

// noty
window.Noty = require("noty")

「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 %>