LoginSignup
0
0

More than 3 years have passed since last update.

@helloworld-yoppy(Yoppy land)

ラインみたいなwebアップリケーションを作ろう！！　3~4日目

Posted at

はじめに

この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

ユーザー登録手順

１、deviseのインストール
２、userモデルを作成する
３、deviseのビューファイルの追加
４、サインアップ機能の追加
５、ユーザー情報編集機能の追加
６、サインアウト/サインイン機能の追加
７、フラッシュメッセージの表示k脳の実装

１、deviseのインストール

Gemfileの最後の行に追加


gem  ‘devise’

bundle install
Rails g devise:install

２、userモデルを作成する

①モデルの作成

Deviseのモデル作成は通常のモデルさ悪性方法と違います

通常

Rails g model

devise場合

Rails g devise user

補足

deviseで使用するモデルは、rails g devise <モデル名>コマンドで作成できます

②作成したマイグレーションファイルの設定

作成したマイグレーションファイルに下記を記述

t.string :name, null: false, unique: true

これにより、マイグレーション実行時にnameカラムがNOT NULL制約・一意性制約付きで作成されます

もし、制約がわからない場合

下記のURLを参照ください

③マイグレーションファイルの実行

Rails db:migrate

３、deviseのビューファイルの設定

あらかじめ用意してあるviewファイルをダウンロードして
カリキュラムどうりに配置していきます

今回配置したファイルを表示できるように設定する必要があります

①今回scssファイルも追加された為

app/assets/stylesheets/application.scss

@import “modeles/user”;

を追加します

注意

こちらのapplication.scssファイルは、各自構想が違う場合があります

②ユーザーがログインしていない場合にログインページに移行するようにする

application_controller.rbに、下記のヘルパーメソッドを追加

before_action :authenticate_user!

ヘルパーメソッドとは

ある動作を処理する場合にメソッド化して扱えるようにRailsにあらかじめ組み込まれた機能です

こちらを参照ください

Deviseで使えるヘルパーメソット　
https://qiita.com/tobita0000/items/866de191635e6d74e392

4. サインアップ機能の追加

前知識

ストロングパラメーターとは

Web上から入力されてきた値を制限することで、不正なパラメータを防ぐ仕組み

deviseではサインアップ時にメールアドレスとパスワードのみを受け取るようにストロングパラメーターで設定してあるのでキーを追加しても許可されません

下記の記事がわかりやすく説明してます！！

５、ユーザー情報編集の追加

editアクションとupdateアクションによってユーザー名前とメールアドレスを編集できるようにします

①ルーティングの編集

Rails.application.routes.draw do
 devise_for :users
 root 'messages#index'
 resources :users, only: [:edit, :update]
end

②viewの編集

shared/_side_bar.html.haml

/ ユーザー編集ページに遷移するためのパスを追加
.side-bar
  .header
    %h3.header__name
      ユーザーネーム
    %ul.header__lists
      %li.list
        = link_to do
          = icon('fas', 'pen-square', class: 'icon')
      %li.list
        = link_to edit_user_path(current_user) do
          = icon('fas', 'cog', class: 'icon')
  .groups
    .group
      .group__name
        グループ名
      .group__message
        新着メッセージ
    .group
      .group__name
        グループ名
      .group__message
        新着メッセージ
    .group
      .group__name
        グループ名
      .group__message
        新着メッセージ
users/edit.html.haml


#account-page.account-page
  .account-page__inner.clearfix
    .account-page__inner--left.account-page__header
      %h2 Edit Account
      %h5 アカウントの編集
      = link_to "ログアウト", destroy_user_session_path, method: :delete, class: 'btn'
      = link_to "トップページに戻る", :back, class: 'btn'
    .account-page__inner--right.user-form
      = form_for(current_user) do |f|
        .field
          .field-label
            = f.label :name
          .field-input
            = f.text_field :name, autofocus: true
        .field
          .field-label
            = f.label :email
          .field-input
            = f.email_field :email
        .actions
          = f.submit "Update", class: 'btn'


shared/_side_bar.html.haml

.side-bar
  .header
    %h3.header__name
      = current_user.name

③コントローラーの編集

users_controller.rb


class UsersController < ApplicationController

 def edit
 end

 def update
   if current_user.update(user_params)
     redirect_to root_path
   else
     render :edit
   end
 end

 private
 def user_params
   params.require(:user).permit(:name, :email)
 end
end

６、サインアウト/サインイン機能の追加

users/edit.html.haml

#account-page.account-page
 .account-page__inner.clearfix
   .account-page__inner--left.account-page__header
     %h2 Edit Account
     %h5 アカウントの編集
     = link_to "ログアウト", destroy_user_session_path, method: :delete, class: 'btn'
     = link_to "トップページに戻る", :back, class: 'btn'
   .account-page__inner--right.user-form
     = form_for(current_user) do |f|
       .field
         .field-label
           = f.label :name
         .field-input
           = f.text_field :name, autofocus: true
       .field
         .field-label
           = f.label :email
         .field-input
           = f.email_field :email
       .actions
         = f.submit "Update", class: 'btn'
shared/_side_bar.html.haml


.side-bar
  .header
    %h3.header__name
      = current_user.name
# 〜省略〜

７、フラッシュメッセージの表示k脳の実装

フラッシュメッセージとは
アクション実行後に簡単なメッセージを表示させるRailsの機能です

例えば、サインインしたときに画面の上の方に、「ログインしました」のようなメッセージである
また、デフォルトでは、英語なので、日本語かする必要があります

①フラッシュメッセージを表示させるためのビューを作成します
今後のために部分テンプレ化もしておきます

app/views/layouts/_notifications.html.haml

.notification
 - flash.each do |key, value|
   = content_tag :div, value, class: key
app/views/layouts/application.html.haml

!!!
%html
 %head
   %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
   %title ChatSpace
   = csrf_meta_tags
   = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
   = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
 %body
   = render 'layouts/notifications'
   = yield

②フラッシュメッセージ用のCSSを作成しましょう

colors.scssで色を変数として定義します。
そしてflash.scssで変数を用いてcolorのプロパティを設定します。

stylesheets/config/colors.scss

$white: #fff;
$side_blue_dark: #253141;
$side_blue_light: #2f3e51;
$light_blue: #38AEF0;
$light_gray: #999;
$black: #434a54;
$alert_orange: #F35500;
stylesheets/modules/flash.scss

.notification {
 .notice {
   background-color: $light_blue;
   color: $white;
   text-align: center;
 }
 .alert {
   background-color: $alert_orange;
   color: $white;
   text-align: center;
 }
}
application.scss

// colors.scssとflash.scssをインポート
@import "config/colors";
@import "modules/flash";

③config/locales以下に日本語のロケールファイルを追加

④日本語化のための記述変更

config/application.rb

module ChatSpace
  class Application < Rails::Application
    #〜省略〜
    config.i18n.default_locale = :ja
  end
end

感想

応用に入って自分で検索する時間が増えた
これにより、かなり検索能力が上がったと思います
検索するには、検索したい内容をある程度理解する必要があります
理解していない場合、求めている情報にたどり着くまで時間がかかるため

最後に

もっとこうした方が良いよなどご指摘頂けると幸いです

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0