#1 ユーザー登録の実装

Gemfile

@@ -7,32 +7,33 @@ end
 
 
 
-gem 'rails', '~> 5.1.2'
+gem 'rails',          '~> 5.1.2'
+gem 'bcrypt',         '~> 3.1'
 gem 'bootstrap-sass'
-gem 'puma', '~> 3.7'
-gem 'sass-rails', '~> 5.0'
-gem 'uglifier', '>= 1.3.0'
-gem 'coffee-rails', '~> 4.2'
-gem 'turbolinks', '~> 5'
-gem 'jbuilder', '~> 2.5'
+gem 'puma',           '~> 3.7'
+gem 'sass-rails',     '~> 5.0'
+gem 'uglifier',       '>= 1.3.0'
+gem 'coffee-rails',   '~> 4.2'
+gem 'turbolinks',     '~> 5'
+gem 'jbuilder',       '~> 2.5'
 
 group :development, :test do
-  gem 'sqlite3', '1.3.11'
-  gem 'byebug', '9.0.0', platform: :mri
+  gem 'sqlite3'
+  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
 end
 
 group :development do
-  gem 'web-console', '>= 3.3.0'
-  gem 'listen', '>= 3.0.5', '< 3.2'
+  gem 'web-console',           '>= 3.3.0'
+  gem 'listen',                '>= 3.0.5', '< 3.2'
   gem 'spring'
   gem 'spring-watcher-listen', '~> 2.0.0'
 end
 
 group :test do
-  gem 'rails-controller-testing', '0.1.1'
-  gem 'minitest-reporters', '1.1.9'
-  gem 'guard', '2.13.0'
-  gem 'guard-minitest', '2.4.4'
+  gem 'rails-controller-testing'
+  gem 'minitest-reporters'
+  gem 'guard'
+  gem 'guard-minitest'
 end
 
 group :production do

Gemfile.lock

@@ -42,6 +42,7 @@ GEM
     arel (8.0.0)
     autoprefixer-rails (7.1.1.2)
       execjs
+    bcrypt (3.1.11)
     bindex (0.5.0)
     bootstrap-sass (3.3.7)
       autoprefixer-rails (>= 5.2.1)
@@ -195,22 +196,23 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bcrypt (~> 3.1)
   bootstrap-sass
-  byebug (= 9.0.0)
+  byebug
   coffee-rails (~> 4.2)
-  guard (= 2.13.0)
-  guard-minitest (= 2.4.4)
+  guard
+  guard-minitest
   jbuilder (~> 2.5)
   listen (>= 3.0.5, < 3.2)
-  minitest-reporters (= 1.1.9)
+  minitest-reporters
   pg (= 0.18.4)
   puma (~> 3.7)
   rails (~> 5.1.2)
-  rails-controller-testing (= 0.1.1)
+  rails-controller-testing
   sass-rails (~> 5.0)
   spring
   spring-watcher-listen (~> 2.0.0)
-  sqlite3 (= 1.3.11)
+  sqlite3
   turbolinks (~> 5)
   tzinfo-data
   uglifier (>= 1.3.0)

app/assets/javascripts/users.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/custom.scss

@@ -11,6 +11,21 @@ body {
   text-align: center;
 }
 
+/*    mixin, valuables, etc    */
+@mixin box_sizing {
+-moz-box-sizing: border-box;
+-webkit-box-sizing: border-box;
+box-sizing: border-box;
+}
+
+.debug_dump {
+clear: both;
+float: left;
+width: 100%;
+margin-top: 45px;
+@include box_sizing;
+}
+
 /*    Typography    */
 
 body {
@@ -23,11 +38,13 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: 36px;
+  text-align: center;
   margin-bottom: 30px;
 }
 
 h2 {
   font-size: 24px;
+  text-align: center;
   margin-bottom: 20px;
 }
 
@@ -78,7 +95,23 @@ header {
 
 /*    Wrapper    */
 
+/*    Aside    */
 
+aside {
+  section.user_info {
+    text-align: center;
+  }
+  section{
+    .gravatar {
+      margin-bottom: 10px;
+      border-radius: 100%;
+    }
+    .user_name{
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+}
 
 /*    Footer    */
 
@@ -88,6 +121,7 @@ footer {
   color: #fff;
   font-size: 13px;
   padding: 30px 0px;
+  margin-top: 50px;
   font-size: 14px;
   .nav-menu {
     text-align: center;
@@ -122,3 +156,33 @@ footer {
     text-align: center;
   }
 }
+
+/*    Form    */
+
+input, textarea, select, .uneditable-input {
+  font-size: 18px;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  width: 100%;
+  margin-bottom: 30px;
+  @include box_sizing;
+}
+
+input {
+  height: auto !important;
+}
+
+.error_explanation {
+  color: red;
+  ul {
+    color: red;
+    margin-bottom: 30px;
+  }
+}
+
+.field_with_errors {
+  @extend .has-error;
+  .form-control {
+    color: $state-danger-text;
+  }
+}

app/assets/stylesheets/users.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the Users controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/controllers/users_controller.rb

@@ -0,0 +1,29 @@
+class UsersController < ApplicationController
+  def new
+    @user = User.new
+  end
+
+  def create
+    @user = User.new(user_params)
+    if @user.save
+      #登録成功時のアクション
+      flash[:success] = "ユーザー登録が完了しました！"
+      redirect_to @user
+    else
+      #登録失敗時のアクション
+      render "new"
+    end
+  end
+
+  def show
+    @user = User.find(params[:id])
+  end
+
+  private
+
+    #ストロングパラメーター
+    def user_params
+      params.require(:user).permit(:user_name, :email, :password,
+                                   :password_confirmation)
+    end
+end

app/helpers/users_helper.rb

@@ -0,0 +1,9 @@
+module UsersHelper
+
+  #ユーザーからGravatarを返す
+  def gravatar_for(user, size: 80)
+    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
+    gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}?s=#{size}"
+    image_tag(gravatar_url, alt: user.user_name, class: "gravatar")
+  end
+end

app/models/user.rb

@@ -0,0 +1,15 @@
+class User < ApplicationRecord
+  before_save { email.downcase! }
+  VALID_USER_NAME_REGEX = /\A(\w+)\z/i
+  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-]+(\.[a-z\d\-]+)*\.[a-z]+\z/i
+  validates :user_name, presence: true,
+                        length: { maximum: 30 },
+                        uniqueness: { case_sensitive: false},
+                        format: { with: VALID_USER_NAME_REGEX }
+  validates :email, presence: true,
+                    length: { maximum: 255 },
+                    uniqueness: { case_sensitive: false},
+                    format: { with: VALID_EMAIL_REGEX }
+  has_secure_password
+  validates :password, presence: true, length: { minimum: 6 }
+end

app/views/layouts/_header.html.erb

@@ -3,7 +3,7 @@
     <%= link_to "Knowledge Stocker", root_path, id: "logo" %>
     <nav>
       <ul class="nav-menu">
-        <li><%= link_to "新規登録", "#" %></li>
+        <li><%= link_to "新規登録", signup_path %></li>
         <li><%= link_to "ログイン", "#" %></li>
       </ul>
     </nav>

app/views/layouts/application.html.erb

@@ -11,8 +11,12 @@
   <body>
     <%= render "layouts/header" %>
     <div class="container">
+      <% flash.each do |msg_type, msg| %>
+        <%= content_tag(:div, msg, class: "alert alert-#{msg_type}") %>
+      <% end %>
       <%= yield %>
     </div>
     <%= render "layouts/footer" %>
+    <%= debug(params) if Rails.env.development? %>
   </body>
 </html>

app/views/shared/_error_messages.html.erb

@@ -0,0 +1,12 @@
+<% if @user.errors.any? %>
+  <div class="error_explanation">
+    <div class="alert alert-danger">
+      <%= "入力エラー：#{@user.errors.count}項目" %>
+    </div>
+    <ul>
+      <% @user.errors.full_messages.each do |msg| %>
+        <li><%= msg %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

app/views/static_pages/home.html.erb

@@ -1,5 +1,5 @@
 <div class="center jumbotron">
   <h1>Knowledge Stocker</h1>
   <h2>効率的かつ意欲的な学習体験を。</h2>
-  <%= link_to "新規登録", "#", class: "btn btn-lg btn-primary" %>
+  <%= link_to "新規登録", signup_path, class: "btn btn-lg btn-primary" %>
 </div>

app/views/users/new.html.erb

@@ -0,0 +1,24 @@
+<%= provide(:title, "新規登録") %>
+<h1>新規登録</h1>
+
+<div class="row">
+  <div class="col-md-6 col-md-offset-3">
+    <%= form_for(@user, url: signup_path) do |f| %>
+      <%= render "shared/error_messages" %>
+
+      <%= f.label :user_name, "ユーザー名" %>
+      <%= f.text_field :user_name, class: "form_control" %>
+
+      <%= f.label :email, "メールアドレス" %>
+      <%= f.email_field :email, class: "form_control" %>
+
+      <%= f.label :password, "パスワード" %>
+      <%= f.password_field :password, class: "form_control" %>
+
+      <%= f.label :password_confirmation, "パスワード（確認）" %>
+      <%= f.password_field :password_confirmation, class: "form_control" %>
+
+      <%= f.submit "登録する", class: "btn btn-primary" %>
+    <% end %>
+  </div>
+</div>

app/views/users/show.html.erb

@@ -0,0 +1,10 @@
+<% provide(:title, @user.user_name) %>
+<h1>ユーザー情報</h1>
+<div class="row">
+  <aside class="col-md-4">
+    <section class="user_info">
+      <%= gravatar_for @user, size: 180 %>
+      <div class="user_name"><%= @user.user_name %></div>
+    </section>
+  </aside>
+</div>

config/routes.rb

@@ -2,4 +2,7 @@
   root 'static_pages#home'
   get '/about',   to: 'static_pages#about'
   get '/contact', to: 'static_pages#contact'
+  get '/signup' , to: 'users#new'
+  post '/signup', to: 'users#create'
+  resources :users
 end

db/migrate/20170705223629_create_users.rb

@@ -0,0 +1,11 @@
+class CreateUsers < ActiveRecord::Migration[5.1]
+  def change
+    create_table :users do |t|
+      t.string :user_name
+      t.string :email
+      t.string :password_digest
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20170706211140_add_index_to_users.rb

@@ -0,0 +1,6 @@
+class AddIndexToUsers < ActiveRecord::Migration[5.1]
+  def change
+    add_index :users, :user_name, unique: true
+    add_index :users, :email, unique: true
+  end
+end

db/schema.rb

@@ -0,0 +1,25 @@
+# This file is auto-generated from the current state of the database. Instead
+# of editing this file, please use the migrations feature of Active Record to
+# incrementally modify your database, and then regenerate this schema definition.
+#
+# Note that this schema.rb definition is the authoritative source for your
+# database schema. If you need to create the application database on another
+# system, you should be using db:schema:load, not running all the migrations
+# from scratch. The latter is a flawed and unsustainable approach (the more migrations
+# you'll amass, the slower it'll run and the greater likelihood for issues).
+#
+# It's strongly recommended that you check this file into your version control system.
+
+ActiveRecord::Schema.define(version: 20170706211140) do
+
+  create_table "users", force: :cascade do |t|
+    t.string "user_name"
+    t.string "email"
+    t.string "password_digest"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["email"], name: "index_users_on_email", unique: true
+    t.index ["user_name"], name: "index_users_on_user_name", unique: true
+  end
+
+end

test/controllers/users_controller_test.rb

@@ -0,0 +1,9 @@
+require 'test_helper'
+
+class UsersControllerTest < ActionDispatch::IntegrationTest
+  test "should get new" do
+    get signup_path
+    assert_response :success
+  end
+
+end