学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails7.1 | 仕事売買アプリ作成 | 09 | Notyの利用

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




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



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

Notyの利用
Notyの利用


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/

Notyの利用
Notyの利用



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





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

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)