戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

タスク2-5   フラッシュメッセージ(noty)

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




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") 

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\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。


記述追加 app\assets\stylesheets\application.scss(20行目)
  @import 'noty/lib/noty'; 
 @import 'noty/lib/themes/sunset'; 



app\assets\stylesheets\application.scss
 
/* 
 * This is a manifest file that'll be compiled into application.css, which will include all the files 
 * listed below. 
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 
 * vendor/assets/stylesheets directory can be referenced here using a relative path. 
 * 
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
 * files in this directory. Styles in this file should be added after the last require_* statement. 
 * It is generally better to create a new file per style scope. 
 * 
 *= require_tree . 
 *= require_self 
 */ 
 
 @import 'bulma'; 
 @import 'bulma-extensions'; 
 @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」ファイルの16,17行目の記述を削除し、そこに「<%= render 'shared/notification' %>」の記述を追加します。


削除する記述 app\views\layouts\application.html.erb(16,17行目)
<p class="notice"><%= notice %></p> 
<p class="alert"><%= alert %></p> 


記述更新
app\views\layouts\application.html.erb
 <!DOCTYPE html> 
<html> 
  <head> 
    <title>Oshigoto</title> 
    <%= csrf_meta_tags %> 
    <%= csp_meta_tag %> 
    <%= stylesheet_link_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> 



フラッシュメッセージを日本語化します。


記述追加 GemFile(59行目)
gem 'rails-i18n'



GemFile
 
source 'https://rubygems.org' 
git_source(:github) { |repo| "https://github.com/#{repo}.git" } 
ruby '2.6.6' 
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '~> 6.0.3' 
# Use postgresql as the database for Active Record 
gem 'pg', '>= 0.18', '< 2.0' 
# Use Puma as the app server 
gem 'puma', '~> 4.1' 
# Use SCSS for stylesheets 
gem 'sass-rails', '>= 6' 
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker 
gem 'webpacker', '~> 4.0' 
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 
gem 'turbolinks', '~> 5' 
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 
gem 'jbuilder', '~> 2.7' 
# Use Redis adapter to run Action Cable in production 
# gem 'redis', '~> 4.0' 
# Use Active Model has_secure_password 
# gem 'bcrypt', '~> 3.1.7' 
# Use Active Storage variant 
# gem 'image_processing', '~> 1.2' 
# Reduces boot times through caching; required in config/boot.rb 
gem 'bootsnap', '>= 1.4.2', require: false 
group :development, :test do 
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console 
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 
end 
group :development do 
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code. 
  gem 'web-console', '>= 3.3.0' 
end 
group :test do 
  # Adds support for Capybara system testing and selenium driver 
  gem 'capybara', '>= 2.15' 
  gem 'selenium-webdriver' 
  # Easy installation and use of web drivers to run system tests with browsers 
  gem 'webdrivers' 
end 
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 

# Bulma 
gem 'bulma-rails', '~> 0.7.4' 
gem 'bulma-extensions-rails', '~> 1.0.30' 

#デバイス 
gem 'devise' 

# 日本語化 
gem 'rails-i18n' 



コマンド
bundle


「config\locales」フォルダに「devise.ja.yml」ファイルを新規作成します。


config\locales\devise.ja.yml(新規作成したファイル)
 
# Additional translations at https://github.com/plataformatec/devise/wiki/I18n 
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」の記述を追加しています。
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 Oshigoto 

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



ブラウザ確認
http://localhost:3000/








この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146