一週間のカリキュラム１週間で、Ruby 〜 Ruby on Railsまでを学ぶ

シリーズの３日目、会員などの権限がある仕様の実現について見ていきます。

３日目の内容

Ruby on Rails の基礎を抑える。

1 会員などの権限がある仕様の実現について

1-1 gemファイルの追加

会員登録に必要な機能はID,PASSでログインと、ログイン状態でしか使えない機能部分の切り分けです。

機能自体を一からを作成してもかまいませんが、Railsに合ったdeviceという、会員管理のライブラリがありますので、今回はそれを使用します。

まずはすでにあるGemfileに以下の物を追加します。

gem 'devise'

※ 補足 Gemfileにはgroup化されたブロックがありますが、これは主に開発時だけや、テスト用にだけ利用するという意味になっています。

group :test do
    #これはテスト用という意味
end

なので今回はgroupされてない箇所であれば、どこに追加してもかまいません。

1-2 gem　のインストール

$ bundle install

これで先程追記したdeviceパッケージがインストールされます。

1-3 devise のジェネレーターで初期設定を行う①

railsの様々なコマンド同様、device運用に必要な初期ファイルを自動作成します。実行後に手作業で行う部分に関して、日本語で補足してありますので、そちらも確認してください。

$ ./bin/rails g devise:install

      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Depending on your applications configuration some manual setup may be required:

  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 }
       認証メールに掲載するURLを記載。開発時はこのままでもOK

     In production, :host should be set to the actual host of your application.

     * Required for all applications. *

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"
       ルートディレクトリを指定。現時点では root "articles#index" に指定してあるはず。

     * Not required for API-only Applications *

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:
     認証関係のメッセージを出力する。
     下記を　app/views/layouts/application.html.erb
     の一番最後の行に追加してください。

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

     * Not required for API-only Applications *


  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

       このままでは登録関係のviewは作成されてませんので、上記コマンドを叩きます。

     * Not required *

1-4 devise のジェネレーターで初期設定を行う②　テンプレート作成

最後に記載されてた　rails g devise:viewsを叩くと、大量のテンプレートが作成されます。


$ ./bin/rails g devise:views

      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_error_messages.html.erb
      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

1-5 devise のジェネレーターで初期設定を行う③ モデルとルートの作成

テンプレートはつくられましたが、routeとモデルはまだなので、これも作成します。


$ ./bin/rails g devise user

      invoke  active_record
      create    db/migrate/20220209031647_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

migrationファイルも作成されてますので、マイグレーションを実行します。

$ ./bin/rake db:migrate

作成されたrouteを確認してみましょう

$ ./bin/rails routes

                  Prefix Verb   URI Pattern                    Controller#Action
        new_user_session GET    /users/sign_in(.:format)       devise/sessions#new
            user_session POST   /users/sign_in(.:format)       devise/sessions#create
    destroy_user_session DELETE /users/sign_out(.:format)      devise/sessions#destroy
       new_user_password GET    /users/password/new(.:format)  devise/passwords#new
      edit_user_password GET    /users/password/edit(.:format) devise/passwords#edit
           user_password PATCH  /users/password(.:format)      devise/passwords#update
                         PUT    /users/password(.:format)      devise/passwords#update
                         POST   /users/password(.:format)      devise/passwords#create
cancel_user_registration GET    /users/cancel(.:format)        devise/registrations#cancel
   new_user_registration GET    /users/sign_up(.:format)       devise/registrations#new
  edit_user_registration GET    /users/edit(.:format)          devise/registrations#edit
       user_registration PATCH  /users(.:format)               devise/registrations#update
                         PUT    /users(.:format)               devise/registrations#update
                         DELETE /users(.:format)               devise/registrations#destroy
                         POST   /users(.:format)

一度、サーバーを止めて、再起動しましょう。下記の画面が確認できるはずです。

サインアップ（登録画面） http://127.0.0.1:3000/users/sign_up

サインイン画面（登録後、ログイン画面） http://127.0.0.1:3000/users/sign_in

エラーは出る可能性がありますが、ユーザー登録が可能です。本当に登録されてるかsqlite3の中身をvscodeなどを利用してる場合、プラグインで覗いてみましょう。 vscode sqlite プラグイン

2 サインインからサインアウトの一連の流れを作る。

2-1 サインアップ（登録画面）

http://127.0.0.1:3000/users/sign_up

そのまま登録して,sqlite3の中身を確認してみましょう。

2-2 サインイン画面（登録後、ログイン画面）

http://127.0.0.1:3000/users/sign_in

サインインするとホーム画面に遷移されます。　本当にログインしてるかどうかは

app/views/layouts/application.html.erb　に下記を入れてユーザー番号が出てるか確認してみましょう。


<% if user_signed_in? %>
<%= current_user.id %>
<% end  %>

2-3 ログアウト画面

http://127.0.0.1:3000/users/sign_out

このURLを叩くためのrouteとリンクを作成しておきましょう。

app/views/layouts/application.html.erb


<%= link_to "ログアウト", destroy_user_session_path, method: :delete %>

./config/routes.rb


  devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
  end

2-4 ログイン、ログアウト状態の表示を、まとめましょう

app/views/layouts/application.html.erb

<% if user_signed_in? %>
USERID: <%= current_user.id %>　でログイン中
<%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
<% else %>
<%= link_to "ログイン", new_user_session_url, method: :GET %>
<% end %>

2-5 ヘルパーメソッドについて

deviseで使えるヘルパーメソッド

ヘルパーメソッドとはRailsにおいては、コントローラーやテンプレートのどの場所でも利用可能なメソッドの事を指します。

deviseのヘルパーメソッドを使えば、上記のようにユーザーのログイン状態などを管理したり、権限を切り分ける事が出来ます。

3 メール認証関係

実際にはメール認証を行わない会員登録はあまり行わないと思うので、メール認証での会員登録を有効にします。

3-1 DBを全部リセット

マイグレーションファイルを新規に追加せずに全部リセットして進めるます。

$ rake db:migrate:reset

※　rake db:reset との違い有り

3-2

ユーザーのマイグレーションファイルの ./db/migrate/************_devise_create_users.rb

下記をコメントアウトしてください。

      ## Confirmable
      t.string   :confirmation_token
      t.datetime :confirmed_at
      t.datetime :confirmation_sent_at
      t.string   :unconfirmed_email # Only if using reconfirmable

3-3 　メール送信用の設定を登録

config/environments/development.rb

Gメールのアプリ用のパスワードを発行して利用すると良いでしょう。

Rails.application.configure do

#....

  # ここから追加
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    :address => 'smtp.gmail.com',
    :port => 587,
    :user_name => 'Gメールアドレス',
    :password => 'Gメールパスワード',
    :authentication => :plain,
    :enable_starttls_auto => true
  }

end

3-4 サインアップからメールで登録

サインアップするとメールが飛んできます。 Confirm my account　をクリックして登録完了です。

会員などの権限がある仕様の実現について

一週間のカリキュラム１週間で、Ruby 〜 Ruby on Railsまでを学ぶ

３日目の内容

1 会員などの権限がある仕様の実現について

1-1 gemファイルの追加

1-2 gem　のインストール

1-3 devise のジェネレーターで初期設定を行う①

1-4 devise のジェネレーターで初期設定を行う②　テンプレート作成

1-5 devise のジェネレーターで初期設定を行う③ モデルとルートの作成

2 サインインからサインアウトの一連の流れを作る。

2-1 サインアップ（登録画面）

2-2 サインイン画面（登録後、ログイン画面）

2-3 ログアウト画面

2-4 ログイン、ログアウト状態の表示を、まとめましょう

2-5 ヘルパーメソッドについて

3 メール認証関係

3-1 DBを全部リセット

3-2

3-3 　メール送信用の設定を登録

3-4 サインアップからメールで登録

最新記事一覧

関連コンテンツ

カテゴリー一覧

会員などの権限がある仕様の実現について

一週間のカリキュラム １週間で、Ruby 〜 Ruby on Railsまでを学ぶ

３日目の内容

1 会員などの権限がある仕様の実現について

1-1 gemファイルの追加

1-2 gem のインストール

1-3 devise のジェネレーターで初期設定を行う①

1-4 devise のジェネレーターで初期設定を行う② テンプレート作成

1-5 devise のジェネレーターで初期設定を行う③ モデルとルートの作成

2 サインインからサインアウトの一連の流れを作る。

2-1 サインアップ（登録画面）

2-2 サインイン画面（登録後、ログイン画面）

2-3 ログアウト画面

2-4 ログイン、ログアウト状態の表示を、まとめましょう

2-5 ヘルパーメソッドについて

3 メール認証関係

3-1 DBを全部リセット

3-2

3-3 メール送信用の設定を登録

3-4 サインアップからメールで登録

最新記事一覧

関連コンテンツ

カテゴリー一覧

一週間のカリキュラム１週間で、Ruby 〜 Ruby on Railsまでを学ぶ

1-2 gem　のインストール

1-4 devise のジェネレーターで初期設定を行う②　テンプレート作成

3-3 　メール送信用の設定を登録