ラインみたいなwebアップリケーションを作ろう!! 3~4日目
はじめに
この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。
ユーザー登録手順
1、deviseのインストール
2、userモデルを作成する
3、deviseのビューファイルの追加
4、サインアップ機能の追加
5、ユーザー情報編集機能の追加
6、サインアウト/サインイン機能の追加
7、フラッシュメッセージの表示k脳の実装
1、deviseのインストール
Gemfileの最後の行に追加
gem ‘devise’
bundle install
Rails g devise:install
2、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
3、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ではサインアップ時にメールアドレスとパスワードのみを受け取るようにストロングパラメーターで設定してあるのでキーを追加しても許可されません
下記の記事がわかりやすく説明してます!!
5、ユーザー情報編集の追加
editアクションとupdateアクションによってユーザー名前とメールアドレスを編集できるようにします
①ルーティングの編集
Rails.application.routes.draw do
devise_for :users
root 'messages#index'
resources :users, only: [:edit, :update]
end
②viewの編集
/ ユーザー編集ページに遷移するためのパスを追加
.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
新着メッセージ
#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
③コントローラーの編集
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
6、サインアウト/サインイン機能の追加
#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'
.side-bar
.header
%h3.header__name
= current_user.name
# 〜省略〜
7、フラッシュメッセージの表示k脳の実装
フラッシュメッセージとは
アクション実行後に簡単なメッセージを表示させるRailsの機能です
例えば、サインインしたときに画面の上の方に、「ログインしました」のようなメッセージである
また、デフォルトでは、英語なので、日本語かする必要があります
①フラッシュメッセージを表示させるためのビューを作成します
今後のために部分テンプレ化もしておきます
.notification
- flash.each do |key, value|
= content_tag :div, value, class: key
!!!
%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のプロパティを設定します。
$white: #fff;
$side_blue_dark: #253141;
$side_blue_light: #2f3e51;
$light_blue: #38AEF0;
$light_gray: #999;
$black: #434a54;
$alert_orange: #F35500;
.notification {
.notice {
background-color: $light_blue;
color: $white;
text-align: center;
}
.alert {
background-color: $alert_orange;
color: $white;
text-align: center;
}
}
// colors.scssとflash.scssをインポート
@import "config/colors";
@import "modules/flash";
③config/locales以下に日本語のロケールファイルを追加
④日本語化のための記述変更
module ChatSpace
class Application < Rails::Application
#〜省略〜
config.i18n.default_locale = :ja
end
end
感想
応用に入って自分で検索する時間が増えた
これにより、かなり検索能力が上がったと思います
検索するには、検索したい内容をある程度理解する必要があります
理解していない場合、求めている情報にたどり着くまで時間がかかるため
最後に
もっとこうした方が良いよなどご指摘頂けると幸いです
Author And Source
この問題について(ラインみたいなwebアップリケーションを作ろう!! 3~4日目), 我々は、より多くの情報をここで見つけました https://qiita.com/helloworld-yoppy/items/f9482a1ec6e0d117f63e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .