【Rails】letter_opener_webを使用して送信メールを確認する

rails action mailer letter_opener_web confirm

Ruby on Railsの開発環境で送信したメールをブラウザで確認するためにgem ‘letter_opener_web’を使ってみます。上の画像のようなページを簡単に導入できて、メールの確認ができます。本記事ではメール送信をdeviseのconfirmableモジュールを使用してsign_up時に行ってみました。

letter_opener_web
https://github.com/fgrehm/letter_opener_web
devise
https://github.com/plataformatec/devise

実行環境はこちらです

準備

新規アプリ作成し、scaffoldで足場を作っていきます。

Gemの追加

gemfileに以下のように追加します。

Gemfile

Devise

bundle installしてdeviseも導入します。

confirmableを追加することで、確認メールを送信できます。

app/models/user.rb

マイグレーションファイルの中の、Confirmable関連のコメントを外します。

db/migrate/20180928034759_add_devise_to_users.rb

Routeing

/letter_openerLetterOpenerWeb::Engineをマウントします。

Config

以下のようにデフォルトURL指定します。config.action_mailer.delivery_methodは:letter_opener_webに変更します。ちなみに開発環境がcloud9の場合は{ host: ‘myapp.c9users.io/’, port: $PORT, protocol: ‘https’ }とするとOKでした。

config/environments/development.rb

これで http://localhost:3000/users/sign_up からアカウントを作成し、送信されたメールを http://localhost:3000/letter_opener で確認することが出来るようになります!

以上です!ご覧いただき、ありがとうございました!!

【Rails】Deviseユーザーをフォローする機能を作成する

rails follow ajax devise

RailsTutorialを参考に、DeviseユーザーでTwitterライクなフォロー機能を作りました。Deviseのルーティングやメソッドなどを使っています。

環境はこちらです

Relationshipモデルの作成

複合キーインデックスは、follower_idとfollowed_idの組み合わせを必ずユニークにし、あるユーザーが同じユーザーを2回以上フォローすることを防いでいます。

UserとRelationshipの関連付け

app/models/relationship.rb

仮想的にUserモデルを2つに分けるためにactive_relationshipsとpassive_relatoinshipsというふうに別名をつけています。following, followersはそれぞれsourceから名前を上書きしています。followingによる関連付けを使ってfollow、unfollow、following?メソッドを作成します。ここではUserは2つとなるのでselfではなくother_userを使います。

app/models/user.rb

ルーティング

本記事ではdevise_scopeでルーティングを設定しましたが、showページの代わりとしてprofileを作っています。そして、フォローユーザー一覧のfollowingと、フォロワー一覧のfollowersを設定します。また、relationshipsリソースを追加して、リレーションシップの作成(create)、削除(destroy)をできるようにします。

config/routes.rb

必要なテンプレートの作成

フォロワーの統計情報を表示するパーシャルの作成です。idのfollowingとfollowersはのちにajaxリクエストに使うものです。

app/views/devise/shared/_stats.html.erb

次の記述では上記の統計情報の表示と、follow/unfollowのボタンを表示させるものですが、ログインしているユーザーのみにとしています。

app/views/devise/registrations/profile.html.erb

次のパーシャルでfollowとunfollowのパーシャルに分岐しています。

app/views/devise/shared/_follow_form.html.erb

followボタンとunfollowボタンとなるパーシャルは、それぞれremote:trueでajaxリクエストします。

app/views/devise/shared/_follow.html.erb

app/views/devise/shared/_unfollow.html.erb

followingアクションとfollowersアクション

次の2つのアクションをshow_followページ一つで読み込むようにしています。

app/controllers/users/registrations_controller.rb

app/views/devise/registrations/show_follow.html.erb

RelationshipsコントローラでAjaxリクエストに対応

app/controllers/relationships_controller.rb

これらのアクションが呼び出すjs.erbファイルを作成します。

app/views/relationships/create.js.erb

app/views/relationships/destroy.js.erb

以上で完成です!最後までご覧いただきありがとうございました!もし、間違っている点などありましたらご指摘いただけると幸いです。

【Rails】Deviseでプロフィール用のeditページを作成する

rails devise profile update

Ruby on RailsのDeviseではデフォルトでregistrations#editがありますが、こちらはemailやpasswordをeditするようにして、その他のnameなどはregistrations#profile_editを追加して、別ページでeditするように実装しました。

環境はこちらです

ルーティング

devise_scope に profile_edit と profile_update を追加します。

config/routes.rb

コントローラー

忘れずaccount_update_paramsをセットします。

app/controllers/users/registrations_controller.rb

ビュー

app/views/devise/registrations/my_page.html.erb

app/views/devise/registrations/profile_edit.html.erb

以上です!😊

【Rails5】アップロードした画像を即時プレビューする

rails upload preview jquery

Deviseのregistrations#editで画像をアップロードするの続きです。前回、carrierwaveを使ってUserのavatar画像をアップロードしました。今回はこのアップロードの際に、すぐにプレビューできるようにjQueryを追加しました。rails5ではturbolinksの挙動が変わったので$(document).on ‘turbolinks:load’としないとイベントが発火しないので注意が必要です。

元のフォーム

前回からのフォームです。current_userはサインインしているユーザーを取得するdeviseのヘルパーメソッドです。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。既存の画像がない場合はno_avatar.pngという画像をあてています。

app/views/devise/registrations/edit.html.erb

フォームを修正する

次に必要な記述を追加していきます。avatar_img_prevでプレビューを表示します。通常はhiddenです。avatar_present_imgは現在の画像です。post_imgがイベントが発火のフックになります。

app/views/devise/registrations/edit.html.erb

jQuery

Rails5ではここでTurbolinksをロードしてからのイベントです。ファイル選択をフックに、#avatar_img_prevのhiddenと.avatar_present_imgを取り除いてデータ取得を実行しています。
読み込みが完了したらFileReader.onloadイベントが発火して、readAsDataURLでファイルを読み込んでいます。

以上です!ご覧いただきありがとうございました!!☺️もっと良い方法があれば教えていただけると幸いです!

【Rails5】Deviseのregistrations#editで画像をアップロードする

rails avatar upload devise

Deviseのインストールが済んでいて、registrations#editでユーザーの画像をアップロードしたいという時の流れです。アップローダーのライブラリはcarrierwaveを使っています。

環境はこちらです

準備

必要なgemはこちらです。

Gemfile

$ bundle install します。

DeviseはUserモデルだとして、そこにavatarカラムを追加します。

$ rails db:migrat します。

アップローダー

avatarのアップローダーを生成します。

アップローダーの内容は適宜変更してください。

app/uploaders/avatar_uploader.rb

モデルとアップローダーを紐づける

使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。

app/models/user.rb

ストロングパラメーターの追加

account_update_paramsにavatar, avatar_cache, remove_avatarを追加します。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。

app/controllers/users/registrations_controller.rb

Views

user/registrations#editへのリンクを貼っておきます。

‘current_user’はサインインしているユーザーを取得するdeviseのヘルパーメソッドです。既存の画像がない場合は’no_avatar.png’という画像をあてています。

app/views/devise/registrations/edit.html.erb

CSS

アバター画像を正円にするために’border-radius’を50%にしています。画像の縦横比を保ちつつ中央にトリミングする方法は色々あるかと思いますが、’object-fit’プロパティーを使えば一行で済みます。

リダイレクト先

Deviseのアカウント情報を更新した後のリダイレクト先はデフォルトではroot_pathになっているかと思いますが、指定するには after_update_path_forを使います。

app/controllers/users/registrations_controller.rb

今回は以上です!続編では、アップロードした画像をすぐにプレビューできるようにjQueryを追加したいと思います!😊
アップロードした画像を即時プレビューする

【Rails5】Devise-i18nで日本語化する

Deviseの日本語化の手順をまとめました。

デフォルトのロケールを設定

デフォルトのlocaleは暗黙的に:enになっているかと思いますので、”config.i18n.default_locale = :ja”を以下のあたりに記述します。

config/application.rb

必要なgemを記載

Gemfile

“$ bundle install”します。

Deviseの日本語化

次のコマンドで日本語翻訳ファイルを生成します。

生成されたファイルにエラーメッセージを追加しています。和訳の内容は適宜変更してください!

config/locales/devise.views.ja.yml

あとは”$ rails s” でアプリを再起動して、完了です!!
ご覧いただき、ありがとうございました!😃

【Rails】Devise で Sign up 時に confirmableモジュールを使わずに Welcome メールを送信する

アカウト登録にDeviseのconfirmableモジュールを使かった場合、ユーザーに確認メールが送られ、そこに記載されたリンクをクリックしたら、アカウント登録完了となる機能を実装することができます。この方法とは別に本記事では、Deviseでアカウント登録はするが、シンプルに即アカウント登録完了とし、Welcomeメールのみ送る方法を実装してみました。
実装方法としてはDeviseのコントローラーは極力触らずに、Active Record コールバックの after_create を使っています。

環境はこちらです

メーラークラスとメソッドを指定して、次のコマンドを入力します。

メーラーメソッドの編集

UserMailerのuser_welcome_mailメソッド内に渡したい変数を定義します。
メソッドが呼ばれた後は、自動的に同名のviewsを読み込みます。
その他全メーラー共通の設定があればapplication_mailerに書きます。

app/mailers/user_mailer.rb

メールテンプレートの作成

メールテンプレートはデフォルトで views/user_mailer/user_welcome_mail.html.erb と views/user_mailer/user_welcome_mail.text.erb の二種類の形式が提供されていますが、これは「 HTMLメールが送信できない場合にはテキストベースのメールを送信する 」といった動作を保証するためであるので、二種類とも作成しておくことが望まれます。

app/views/user_mailer/user_welcome_mail.html.erb

app/views/user_mailer/user_welcome_mail.text.erb

Models

after_create コールバックを使うことで、Userが新規作成された後にメールを送信するためのメソッドを呼び出すことができます。
confirmableモジュールを使う場合:confirmableの記載をしますが、今回はしていません。

app/models/user.rb

メールサーバーの設定

開発環境のメールサーバの設定はGmailの場合です。

config/environments/development.rb

テストしてみてメールが届いたけど、引数が渡されなかったのですが、私の場合、configure_sign_up_paramsの設定を忘れていました!汗

app/controllers/users/registrations_controller.rb

以上です!ご覧いただきありがとうございました!!😆

【Rails5】Devise でコントローラーをカスタマイズして、ユーザー登録後のリダイレクト先を my page にする

本記事では Devise のコントローラーをカスタマイズして、ユーザー登録後、 ログイン後のリダイレクト先を my_page に指定したいと思います。

Devise
https://github.com/plataformatec/devise

環境はこちらです

Generate

Deviseはユーザーモデルをベースとして進めていきます。コントローラーをカスタマイズしていくために、次のコマンドを実行します。
すると、app/controllers/users/ にそれぞれのコントローラーが作成されます。

Routes

devise_for でコントローラーのルーティングを、 devise_scope で my_page のルーティングを設定します。

Controllers

ユーザー登録後は registrations_controller に after_sign_up_path_for を、 ログイン後は sessions_controller に after_sign_in_path_for のメソッドをオーバーライドします。
ちなみにこれらのメソッドは app/controllers/application_controller.rb に定義した方が管理しやすいという意見もあるかと思いますが、 個人的には application_controller.rb はどんどん煩雑になってくるので、 今回はそれぞれのコントローラーに定義しています。

registrations_controller に my_page アクションを追加します。 また、 authenticate_user! メソッドは、Deviseが提供しているメソッドで、ログイン有無のチェックして、ログインしていない場合はログイン画面にリダイレクトさせます。

app/controllers/users/registrations_controller.rb

app/controllers/users/sessions_controller.rb

ちなみに、ユーザー登録にメール認証を導入してくれる confirmableモジュール を有効にしている場合は、 after_sign_up_path_for ではなく after_inactive_sign_up_path_for に指定することになります。

Views

リダイレクト先となる my_page.html.erb を作成します。ここではログアウトできるように delete_path を書いておきます。

app/views/devise/registrations/my_page.html.erb

あとはユーザーのログインの有無を確認するために、 header などに <%= current_user.email if user_signed_in? %>
などを書いておくといいですね。 current_user や、 user_signed_in? も Devise のヘルパーメソッドです。

今回は以上です。ご覧いただき、ありがとうございました!😺

【Rails】Deviseのsign_upフォームにjQuery-Validation-Engine-railsを導入する

rails validation engine

エラーメッセージをPost送信する前に、ユーザーに知らせるために、本記事では ‘jQuery-Validation-Engine-rails’ を導入します。ユーザ認証機能には ‘devise’、CSSフレームワークには’devise-bootstrap-views’を使っています。

jQuery.validationEngine
https://github.com/posabsolute/jQuery-Validation-Engine
Devise
https://github.com/plataformatec/devise
Devise Bootstrap Views
https://github.com/hisea/devise-bootstrap-views

環境はこちらです

Scaffold

本記事ではサンプルとして新規プロジェクトを作るところから進めていきます。

Gemfile

以下のコマンドでdeviseのインストールから、セットアップまで行います。

Assets

必要なアセットを読み込ませていきます。

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

jQuery

基本形はこちらですが、その他オプションはドキュメントをどうぞ。

Views

フォームにidを設定し、それぞれの入力フィールドにバリデーションを設定していきます。

ちなみにsimple_formを使っている場合は、このような感じなるかと思います。

あとはhttps://localhost:3000/users/sign_upにアクセスして、動作を確認して下さい。

エラーメッセージの日本語化

jQuery-Validation-Engine-railsのエラーメッセージの日本語化は、次のリンクから「jquery.validationEngine-ja.js」をダウンロードして app/assets/javascripts/ 配下に配置します。
https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/languages/jquery.validationEngine-ja.js

以上です。ご覧いただき、ありがとうございました!😊