↓↓クリックして頂けると励みになります。
Ruby on Railsの"Noty"は、通知メッセージを簡単に表示するためのJavaScriptライブラリです。
Notyは、ウェブアプリケーションやウェブサイトで、ユーザーにメッセージや通知を表示するための美しくカスタマイズ可能なポップアップ通知を生成するのに役立ちます。
試しているRailsのバーションは6です。
notyのデザインについては以下を参照して下さい。
ned.im
notyはyarnを使ってインストールします。
コマンド
yarn add noty
「app\javascript\packs\application.js」に以下の記述を追加します。
記述追加 app\javascript\packs\application.js(11行目)
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. require("@rails/ujs").start(); require("turbolinks").start(); require("@rails/activestorage").start(); require("channels"); require("jquery"); import "bootstrap"; import "../stylesheets/application"; window.Noty = require("noty"); // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)
「app/javascript/stylesheets/application.scss」ファイルに以下の記述を追加します。
記述追加 app/javascript/stylesheets/application.scss
@import 'noty/lib/noty'; @import 'noty/lib/themes/sunset';
「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: '3000', theme: 'sunset', text: '<%= value %>' }).show(); <% end %> </script> <% end %>
「app\views\layouts\application.html.erb」ファイルに「<%= render 'shared/notification' %>」の記述を追加します。
記述更新 app\views\layouts\application.html.erb
<!DOCTYPE html> <html lang="ja" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8" /> <title>アマチュアレポートワールド | AmateurReportWorld</title> <meta name="description" content="アマチュア記者のためのクリエイティブな場所。自分の声を世界に届け、記事を自由に投稿し、コミュニティと共有しましょう。情報を共有し、インスピレーションを受けて、新しい読者とつながりを築きましょう。あなたのストーリーがここで輝きます。" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta property="og:url" content="ページのURL"> <!-- herokuデプロイ後 --> <meta property="og:title" content="アマチュアレポートワールド | AmateurReportWorld"> <meta property="og:description" content="アマチュア記者のためのクリエイティブな場所。自分の声を世界に届け、記事を自由に投稿し、コミュニティと共有しましょう。情報を共有し、インスピレーションを受けて、新しい読者とつながりを築きましょう。あなたのストーリーがここで輝きます。"> <meta property="og:type" content="Webページのタイプ"> <!-- 値に「website」を設定します。トップページ以外のブログの投稿ページには「article」を記述して設定します。 --> <meta property="og:image" content="サムネイルとして表示したい画像パス"> <meta property="og:locale" content="ja_JP" /> <!-- ツイッター --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="＠ユーザー名" /> <!-- ツイッターアカウント作成後 --> <!-- FaceBook --> <meta property="fb:app_id" content="[app_id]"> <!-- デベロッパーで取得 --> <!-- サイトアイコンの指定 --> <link rel="icon" href="画像URL" sizes="16x16" type="image/png" /> <link rel="icon" href="画像URL" sizes="32x32" type="image/png" /> <link rel="icon" href="画像URL" sizes="48x48" type="image/png" /> <link rel="icon" href="画像URL" sizes="62x62" type="image/png" /> <!-- スマホ用アイコンの指定（ホーム画面ショートカット）PNG形式の画像でサイズは50×150 --> <link rel="apple-touch-icon-precomposed" href="画像のURL" /> <!--Windows用タイル設定 --> <meta name="msapplication-TileImage" content="画像のURL" /> <meta name="msapplication-TileColor" content="カラーコード（例：#F89174）"/> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <!-- ナビゲーションバー --> <%= render "shared/navbar" %> <!-- noty --> <%= render 'shared/notification' %> <%= yield %> </body> </html>
notyフラッシュメッセージを日本語化します。
記述追加 GemFile
gem 'rails-i18n'
コマンド
bundle
「config\locales」フォルダに「devise.ja.yml」ファイルを新規作成します。
config\locales\devise.ja.yml(新規作成したファイル)
ja:
devise:
confirmations:
confirmed: 'アカウントを登録しました。'
send_instructions: 'アカウントの有効化について数分以内にメールでご連絡します。'
send_paranoid_instructions: "あなたのメールアドレスが登録済みの場合、本人確認用のメールが数分以内に送信されます。"
failure:
already_authenticated: 'すでにログインしています。'
inactive: 'アカウントが有効化されていません。メールに記載された手順にしたがって、アカウントを有効化してください。'
invalid: "%{authentication_keys} もしくはパスワードが不正です。"
locked: 'あなたのアカウントは凍結されています。'
last_attempt: 'あなたのアカウントが凍結される前に、複数回の操作がおこなわれています。'
not_found_in_database: "%{authentication_keys} もしくはパスワードが不正です。"
timeout: 'セッションがタイムアウトしました。もう一度ログインしてください。'
unauthenticated: 'アカウント登録もしくはログインしてください。'
unconfirmed: 'メールアドレスの本人確認が必要です。'
mailer:
confirmation_instructions:
subject: 'アカウントの有効化について'
reset_password_instructions:
subject: 'パスワードの再設定について'
unlock_instructions:
subject: 'アカウントの凍結解除について'
password_change:
subject: 'パスワードの変更について'
omniauth_callbacks:
failure: "%{kind} アカウントによる認証に失敗しました。理由：（%{reason}）"
success: "%{kind} アカウントによる認証に成功しました。"
passwords:
no_token: "このページにはアクセスできません。パスワード再設定メールのリンクからアクセスされた場合には、URL をご確認ください。"
send_instructions: 'パスワードの再設定について数分以内にメールでご連絡いたします。'
send_paranoid_instructions: "あなたのメールアドレスが登録済みの場合、パスワード再設定用のメールが数分以内に送信されます。"
updated: 'パスワードが正しく変更されました。'
updated_not_active: 'パスワードが正しく変更されました。'
registrations:
destroyed: 'アカウントを削除しました。またのご利用をお待ちしております。'
signed_up: 'アカウント登録が完了しました。'
signed_up_but_inactive: 'ログインするためには、アカウントを有効化してください。'
signed_up_but_locked: 'アカウントが凍結されているためログインできません。'
signed_up_but_unconfirmed: '本人確認用のメールを送信しました。メール内のリンクからアカウントを有効化させてください。'
update_needs_confirmation: 'アカウント情報を変更しました。変更されたメールアドレスの本人確認のため、本人確認用メールより確認処理をおこなってください。'
updated: 'アカウント情報を変更しました。'
sessions:
signed_in: 'ログインしました。'
signed_out: 'ログアウトしました。'
already_signed_out: '既にログアウト済みです。'
unlocks:
send_instructions: 'アカウントの凍結解除方法を数分以内にメールでご連絡します。'
send_paranoid_instructions: 'アカウントが見つかった場合、アカウントの凍結解除方法を数分以内にメールでご連絡します。'
unlocked: 'アカウントを凍結解除しました。'
errors:
messages:
already_confirmed: 'は既に登録済みです。ログインしてください。'
confirmation_period_expired: "の期限が切れました。%{period} までに確認する必要があります。 新しくリクエストしてください。"
expired: 'の有効期限が切れました。新しくリクエストしてください。'
not_found: 'は見つかりませんでした。'
not_locked: 'は凍結されていません。'
not_saved:
one: "エラーが発生したため %{resource} は保存されませんでした:"
other: "%{count} 件のエラーが発生したため %{resource} は保存されませんでした:"
記述追加 config\application.rb
20行目に「config.i18n.default_locale = :ja」の記述を追加しています。
23行目に「config.time_zone = 'Tokyo'」の記述を追加しています。
require_relative 'boot' require 'rails/all' # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. Bundler.require(*Rails.groups) module AmateurReportWorld class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. config.load_defaults 6.0 # Settings in config/environments/* take precedence over those specified here. # Application configuration can go into files in config/initializers # -- all .rb files in that directory are automatically loaded after loading # the framework and any gems in your application. # 日本語化 config.i18n.default_locale = :ja # 標準時間を東京に設定 config.time_zone = 'Tokyo' end 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: '3000', theme: 'sunset', text: '<%= message %>' }).show(); <% end %> </script> <% end %>
バリデーションの日本語化、日付フォーマットを設定しておきます。
「config\locales」フォルダに「ja.yml」ファイルを新規作成して下さい。
config\locales\ja.yml(新規作成したファイル)
ja:
activerecord:
attributes:
user:
full_name: 氏名
current_password: パスワード
password_confirmation: パスワードの確認
password: パスワード
email: メールアドレス
phone_number: 電話番号
time:
formats:
full_date: "%Y年%m月%d日 (%a)"
views:
pagination:
first: "« 最初"
last: "最後 »"
previous: "‹ 前"
next: "次 ›"
truncate: "..."
helpers:
page_entries_info:
one_page:
display_entries:
zero: ""
one: "<strong>1-1</strong>/1件中"
other: "<strong>1-%{count}</strong>/%{count}件中"
more_pages:
display_entries: "<strong>%{first}-%{last}</strong>/%{total}件中"
datetime:
distance_in_words:
half_a_minute: "30秒前後前"
less_than_x_seconds:
one: "1秒前"
other: "%{count}秒前"
x_seconds:
one: "1秒"
other: "%{count}秒前"
less_than_x_minutes:
one: "1分"
other: "%{count}分前"
x_minutes:
one: "約1分前"
other: "%{count}分前"
about_x_hours:
one: "約1時間前"
other: "約%{count}時間前"
x_days:
one: "1日前"
other: "%{count}日前"
about_x_months:
one: "約1ヶ月前"
other: "約%{count}ヶ月前"
x_months:
one: "1ヶ月前"
other: "%{count}ヶ月前"
almost_x_years:
one: "１年弱前"
other: "%{count}年弱前"
about_x_years:
one: "約1年前"
other: "約%{count}年前"
over_x_years:
one: "1年以上前"
other: "%{count}年以上前"
これで設定終了です。
ブラウザでnotyの動作を確認してください。
↓↓クリックして頂けると励みになります。
