教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
Tinder風マッチングアプリを作ってみよう！
Ruby on Railsでマッチングアプリ開発！Deviseを使ったサインアップ・サインイン機能の実装をはじめ、スワイプ機能を含めたマッチング機能の実装やAction Cableを使ったリアルタイムチャット機能の実装についても学ぶ。
0章 : はじめに
1章 : Ruby on Railsの環境のセットアップ
2章 : 新規登録・ログイン機能
3章 : プロフィール画面
4章 : プロフィール編集機能
5章 : スワイプ機能の実装
6章 : スワイプした時のマッチングの保存
7章 : マッチング画面の実装
8章 : チャット機能
2-2
Deviseの導入
この章ではユーザーの新規登録・ログイン機能を開発していきます。
ユーザーの新規登録・ログイン機能を簡単に作成するために今回DeviseというGemを導入します。
Deviseはユーザー登録やログイン機能などの認証に必要な機能を簡単に追加できるRails用のGemです。
公式ドキュメントはこちらです。
早速導入していきましょう。
この章で学べること
Copied!- Deviseを使ったユーザー新規登録・サインイン機能の実装
学習キーワード
Copied!- Devise
- フラッシュメッセージ
- Gem
- モデル
DeviseをGemfileに追加してインストールする
Gemfile というファイル内の最下部にdeviseを追加します。
Copied!gem 'devise'
次にbundle install を行い、deviseを使えるようにします。
Copied!$ bundle install
次に以下のコマンドを実行してdeviseの初期ファイルのインストールを行います。
Copied!$ rails g devise:install
上記コマンドを実行すると以下のファイルが作成されます。
Copied!create config/initializers/devise.rb
create config/locales/devise.en.yml
ファイルを作成すると、ターミナルに以下のようなメッセージが表示されます。
こちらはdeviseを使う上での初期設定になるので、1から順に行なって行きましょう。
Copied!===============================================================================
Some setup you must do manually if you haven't yet:
1. Ensure you have defined default url options in your environments files. Here
is an example of default_url_options appropriate for a development environment
in config/environments/development.rb:
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
In production, :host should be set to the actual host of your application.
2. Ensure you have defined root_url to *something* in your config/routes.rb.
For example:
root to: "home#index"
3. Ensure you have flash messages in app/views/layouts/application.html.erb.
For example:
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
4. You can copy Devise views (for customization) to your app by running:
rails g devise:views
===============================================================================
1に書いてあるとおり、
config/environments/development.rbの末尾のendの上に以下のコードを追加してください。
Copied!config
└── environments
└── development.rb
config/environments/development.rb12345 Copied! .
.
.
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } # ここの一行を追加
end
deviseのフラッシュメッセージを追加する
フラッシュメッセージとはある動作を行った時、成功したのか、もしくは失敗したのか、相手に知らせる機能のことです。
たとえばメールアドレスが正しくなく、ログインに失敗した時、エラーを表示したりします。
app/views/layouts/application.html.erbに以下のコードを追加してください。
Copied!app
└── views
└── layouts
└── application.html.erb
app/views/layouts/application.html.erb12345678910111213141516171819 Copied!.
.
.
<body>
<%# ==========ここから追加する========== %>
<% if flash[:notice] %>
<p><%= flash[:notice] %></p>
<% end %>
<% if flash[:alert] %>
<p><%= flash[:alert] %></p>
<% end %>
<%# ==========ここまで追加する========== %>
<%= yield %>
</body>
.
.
.
devise用のviewファイルをインストールする
以下のコマンドでdevise用のviewファイルを生成します。
deviseのviews（表示される画面）の生成を行います。
Copied!$ rails g devise:views
実行すると以下のようなファイルが生成されます。どのようなファイルが生成されたかを見てみましょう。実行結果を見てみることは大事です。さまざまな「.html.erb」という拡張子のファイルが作成されています。例えば「app/views/devise/registrations/new.html.erb」はサインアップ画面のviewファイルになります。Deviseを使うと、コマンドひとつで一気に複数のファイルを作成してくれます。一から自分で作るより全然便利ですよね。これがGemの魅力でもあります。
Copied!invoke Devise::Generators::SharedViewsGenerator
create app/views/devise/shared
create app/views/devise/shared/_links.html.erb
invoke form_for
create app/views/devise/confirmations
create app/views/devise/confirmations/new.html.erb
create app/views/devise/passwords
create app/views/devise/passwords/edit.html.erb
create app/views/devise/passwords/new.html.erb
create app/views/devise/registrations
create app/views/devise/registrations/edit.html.erb
create app/views/devise/registrations/new.html.erb
create app/views/devise/sessions
create app/views/devise/sessions/new.html.erb
create app/views/devise/unlocks
create app/views/devise/unlocks/new.html.erb
invoke erb
create app/views/devise/mailer
create app/views/devise/mailer/confirmation_instructions.html.erb
create app/views/devise/mailer/email_changed.html.erb
create app/views/devise/mailer/password_change.html.erb
create app/views/devise/mailer/reset_password_instructions.html.erb
create app/views/devise/mailer/unlock_instructions.html.erb
Userモデルを作成する
以下のコマンドでdevise用のUserモデルを作成します。
モデル名の値は任意です。作成したいModel名で作成できます。今回はUserというモデル名で作成します。
Copied!$ rails g devise User
以下のようなファイルが作成されました。こちらもどのような物が生成されたか見てみましょう。
Copied!invoke active_record
create db/migrate/20180925032152_devise_create_users.rb
create app/models/user.rb
invoke test_unit
create test/models/user_test.rb
create test/fixtures/users.yml
insert app/models/user.rb
route devise_for :users
Usersテーブルを作成する
先ほどUserモデルを作成した際、db/migrate/フォルダの中にマイグレーションファイルが作成されました。
ただマイグレーションファイルはあくまでテーブルの設計図です。
設計図をDBへ反映しなければ、テーブルを作る・カラムを追加するなどの変更を行うことはできません。
なのでrails db:migrate コマンドを実行することで、マイグレーションファイルを元にテーブルを作成します。
マイグレーションファイルを実行するには以下のコマンドで実行できます。
Copied!$ rails db:migrate
マイグレーションを実行すると、以下のように複数のテーブルが作られます。
Copied!== 20180925032152 DeviseCreateUsers: migrating ================================
-- create_table(:users)
-> 0.0013s
-- add_index(:users, :email, {:unique=>true})
-> 0.0008s
-- add_index(:users, :reset_password_token, {:unique=>true})
-> 0.0018s
== 20180925032152 DeviseCreateUsers: migrated (0.0042s) =======================
サーバーを立ち上げてdeviseの導入がうまくいったかの確認
まず以前立ち上げていたサーバーを終了させます。終了させるにはcontrol とcを同時に押せば大丈夫です。
その後「rails s コマンド」でローカルサーバーを立ち上げます。ちなみにsはserverの略です。
Copied!$ rails s
そして、http://localhost:3000/users/sign_up を開くと以下の画面のようにログイン画面が表示されていれば問題ありません。
以上でこのパートは終了です。DeviseというGemの力を借りたことで、簡単に会員登録機能ができました。
次のパートでは実際にログインができるかどうかの確認を行います。
次のパートではログインができるかどうかの確認を行なっていないのでこの1文を削除するか、「次のパート以降で」という部分を追加するといいと思います。
※実際に運用している世の中のサービスではDeviseというGemを使っている場合もあれば使っていない場合もあります。なぜかというと、Gemを使うとスピーディーな開発ができて便利という反面、0から自分で開発していないためにできることの制約があります。そういった面も踏まえてGemを使うか使わないかの判断はした方がよいです。
進捗をつぶやこう！ 
