railsキャッチアップ

今回はRails6系のGemのdeviseについてやってみようと思います。 Deviseの日本語化 まずはdeviseのエラー文などを日本語化していきます。 まずはGemfileに日本語化するためのgemを導入します。 gem 'rails-i18n' gem 'devise-i18n' これを記述したらいつも通りbundle install deviseの日本語化の場合にはもう一つこのコマンドを入力する。 rails g devise:i18n:locale ja コマンドの実行が終了したら、configのapplication.rbファイルに config.i18n.default_locale = :ja を記述し、devise以外も日本語化できるようにする。 config/localesの中にdevise.views.ja.ymlファイルが作成されているので、こちらのファイル名をdevise.ja.ymlに変更する。 次に、devise.ja.ymlファイルの中に ja: activerecord: attributes: user: confirmation_sent_at: パスワード確認送信時刻 confirmation_token: パスワード確認用トークン confirmed_at: パスワード確認時刻 created_at: 作成日 current_password: 現在のパスワード current_sign_in_at: 現在のログイン時刻 current_sign_in_ip: 現在のログインIPアドレス email: Eメール encrypted_password: 暗号化パスワード failed_attempts: 失敗したログイン試行回数 last_sign_in_at: 最終ログイン時刻 last_sign_in_ip: 最終ログインIPアドレス locked_at: ロック時刻 password: パスワード password_confirmation: パスワード（確認用） remember_created_at: ログイン記憶時刻 remember_me: ログインを記憶する reset_password_sent_at: パスワードリセット送信時刻 reset_password_token: パスワードリセット用トークン sign_in_count: ログイン回数 unconfirmed_email: 未確認Eメール unlock_token: ロック解除用トークン updated_at: 更新日 models: user: ユーザー devise: confirmations: confirmed: メールアドレスが確認できました。 new: resend_confirmation_instructions: アカウント確認メール再送 send_instructions: アカウントの有効化について数分以内にメールでご連絡します。 send_paranoid_instructions: メールアドレスが登録済みの場合、本人確認用のメールが数分以内に送信されます。 failure: already_authenticated: すでにログインしています。 inactive: アカウントが有効化されていません。メールに記載された手順にしたがって、アカウントを有効化してください。 invalid: &quot;%{authentication_keys}またはパスワードが違います。&quot; last_attempt: もう一回誤るとアカウントがロックされます。 locked: アカウントはロックされています。 not_found_in_database: &quot;%{authentication_keys}またはパスワードが違います。&quot; timeout: セッションがタイムアウトしました。もう一度ログインしてください。 unauthenticated: ログインもしくはアカウント登録してください。 unconfirmed: メールアドレスの本人確認が必要です。 mailer: confirmation_instructions: action: メールアドレスの確認 greeting: &quot;%{recipient}様&quot; instruction: 以下のリンクをクリックし、メールアドレスの確認手続を完了させてください。 subject: メールアドレス確認メール email_changed: greeting: こんにちは、%{recipient}様。 message: メールアドレスの（%{email}）変更が完了したため、メールを送信しています。 message_unconfirmed: メールアドレスが（%{email}）変更されたため、メールを送信しています。 subject: メール変更完了 password_change: greeting: &quot;%{recipient}様&quot; message: パスワードが再設定されました。 subject: パスワードの変更について reset_password_instructions: action: パスワード変更 greeting: &quot;%{recipient}様&quot; instruction: パスワード再設定の依頼を受けたため、メールを送信しています。下のリンクからパスワードの再設定ができます。 instruction_2: パスワード再設定の依頼をしていない場合、このメールを無視してください。 instruction_3: パスワードの再設定は、上のリンクから新しいパスワードを登録するまで完了しません。 subject: パスワードの再設定について unlock_instructions: action: アカウントのロック解除 greeting: &quot;%{recipient}様&quot; instruction: アカウントのロックを解除するには下のリンクをクリックしてください。 message: ログイン失敗が繰り返されたため、アカウントはロックされています。 subject: アカウントのロック解除について omniauth_callbacks: failure: &quot;%{kind} アカウントによる認証に失敗しました。理由：（%{reason}）&quot; success: &quot;%{kind} アカウントによる認証に成功しました。&quot; passwords: edit: change_my_password: パスワードを変更する change_your_password: パスワードを変更 confirm_new_password: 確認用新しいパスワード new_password: 新しいパスワード new: forgot_your_password: パスワードを忘れましたか？ send_me_reset_password_instructions: パスワードの再設定方法を送信する no_token: このページにはアクセスできません。パスワード再設定メールのリンクからアクセスされた場合には、URL をご確認ください。 send_instructions: パスワードの再設定について数分以内にメールでご連絡いたします。 send_paranoid_instructions: メールアドレスが登録済みの場合、パスワード再設定用のメールが数分以内に送信されます。 updated: パスワードが正しく変更されました。 updated_not_active: パスワードが正しく変更されました。 registrations: destroyed: アカウントを削除しました。またのご利用をお待ちしております。 edit: are_you_sure: 本当によろしいですか？ cancel_my_account: アカウント削除 currently_waiting_confirmation_for_email: &quot;%{email} の確認待ち&quot; leave_blank_if_you_don_t_want_to_change_it: 空欄のままなら変更しません title: &quot;%{resource}編集&quot; unhappy: 気に入りません update: 更新 we_need_your_current_password_to_confirm_your_changes: 変更を反映するには現在のパスワードを入力してください new: sign_up: アカウント登録 signed_up: アカウント登録が完了しました。 signed_up_but_inactive: ログインするためには、アカウントを有効化してください。 signed_up_but_locked: アカウントがロックされているためログインできません。 signed_up_but_unconfirmed: 本人確認用のメールを送信しました。メール内のリンクからアカウントを有効化させてください。 update_needs_confirmation: アカウント情報を変更しました。変更されたメールアドレスの本人確認のため、本人確認用メールより確認処理をおこなってください。 updated: アカウント情報を変更しました。 updated_but_not_signed_in: あなたのアカウントは正常に更新されましたが、パスワードが変更されたため、再度ログインしてください。 sessions: already_signed_out: 既にログアウト済みです。 new: sign_in: ログイン signed_in: ログインしました。 signed_out: ログアウトしました。 shared: links: back: 戻る didn_t_receive_confirmation_instructions: アカウント確認のメールを受け取っていませんか？ didn_t_receive_unlock_instructions: アカウントのロック解除方法のメールを受け取っていませんか？ forgot_your_password: パスワードを忘れましたか？ sign_in: ログイン sign_in_with_provider: &quot;%{provider}でログイン&quot; sign_up: アカウント登録 minimum_password_length: &quot;（%{count}字以上）&quot; unlocks: new: resend_unlock_instructions: アカウントのロック解除方法を再送する send_instructions: アカウントのロック解除方法を数分以内にメールでご連絡します。 send_paranoid_instructions: アカウントが見つかった場合、アカウントのロック解除方法を数分以内にメールでご連絡します。 unlocked: アカウントをロック解除しました。 errors: messages: already_confirmed: は既に登録済みです。ログインしてください。 confirmation_period_expired: の期限が切れました。%{period} までに確認する必要があります。 新しくリクエストしてください。 expired: の有効期限が切れました。新しくリクエストしてください。 not_found: は見つかりませんでした。 not_locked: はロックされていません。 not_saved: one: エラーが発生したため %{resource} は保存されませんでした。 other: &quot;%{count} 件のエラーが発生したため %{resource} は保存されませんでした。&quot; このように記述をする。 日本語化していない状態でログインをすると、 このように英語表記だったのが、日本語化してログインをすると、 このように日本語化される。 しかし、この日本語化はまだDeviseに標準で入っているカラムのみの日本語化なのでこのように自分で追加したカラムの日本語化はできていない。 なので、devise.ja.ymlファイルの12行目の下ぐらいに自分で加えたカラムの日本語化を追加していく。 name: 名前 introduction: 自己紹介文 このように記述すると、 このように日本語化が完了しました。 パスワード変更機能 ここでは実際のサイトのようにパスワードを忘れてしまった場合に自分のメールアドレス宛にパスワード再設定用メールを送るような機能を作成していく。 まず、デフォルトで作られるdeviseのviewを変更していく。 &lt;%= form_with model: @user, url: user_password_path, class: 'registration-main', local: true do |f| %&gt; &lt;div class='form-wrap'&gt; &lt;div class='form-header'&gt; &lt;h1 class='form-header-text'&gt; パスワード再設定 &lt;/h1&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;div class='form-text-wrap'&gt; &lt;label class=&quot;form-text&quot;&gt;メールアドレス&lt;/label&gt; &lt;span class=&quot;indispensable&quot;&gt;必須&lt;/span&gt; &lt;/div&gt; &lt;%= f.email_field :email, class:&quot;input-default&quot;, id:&quot;email&quot;, placeholder:&quot;PC・携帯どちらでも可&quot;, autofocus: true %&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;h2 class='form-bottom-text'&gt; 入力されたメールアドレスにパスワード再設定メールを&lt;br&gt;送信します &lt;/h2&gt; &lt;/div&gt; &lt;div class='register-btn'&gt; &lt;%= f.submit &quot;メール送信&quot; ,class:&quot;register-red-btn&quot; %&gt; &lt;/div&gt; &lt;/div&gt; &lt;% end %&gt; これはパスワードを忘れた場合のリンクを踏んだときにどのメールアドレスにパスワード変更をするメールを送信するかを入力する。 次に、パスワードを再設定する用のフォームを変更していく。 &lt;%= form_with model: @user, url: user_password_path, method: :patch, class: 'registration-main', local: true do |f| %&gt; &lt;div class='form-wrap'&gt; &lt;div class='form-header'&gt; &lt;h1 class='form-header-text'&gt; パスワード再設定 &lt;/h1&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;div class='form-text-wrap'&gt; &lt;label class=&quot;form-text&quot;&gt;新しいパスワード&lt;/label&gt; &lt;span class=&quot;indispensable&quot;&gt;必須&lt;/span&gt; &lt;/div&gt; &lt;%= f.password_field :password, class:&quot;input-default&quot;, id:&quot;password&quot;, placeholder:&quot;6文字以上の半角英数字&quot; %&gt; &lt;p class='info-text'&gt;※英字と数字の両方を含めて設定してください&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;div class='form-text-wrap'&gt; &lt;label class=&quot;form-text&quot;&gt;パスワード(確認)&lt;/label&gt; &lt;span class=&quot;indispensable&quot;&gt;必須&lt;/span&gt; &lt;/div&gt; &lt;%= f.password_field :password_confirmation, class:&quot;input-default&quot;, id:&quot;password-confirmation&quot;, placeholder:&quot;同じパスワードを入力して下さい&quot; %&gt; &lt;/div&gt; &lt;%= f.hidden_field :reset_password_token %&gt; &lt;div class=&quot;form-group&quot;&gt; &lt;h2 class='form-bottom-text'&gt; よろしければ以下のボタンを押してください &lt;/h2&gt; &lt;/div&gt; &lt;div class='register-btn'&gt; &lt;%= f.submit &quot;パスワードを変更する&quot; ,class:&quot;register-red-btn&quot; %&gt; &lt;/div&gt; &lt;/div&gt; &lt;% end %&gt; このように変更すると、 パスワード変更画面の作成をすることができます。 ここで重要な部分が、 &lt;%= f.hidden_field :reset_password_token %&gt; このhidden_fieldの部分となっており、パスワード再設定メールを送信した時にデータベースに保存されているトークンの値が等しいか判断するのに必要となっています。そして、これを入力してあげないと、「トークンを入力してください」というエラーが出てしまいまうので、重要な部分となります。 次に、送信されたメールの内容を少し変更する。 &lt;p&gt;Hello &lt;%= @resource.email %&gt;!&lt;/p&gt; &lt;p&gt;Someone has requested a link to change your password. You can do this through the link below.&lt;/p&gt; #↓ここのみ変更 &lt;p&gt;&lt;%= link_to 'Change my password', edit_user_password_url(@resource, reset_password_token: @token) %&gt;&lt;/p&gt; &lt;p&gt;If you didn't request this, please ignore this email.&lt;/p&gt; &lt;p&gt;Your password won't change until you access the link above and create a new one.&lt;/p&gt; すると、このようなメールの文面が送られてくる。(Helloの部分は隠していますが、自分のメールアドレスが書いてあります。） ここまではviewに関する設定で、この機能で一番重要な部分は環境設定にあります。環境設定をしっかりとしておかないとメールアドレス宛にメールを送ることができません。 host = 'localhost:3000' config.action_mailer.default_url_options = { host: host, protocol: 'http' } config.action_mailer.raise_delivery_errors = true config.action_mailer.delivery_method = :smtp config.action_mailer.smtp_settings = { address: 'smtp.gmail.com', port: 587, domain: 'gmail.com', user_name: '****@****.com', password: Rails.application.credentials.mailer[:password] , authentication: 'plain', enable_starttls_auto: true } このように記述していきます。この記述に関して詳しいことは https://senrenseyo.com/20210830/rails6-devisegmail/#i このサイトで丁寧に解説されていますので、こちらをご参照ください。 おわり 以上でdeviseの日本語化とパスワードリセット機能は完成となります。こんなに長く、読みにくい文章を最後まで読んでくださり、ありがとうございました！また別の記事でお会いしましょう！

railsキャッチアップ

【Ruby on rails6】acts-as-taggable-onを使ってタグ付け機能実装

【Ruby on rails6】Deviseの日本語化とパスワード変更