Rails – 掲示板 – プロフィールコメント編集

2021-03-28 / tau / コメントする

概要

ユーザー設定の枠組みに、プロフィールコメントの編集機能を実装する。

ルーティングの確認

ユーザー設定でルーティングは設定済みだが確認しておく。フォームからのデータはPATCHで送られてくる。

Rails.application.routes.draw do

  .....

  get '/users/:id/edit', to: 'users#edit', as: :edit_user
  patch '/users/:id/edit', to: 'users#update', as: :update_user
end

Rails.application.routes.draw do

.....

get '/users/:id/edit', to: 'users#edit', as: :edit_user

patch '/users/:id/edit', to: 'users#update', as: :update_user

end

ビューの編集

edit.html.erbにコメント入力欄を追加し、スタイル設定のためのdiv要素を加える。

フォームのボタンが押されると、PATCHメソッドでupdate_user_pathにルーティングされる。その際、セッション中のユーザーのIDがparamsに渡される。

app/views/users/edit.html.erb

<div class="user_settings">
  <h1><%= @user.name %>さんのユーザー設定</h1>

  <div class="user_settings_form">
    <%= form_with(model: @user, url: update_user_path(user_in_session), local: true) do |f| %>
      <h2>プロフィールコメント</h2>
      <%= f.text_area(:comment, class: "input comment", placeholder: "プロフィールコメント") %>
      <button>この内容で設定</button>
    <% end %>
  </div>
</div>

<h1><%= @user.name %>さんのユーザー設定</h1>

<%= form_with(model: @user, url: update_user_path(user_in_session), local: true) do |f| %>

<h2>プロフィールコメント</h2>

<%= f.text_area(:comment, class: "input comment", placeholder: "プロフィールコメント") %>

<button>この内容で設定</button>

<% end %>

</div>

また、プロフィール画面でコメント表示するようshow.html.erbを変更する。

app/views/users/show.html.erb

<div class="user_profile">
  <h1><%= @user.name %>さんのプロフィール</h1>
  <div class="contents">
    <%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>
    <p class="comment">
      <%= @user.comment %><br>
    </p>
  </div>
</div>

<h1><%= @user.name %>さんのプロフィール</h1>

<%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>

<%= @user.comment %><br>

</p>

</div>

コントローラーの編集

editアクション(再掲)

UsersControllerのeditでセッションユーザーを取得し、ビューで共用できるようインスタンス変数に格納する(ユーザー設定機能で実装済みだが再掲)。

class UsersController < ApplicationController

  .....

  def edit
    # ビューで表示させるユーザー
    @user = User.find(user_in_session.id)
  end

  .....

end

class UsersController < ApplicationController

.....

def edit

# ビューで表示させるユーザー

@user = User.find(user_in_session.id)

end

.....

end

updateアクション

updateでもセッション中のユーザー取得してインスタンス変数に保存する。

そして、フォームで入力されたパラメーターの内容で@user(セッション中のユーザー)の内容を更新する。

現在のフォームから送られてくるのは:comment(と:id)だけなので、この内容で:idで取得済みのユーザーのコメントが更新される。

更新に成功した場合はプロフィールページへ
更新に失敗した場合は再度ユーザー設定画面へ

class UsersController < ApplicationController

  .....

  def update
    @user = User.find(user_in_session.id)

    if @user.update(user_params)
      redirect_to profile_path(user_in_session)
    else
      flash.now[:danger] = "設定更新できませんでした"
      flash.now :edit_user, layout: 'application' and return
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def update

@user = User.find(user_in_session.id)

if @user.update(user_params)

redirect_to profile_path(user_in_session)

else

flash.now[:danger] = "設定更新できませんでした"

flash.now :edit_user, layout: 'application' and return

end

.....

end

user_paramsヘルパーの変更

今の設定では、user_paramsの中で取得が許可されている属性にコメントが含まれていない。

そこでフォームから送られてくるコメントのデータを受信可能とするために、user_paramsで:commentをpermitに追加する。

class UsersController < ApplicationController

  .....

  # フォーム入力のパラメーターを取得するメソッド
  private
  def user_params
    params.require(:user).permit(:name, :email, :password, :comment)
  end
end

class UsersController < ApplicationController

.....

# フォーム入力のパラメーターを取得するメソッド

private

def user_params

params.require(:user).permit(:name, :email, :password, :comment)

end

スタイルファイル

ユーザー設定ページのスタイルをusers.scssに追記する。

apps/assets/stylesheets/users.scss

// ユーザー設定ページのスタイル
.user_settings {
  margin: 0 auto;
  width: 600px;
  height: 100%;
  background-color: white;

  h1 {
    margin: 0 auto;
    padding: 40px 0 30px 0;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .user_settings_form {
    h2 {
      margin: 30px 20px 0 10px;
      font-size: 15px;
    }
    .input {
      display: block;
      margin: 10px 20px 0 auto;
      width: 500px;
    }
    .comment {
      height: 100px;
      background-color: #f8f8f8;
    }
    button {
      display: block;
      margin: 10px 20px 10px auto;
    }
  }
}

// ユーザー設定ページのスタイル

.user_settings {

margin: 0 auto;

width: 600px;

height: 100%;

background-color: white;

h1 {

margin: 0 auto;

padding: 40px 0 30px 0;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.user_settings_form {

h2 {

margin: 30px 20px 0 10px;

font-size: 15px;

}

.input {

display: block;

margin: 10px 20px 0 auto;

width: 500px;

}

.comment {

height: 100px;

background-color: #f8f8f8;

}

button {

display: block;

margin: 10px 20px 10px auto;

}

実行結果

ボタンを押して内容がセットされると、プロフィールページに遷移して変更が反映される。

Rails – 掲示板 – ユーザー設定の枠組み

2021-03-28 / tau / コメントする

概要

プロフィールの編集機能は、ユーザー設定機能として追加する。

プロフィールの画像ファイル名とコメントはユーザー属性として追加した。そこでプロフィール編集に限定しない「ユーザー設定」の機能にこれを含め、今後様々なユーザーの属性設定が可能なようにする。

掲示板の第2段階へ

ユーザー設定の枠組み

editとupdate

ユーザー設定の枠組みにはeditとupdateを使う。

	編集画面	編集処理
URL	`/user/:id/edit`	`/user/:id/update`
Prefix	`edit_user`	`update_user`
action	`users#edit`	`users#update`
method	GET	PATCH
画面	`edit.html.erb`	`edit.html.erb`

ルーティング

枠組みに従ってルーティングを設定。Prefixを使ったユーザーごとのリンクはedit_user_path(:id)のようになる。

updateアクションへのルーティングのメソッドはpatchとしている。Railsによって、form_withで扱うモデルがデータベースに未保存の場合はPOST、保存済みの場合はPATCHが送信されるようにHTMLが生成される。

config/routes.rb

Rails.application.routes.draw do

  .....

  get '/users/:id/edit', to: 'users#edit', as: :edit_user
  patch '/users/:id/edit', to: 'users#update', as: :update_user
end

Rails.application.routes.draw do

.....

get '/users/:id/edit', to: 'users#edit', as: :edit_user

patch '/users/:id/edit', to: 'users#update', as: :update_user

end

コントローラー

枠組みに従ってusersコントローラーにeditアクションとupdateアクションを準備する。

editアクションでは、ビューで表示させるためセッション中のユーザーのオブジェクトをインスタンス変数に格納する。

app/controllers/users_controller.rb

class UsersController < ApplicationController

  .....

  def edit
    # ビューで表示させるユーザー
    @user = User.find(user_in_session.id)
  end

  def update
    # update処理
  end

  .....

end

class UsersController < ApplicationController

.....

def edit

# ビューで表示させるユーザー

@user = User.find(user_in_session.id)

end

def update

# update処理

end

.....

end

ビュー

users#editでレンダリングされるビューを準備する。

@user.nameを表示させて、受け渡しを確認
form_withとbuttonを配置して、フォームのボタンが押されたときのメソッドを確認

app/views/users/edit.html.erb

<h1><%= @user.name %>さんのユーザー設定</h1>

<%= form_with(model: @user, url: update_user_path(user_in_session), local: true) do |f| %>
  <button>この内容で設定</button>
<% end %>

<h1><%= @user.name %>さんのユーザー設定</h1>

<%= form_with(model: @user, url: update_user_path(user_in_session), local: true) do |f| %>

<button>この内容で設定</button>

<% end %>

メニューの追加

ヘッダーメニューにユーザー設定の項目を追加する。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <%= link_to(top_path) do %>
        <div class="header_logo"></div>
      <% end %>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <li><%= link_to("トップ", top_path) %></li>
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", profile_path(user_in_session)) %></li>
        <li><%= link_to("ユーザー設定", edit_user_path(user_in_session)) %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

<%= link_to(top_path) do %>

<% end %>

</ul>

</header>

<%= yield %>

</body>

</html>

動作確認

ここでヘッダーメニューのユーザー設定をクリックすると、以下の画面が表示され、@userが渡されているのがわかる。

ここでボタンを押したときの、Railsサーバーのコンソールの表示は以下のとおり。

Started PATCH "/users/1/edit" for 10.0.2.2 at 2021-03-28 15:28:34 +0900
Processing by UsersController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"eSm3OSQdQEaEChpP7T11URwCT4Ezv/1vWMTGq4/u/JsBm1jnrbJg/agM0p/xY+6YEKPUqx5+9YQUMm3ECZWWCg==", "id"=>"1"}
  User Load (0.6ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
No template found for UsersController#update, rendering head :no_content
Completed 204 No Content in 34ms (ActiveRecord: 0.6ms)

Started PATCH "/users/1/edit" for 10.0.2.2 at 2021-03-28 15:28:34 +0900

Processing by UsersController#update as HTML

Parameters: {"utf8"=>"✓", "authenticity_token"=>"eSm3OSQdQEaEChpP7T11URwCT4Ezv/1vWMTGq4/u/JsBm1jnrbJg/agM0p/xY+6YEKPUqx5+9YQUMm3ECZWWCg==", "id"=>"1"}

User Load (0.6ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1

No template found for UsersController#update, rendering head :no_content

Completed 204 No Content in 34ms (ActiveRecord: 0.6ms)

PATCHメソッドであることや、URLのパターン、paramsの:idが1にセットされていることがわかる。

留意点

editのルーティングの書き方について

ここではeditへのルーティングを以下の様に書いた。

get '/users/:id/edit', to: 'users#edit', as: :edit_user

1	get '/users/:id/edit', to: 'users#edit', as: :edit_user

この場合、たとえばユーザーIDが1の設定ページのブラウザでのURLは以下の様になる。

http://localhost:3000/users/1/edit

一方、このルーティングを単に以下の様に書いても通る。

get '/users/edit', to: 'users#edit', as: :edit_user

1	get '/users/edit', to: 'users#edit', as: :edit_user

このときのURLは次のように形が違うが、ページは適正にレンダリングされる。

http://localhost:3000/users/edit.1

どちらのルーティングの書き方でも、Prefixによるヘルパーは、IDに対応して問題なくルーティングしてくれる。

edit_user_path(:id)

edit/updateのアクションについて

前述のように、モデルのインスタンスがデータベースに登録済みであれば、フォーム実行時のメソッドはRailsによってPATCHとされる。

これをPOSTなどに変更したい場合は、以下の様にform_withでメソッドを指定し、ルーティングのメソッドもそれに合わせる。

<%= form_with(model: @user, url: update_user_path(user_in_session), method: post, local: true) do |f| %>

1	<%= form_with(model: @user, url: update_user_path(user_in_session), method: post, local: true) do \|f\| %>

コントローラーでのIDの指定について

UsersController中、showアクションでユーザープロフィールを表示、editアクションとupdateアクションではプロフィールの変更を行っている。

showアクションでは、データベースからparamsに格納された:idのユーザーを取得している。

  def show
    @user = User.find(params[:id])
  end

def show

@user = User.find(params[:id])

end

一方プロフィールを編集する場合、セッション中のユーザーのID(user_in_session.id)を使っている。

  def edit
    @user = User.find(user_in_session.id)
  end

  def update
    @user = User.find(user_in_session.id)

    if @user.update(user_params)
      redirect_to profile_path(user_in_session)
    else
      flash.now[:danger] = "設定更新できませんでした"
      flash.now :edit_user, layout: 'application' and return
    end

def edit

@user = User.find(user_in_session.id)

end

def update

@user = User.find(user_in_session.id)

if @user.update(user_params)

redirect_to profile_path(user_in_session)

else

flash.now[:danger] = "設定更新できませんでした"

flash.now :edit_user, layout: 'application' and return

end

params[:id]を使うと、他のユーザーのプロフィールにも反応してその内容を見られる。

プロフィールページはサインインしているユーザーのみ見られ、かつ他のユーザーのプロフィールを見られることを想定しているのでこの方法をとる。

一方プロフィールを編集する場合は、サインインしている(セッション中の)ユーザーのデータのみ扱う必要があるので、user_in_session.idを使う。

Rails – 掲示板 – アイコンの導入

2021-03-27 / tau / コメントする

概要

これまでメニューには「投稿」や「サインアウト」といった文字列を表示していたが、ここでこれらをアイコンに変更する。

アイコンはCDNで提供されるものもあり、ここではFont Awesomeを利用する。

読み込みスクリプトの記述

ヘッダーメニューの共通レイアウト、application.html.erbのheadセクションに、Font Awesomeのアイコンを使うためのJavaScriptを読み込むタグを記述する。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ExBbs</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- Font Awesomeを使うためのスクリプト -->
    <script src="https://kit.fontawesome.com/08c0548ff0.js" crossorigin="anonymous"></script>
  </head>

  .....

</html>

<!DOCTYPE html>

<html>

<head>

<title>ExBbs</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

.....

</html>

アイコンタグの記述

Font Awesomeのアイコンは、iタグのクラスでアイコンの種類を指定して表示させる。アイコンごとのクラス表現を含むタグは、サイトでアイコンを選択するとコピーできる。

<i class="fas fa-home"></i>

1	<i class="fas fa-home"></i>

また、Railsのlink_toヘルパーでアイコンをクリックしたときのリンク先を指定する場合、以下の様にdoブロックで囲む。

<%= link_to(top_path) do %>
  <i class="fas fa-home"></i>
<% end %>

<%= link_to(top_path) do %>

<% end %>

また、ここでは以下の2つを追加している。

アイコンのスタイルを設定するクラスを追加
マウスオーバー時に表示されるtitleを追加

<i class="fas fa-home icon" title="トップページ"></i>

1	<i class="fas fa-home icon" title="トップページ"></i>

こうしてヘッダーメニューを変更したのが以下の内容。

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <%= link_to(top_path) do %>
        <div class="header_logo"></div>
      <% end %>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <!-- トップページへのリンク -->
        <li>
          <%= link_to(top_path) do %>
            <i class="fas fa-home icon" title="トップページ"></i>
          <% end %>
        </li>
        <!-- 投稿ページへのリンク -->
        <li>
          <%= link_to("#") do %>
            <i class="fas fa-arrow-circle-up icon" title="記事投稿"></i>
          <% end %>
        </li>
        <!-- プロフィールページへのリンク -->
        <li>
          <%= link_to(profile_path(user_in_session)) do %>
            <i class="fas fa-user-alt icon" title="プロフィール"></i>
          <% end %>
        </li>
        <!-- サインアウト -->
        <li>
          <%= link_to(sign_out_path) do %>
            <i class="fa fa-sign-out-alt icon" title="サインアウト"></i>
          <% end %>
        </li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

<%= link_to(top_path) do %>

<% end %>

<li>

<%= link_to(top_path) do %>

<% end %>

</li>

<li>

<%= link_to("#") do %>

<% end %>

</li>

<li>

<%= link_to(profile_path(user_in_session)) do %>

<% end %>

</li>

<li>

<%= link_to(sign_out_path) do %>

<% end %>

</li>

</ul>

</header>

<%= yield %>

</body>

</html>

スタイルの設定

アイコンタグのクラスにスタイルを適用するため、SCSSファイルを編集する。

アイコンの間に線を引くための&+liブロックを削除し、.iconブロックを追加してサイズ色を設定している。

app/assets/stylesheets/header.css

  .header_menu {
    display: flex;
    list-style: none;

    & li {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px 10px 5px;
      width: 50px;//100px;
      font-size: 14px;
      color: var(--title-color);

      & a {
        text-decoration: none;
        color: var(--title-color);
      }

      .icon {
        font-size: 30px;
        color: #0af;
      }
    }
  }

.header_menu {

display: flex;

list-style: none;

& li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 50px;//100px;

font-size: 14px;

color: var(--title-color);

& a {

text-decoration: none;

color: var(--title-color);

}

.icon {

font-size: 30px;

color: #0af;

}

Rails – 掲示板 – ユーザー属性の追加

2021-03-26 / tau / コメントする

概要

ユーザーモデルにプロフィールに使う画像ファイル名とコメントの2つの属性を追加する。

そのために、既にデータが登録されているデータベースのテーブルに、カラムを追加する。

マイグレーションによるカラム追加

データベースにデータが登録されている状態で、データを損なわずにテーブルのカラムを追加する。大まかな流れは以下のとおり。

カラム追加用のマイグレーションファイルを生成する
追加用マイグレーションファイルの内容を確認する／記述する
マイグレーションを実行する

現在のテーブルをマイグレートした際のマイグレーションファイルの内容は以下のとおり。

db/migrate/20210320060906_create_users.rb

class CreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email
      t.string :password

      t.timestamps
    end
  end
end

class CreateUsers < ActiveRecord::Migration[5.1]

def change

create_table :users do |t|

t.string :name

t.string :email

t.string :password

t.timestamps

end

カラム追加用マイグレーションファイルの生成

カラム追加のためのマイグレーションファイルを生成するコマンドは以下のとおり。

rails generate migration AddAnyToTable col:type ...

Anyは一般に追加するカラム名を書くが、任意の文字列でよい
Tableはカラムを追加するテーブル名
col:typeは追加するカラム名と型で複数指定可
- 指定しなければ空のマイグレーションファイルが生成され、後から追加内容を記述

[vagrant@vagrant ex_bbs]$ rails generate migration AddCoumunsToUsers
Running via Spring preloader in process 1177
      invoke  active_record
      create    db/migrate/20210326083051_add_coumuns_to_users.rb

[vagrant@vagrant ex_bbs]$ rails generate migration AddCoumunsToUsers

Running via Spring preloader in process 1177

invoke active_record

create db/migrate/20210326083051_add_coumuns_to_users.rb

マイグレーションファイルの記述

コマンド実行の結果、以下のようなマイグレーションファイルが生成される。

20210326083051_add_coumuns_to_users.rb

class AddCoumunsToUsers < ActiveRecord::Migration[5.1]
  def change
  end
end

class AddCoumunsToUsers < ActiveRecord::Migration[5.1]

def change

end

このファイルのchangeメソッドにカラム追加の命令を記述。

add_column :table, :col, :type

テーブル名、カラム名、型をシンボルで記述する。

class AddCoumunsToUsers < ActiveRecord::Migration[5.1]
  def change
    add_column :users, :image_file_name, :string
    add_column :users, :comment, :text
  end
end

class AddCoumunsToUsers < ActiveRecord::Migration[5.1]

def change

add_column :users, :image_file_name, :string

add_column :users, :comment, :text

end

マイグレーションの実行

マイグレーションを実行。

[vagrant@vagrant ex_bbs]$ rails db:migrate
== 20210326083051 AddCoumunsToUsers: migrating ================================
-- add_column(:users, :image_file_name, :string)
   -> 0.0235s
-- add_column(:users, :comment, :text)
   -> 0.0079s
== 20210326083051 AddCoumunsToUsers: migrated (0.0324s) =======================

[vagrant@vagrant ex_bbs]$ rails db:migrate

== 20210326083051 AddCoumunsToUsers: migrating ================================

-- add_column(:users, :image_file_name, :string)

-> 0.0235s

-- add_column(:users, :comment, :text)

-> 0.0079s

== 20210326083051 AddCoumunsToUsers: migrated (0.0324s) =======================

マイグレーションの結果、新たにカラムが追加されている。

mysql> DESC users;
+-----------------+--------------+------+-----+---------+----------------+
| Field           | Type         | Null | Key | Default | Extra          |
+-----------------+--------------+------+-----+---------+----------------+
| id              | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| name            | varchar(255) | YES  |     | NULL    |                |
| email           | varchar(255) | YES  |     | NULL    |                |
| password        | varchar(255) | YES  |     | NULL    |                |
| image_file_name | varchar(255) | YES  |     | NULL    |                |
| comment         | text         | YES  |     | NULL    |                |
| created_at      | datetime     | NO   |     | NULL    |                |
| updated_at      | datetime     | NO   |     | NULL    |                |
+-----------------+--------------+------+-----+---------+----------------+
8 rows in set (0.00 sec)

mysql> DESC users;

+-----------------+--------------+------+-----+---------+----------------+

+-----------------+--------------+------+-----+---------+----------------+

| id | bigint(20) | NO | PRI | NULL | auto_increment |

+-----------------+--------------+------+-----+---------+----------------+

8 rows in set (0.00 sec)

データが残っていることを確認。追加されたカラムはupdated_atよりも後ろにある。

mysql> SELECT * FROM users;
+----+-----------+-----------------+----------------------------------+---------------------+---------------------+-----------------+---------+
| id | name      | email           | password                         | created_at          | updated_at          | image_file_name | comment |
+----+-----------+-----------------+----------------------------------+---------------------+---------------------+-----------------+---------+
|  1 | 悟空      | monkey@west.com | 6a77453834293fcef88f115d4d8fe8ef | 2021-03-26 17:34:29 | 2021-03-26 17:34:29 | NULL            | NULL    |
|  2 | 八戒      | piglet@west.com | 96131de181864ba18294e01a88c39318 | 2021-03-26 17:34:48 | 2021-03-26 17:34:48 | NULL            | NULL    |
|  3 | 沙悟浄    | copper@west.com | fabb6c55e63a5b22b377f4ec1cfee51c | 2021-03-26 17:35:07 | 2021-03-26 17:35:07 | NULL            | NULL    |
+----+-----------+-----------------+----------------------------------+---------------------+---------------------+-----------------+---------+
3 rows in set (0.00 sec)

mysql> SELECT * FROM users;

+----+-----------+-----------------+----------------------------------+---------------------+---------------------+-----------------+---------+

+----+-----------+-----------------+----------------------------------+---------------------+---------------------+-----------------+---------+

| 1 | 悟空 | monkey@west.com | 6a77453834293fcef88f115d4d8fe8ef | 2021-03-26 17:34:29 | 2021-03-26 17:34:29 | NULL | NULL |

| 2 | 八戒 | piglet@west.com | 96131de181864ba18294e01a88c39318 | 2021-03-26 17:34:48 | 2021-03-26 17:34:48 | NULL | NULL |

| 3 | 沙悟浄 | copper@west.com | fabb6c55e63a5b22b377f4ec1cfee51c | 2021-03-26 17:35:07 | 2021-03-26 17:35:07 | NULL | NULL |

+----+-----------+-----------------+----------------------------------+---------------------+---------------------+-----------------+---------+

3 rows in set (0.00 sec)

Ruby – ランダム文字列

2021-03-26 / tau / コメントする

概要

予め指定した文字群を使って、任意の長さのランダム文字列を作る。

＜手順＞

文字群を文字列として準備
→chars = "ABCDE"
配列を準備
→array = Array.new(10)
ランダム文字列を生成
→(array.map! {|e| chars[rand(chars.length)]}).join

考え方

ランダム文字列に使う文字群を文字列として準備する。

chars = "ABCDE"

ランダム文字列長と同じ要素数の配列を準備する。

array = Array.new(10)

array = Array.new(10)
p array

# [nil, nil, nil, nil, nil, nil, nil, nil, nil, nil]

array = Array.new(10)

p array

# [nil, nil, nil, nil, nil, nil, nil, nil, nil, nil]

配列をランダムに選んだ文字で埋める。

array.map! {|e| chars[rand(chars.length)]}

array.map! {|e| chars[rand(chars.length)]}
p array

# ["B", "B", "D", "A", "C", "B", "E", "E", "E", "D"]

array.map! {|e| chars[rand(chars.length)]}

p array

# ["B", "B", "D", "A", "C", "B", "E", "E", "E", "D"]

配列を文字列に変換する。

p array.join

p array.join

# "BBDACBEEED"

p array.join

# "BBDACBEEED"

実装例

数字と英大文字・小文字を使って20文字のランダム文字列を生成。

chars = ("0".."9").to_a.join + ("A".."Z").to_a.join + ("a".."z").to_a.join
array = Array.new(20)
str = (array.map! {|e| chars[rand(chars.length)]}).join
p str

# "3JRIjPZPOcsHRLotcAye"

chars = ("0".."9").to_a.join + ("A".."Z").to_a.join + ("a".."z").to_a.join

array = Array.new(20)

str = (array.map! {|e| chars[rand(chars.length)]}).join

p str

# "3JRIjPZPOcsHRLotcAye"

Ruby – 文字列・配列・範囲オブジェクトの相互変換

2021-03-26 / tau / 1件のコメント

概要

1文字単位を対象として、文字列・配列・範囲オブジェクトの相互変換を整理する。

配列→文字列

array.join

array = ["A", "B", "C", "D", "E", "F", "G"]
p array.join()

# "ABCDEFG"

array = ["A", "B", "C", "D", "E", "F", "G"]

p array.join()

# "ABCDEFG"

文字列→配列

string.chars
string.split("")

string = "ABCDEFG"
p string.chars
p string.split("")

# ["A", "B", "C", "D", "E", "F", "G"]
# ["A", "B", "C", "D", "E", "F", "G"]

string = "ABCDEFG"

p string.chars

p string.split("")

# ["A", "B", "C", "D", "E", "F", "G"]

範囲オブジェクト

配列への変換

range.to_a

range = ("A".."G")
p range.to_a

# ["A", "B", "C", "D", "E", "F", "G"]

range = ("A".."G")

p range.to_a

# ["A", "B", "C", "D", "E", "F", "G"]

文字列への変換

range.to_a.join

range = ("A".."G")
p range.to_a.join

# "ABCDEFG"

range = ("A".."G")

p range.to_a.join

# "ABCDEFG"

Rails – 掲示板 – 仮のプロフィールページ

2021-03-25 / tau / コメントする

概要

第1段階でユーザーの登録(サインアップ)や認証(サインイン／サインアウト)ができるようになった。これからはサインインしたユーザーに応じた表示や操作を実装していく。

最初に、サインインしているユーザーのプロフィール画像表示を実装する。

ここでは、サインイン中のユーザーがメニューの「プロフィール」をクリックしたときにプロフィールページへ遷移させる。現段階では、サインイン中のユーザー名を表示し、ダミー画像とプレースホルダーのコメントを表示させる。

掲示板の第2段階へ

枠組み

全体の枠組み

全体の枠組み設定は以下のとおりとする。

プロフィールページのURLは"ドメイン/profile/ユーザーID"
アクションはusers#show(個々のユーザーの情報を表示するためshowを選択)
ビューファイルはapp/views/users/show.html.erb

ユーザーに応じた反応

基本の流れは以下の通り。

ルーティングのURIパターンでユーザーIDを付加
遷移ページのリンク先として、ルーティングの名前でサインイン中のユーザーIDを指定
コントローラーでIDを使ってデータベースからユーザーオブジェクトを取り出す
ビューにおいて、そのユーザーオブジェクトを使う

実装

ルーティング

まず、プロフィールページへのURLがリクエストされたときのルーティングを設定する。

routes.rb

Rails.application.routes.draw do

  .....

  get '/profile/(:id)', to: 'users#show', as: :profile
end

Rails.application.routes.draw do

.....

get '/profile/(:id)', to: 'users#show', as: :profile

end

この書き方がユーザーに応じたページへのルーティングの書き方。

ユーザーを指定するため、データベース中のusers.idの値をURLで指定
- (:id)の括弧がなくても問題なさそう
プロフィールは各ユーザー固有の情報を表示するため、showアクション
Prefixを指定する
- :idを付加した場合、デフォルトのPrefixは設定されないため

指定されたユーザーの取得

ルーティング先のアクションで、:idを使ってデータベースからユーザーオブジェクトを取り出す。オブジェクトがビューでも使えるよう、インスタンス変数に格納する。

また、サインインしていない状態でshowアクションを読んだ場合にアクセス制限をかけるよう、before_actionを設定する。ただしサインアップ／サインインに関するアクションはexcept:で除外しておく。

users_controller.rb

class UsersController < ApplicationController
  before_action :authorize, except: [:sign_up, :sign_in, :sign_up_process, :sign_in_process]

  .....

  def show
    @user = User.find(params[:id])
  end

  .....

end

class UsersController < ApplicationController

before_action :authorize, except: [:sign_up, :sign_in, :sign_up_process, :sign_in_process]

.....

def show

@user = User.find(params[:id])

end

.....

end

findはモデルのクラスメソッドで、モデルのIDを指定してデータベースからデータを取得する。引数に指定できるのはIDの値のみ。

ユーザーオブジェクトを使った表示

アクションでセットされたユーザーオブジェクトを使って、ユーザーに応じたページ表示をするためのHTMLを書く。

users/show.html.erb

<div class="user_profile">
  <h1><%= @user.name %>さんのプロフィール</h1>
  <div class="contents">
    <%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>
    <p class="comment">
      ここにプロフィールコメントを表示
      ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
      ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
    </p>
  </div>
</div>

<h1><%= @user.name %>さんのプロフィール</h1>

<%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>

ここにプロフィールコメントを表示

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

</p>

</div>

ここでは@userのnameを使ってサインイン中のユーザーの名前を表示させている。画像やコメントはダミーだが、サインイン中のユーザーに応じたページが表示されることが確認できる。

なお4行目で、プロフィール画像のプレースホルダーとしてCDNによるダミー画像を利用している。

サインインユーザーによるページの呼び出し

サインイン中のユーザーがメニューの「プロフィール」をクリックしたときに、そのユーザーのプロフィールが表示されるよう、link_toヘルパーを設定する。

application.html.erb

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <div class="header_logo"></div>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", profile_path(user_in_session)) %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

ルーティングで設定したPrefixを使ったパス名に(ユーザーID)を指定している。

link_to("...", profile_path(user_in_session))

(user_in_session)とユーザーオブジェクトそのものを指定しているが、これはRailsでの省略法で、これで(user_in_session.id)と同じことになる。

パス名ではなく、URIを文字列で指定する方法もある。その場合はルーティングで指定した"/profile/(:id)"の形になるように文字列で指定する。ただしlink_toだと<%= ... %>が入れ子にできないためかエラーになるので、aタグを使うことになる。

<a href="/profile/<%= user_in_session.id %>">プロフィール</a>

スタイル設定

プロフィールページのスタイルを設定する。

users.scss

.....

// プロフィールページのスタイル
.user_profile {
  h1 {
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    display: flex;
    margin: 0 auto;
    width: 600px;
    .comment {
      align-self: center;
      margin-left: 20px;
      padding: 10px;
      background-color: #f8f8f8;
    }
  }
}

.....

// プロフィールページのスタイル

.user_profile {

h1 {

margin: 40px auto;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

display: flex;

margin: 0 auto;

width: 600px;

.comment {

align-self: center;

margin-left: 20px;

padding: 10px;

background-color: #f8f8f8;

}

トップページへのリンク

プロフィール画面からトップページに戻るリンクをヘッダーメニューに設定する。application.html.erbに更に変更を加える。

application.html.erb

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <%= link_to(top_path) do %>
        <div class="header_logo"></div>
      <% end %>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <li><%= link_to("トップ", top_path) %></li>
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", profile_path(user_in_session)) %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

<%= link_to(top_path) do %>

<% end %>

</ul>

</header>

<%= yield %>

</body>

</html>

8～10行目は、ヘッダーのロゴにトップページへのリンクをセットしている。他の要素にリンクを設定するには、link_to(...) doとendのブロックにする。

14行目では、メニューに「トップ」という項目を追加し、トップページへのリンクを設定している。

表示結果

追補～サイズの固定とスクロール表示

その後、コメント表示を以下の様に変更した。

p要素の幅と高さを固定
overflow-y: autoを追加し、コメントが長くなった場合にスクロールバーを表示

// プロフィールページのスタイル
.user_profile {
  h1 {
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    display: flex;
    margin: 0 auto;
    width: 600px;
    .comment {
      align-self: center;
      margin-left: 20px;
      padding: 10px;
      width: 300px;
      height: 100px;
      overflow-y: auto;
      background-color: #f8f8f8;
    }
  }
}

// プロフィールページのスタイル

.user_profile {

h1 {

margin: 40px auto;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

display: flex;

margin: 0 auto;

width: 600px;

.comment {

align-self: center;

margin-left: 20px;

padding: 10px;

width: 300px;

height: 100px;

overflow-y: auto;

background-color: #f8f8f8;

}

Rails – 掲示板 – 第2段階

2021-03-25 / tau / コメントする

概要

第1段階でユーザーの取り扱い全般を実装したが、第2段階ではコンテンツの投稿に関する機能を実装していく。

ここでは以下を含む。

プロフィールや新規投稿などユーザーに応じたページの表示と操作
CDNによるアイコンの導入
データベースへのカラムの追加
リレーションを持ったテーブル構造の操作
画像のアップロードなどを含む。

掲示板の全体ページへ

要件

画面遷移

サインイン中の画面遷移を対象とする。

/top画面で
- ユーザーの投稿記事(名前、コメント、画面、日付)を表示(上限数付き)
- メニューの「プロフィール」からユーザーごとの/profile画面へ
- メニューの「ユーザー設定」からユーザーごとの/edit画面へ
- メニューの「投稿する」から/post画面へ
/profile画面で
- ユーザーの名前、画像、コメントを表示
- コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
- ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ
/edit画面で
- プロフィール画像、プロフィールコメントを選択・編集
- ボタンを押してプロフィールの内容を変更し、/profile画面へ遷移
/post画面で
- コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
- 記事投稿後、ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ

データベース

テーブル

登録ユーザーテーブル：users

userテーブルは、プロフィールに表示する以下の項目について新たにカラムに追加。

プロフィール画像のファイル名
コメントテキスト

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
name	VARCHAR(255)	string	ユーザー名
email	VARCHAR(255)	string	メールアドレス
pasword	VARCHAR(255)	string	パスワード
image_file_name	VARCHAR(255)	string	プロフィール画像ファイル名
comment	TEXT	text	プロフィールコメント
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿記事テーブル：posts

postsテーブルは、Railsが設定する項目以外に以下の項目を持つ。

投稿ユーザーのid(users.idを参照)
投稿記事のメッセージを保存する。なお画像のみの投稿も認めるため、commentはNULLを許容する。

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
user_id	BIGINT	references	usersテーブルのid
message	TEXT	text	メッセージ本文
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿画像テーブル：post_images

post_imagesテーブルは、Railsが設定する項目以外に以下の項目を持つ。

投稿記事のid(posts.idを参照)
画像ファイルのファイル名

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
post_id	BIGINT	references	postsテーブルのid
file_name	VARCHAR(255)	string	画像ファイル名
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

リレーション

テーブル間の関係は以下のとおり。

userは0以上複数のpostを持つ
postは必ず1つのuserに属する
postは0以上複数のpost_imageを持つ
post_imagesは必ず1つのpostに属する

検討

コントローラーとアクション

/profile/:id -> users#show

ユーザーごとのプロフィールを表示する
プロフィールの内容はプロフィール画像とコメント

users#edit, users#update

ユーザーごとのプロフィールを編集する
編集内容は、画像の登録／差し替え、コメントの記入／変更

posts_controller.rb

投稿記事を取り扱うコントローラー
投稿記事の新規登録、編集、削除
投稿記事は1つのメッセージと0～複数の画像からなる
メッセージがあれば画像はなくてもよく、画像があればメッセージは空でもよい

ビュー

users

users/profile.html.erb：ユーザーのプロフィールページ
users/edit.html.erb：ユーザー設定ページ
posts/new.html.erb：新規投稿ページ
posts/edit.html.erb：投稿内容編集ページ

スタイルファイル

プロフィールページやユーザー設定ページのスタイル定義を追加。

users.css

投稿関係ページのスタイルは以下のファイルに新規に作成

posts.css

実装手順

プロフィール

記事投稿

Rails – 掲示板 – トップ画面の仮表示

2021-03-25 / tau / コメントする

概要

サインアップ(ユーザー登録)、サインイン・サインアウト(ユーザー認証)、アクセス制御まで実現できたので、トップページを表示したときに登録済みユーザーの情報を表示させるように仮組みする。

掲示板の第1段階へ

コントローラー

pagesコントローラーのtopアクションで、usersテーブルに登録された全ユーザーをオブジェクトとして取り出し、その名前とメールアドレスを一覧として表示させる。

class PagesController < ApplicationController
  before_action :authorize

  def top
    @users = User.all.order("id desc")
  end
end

class PagesController < ApplicationController

before_action :authorize

def top

@users = User.all.order("id desc")

end

処理概要は以下のとおり。

allメソッド：モデルのクラスメソッドで、テーブルの全データをモデルインスタンスの配列として取り出す
orderメソッド：SQLのORDER BY句を適用する
- 引数は1つの文字列として与え、スペースで区切る
- 1つ目は並べ替えの基準とするカラム
- 2つ目は並べ替えの順序(asc：昇順・デフォルト、desc：降順)
取り出した結果は、ビューで利用可能なようにインスタンス変数に格納する

ビュー

コントローラーで得られた@usersの要素を取り出し、テーブルとして出力。

<div class="top_page">
  <h2>登録ユーザー一覧</h2>

  <div class="user_list">
    <table>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.name %></td>
          <td><%= user.email %></td>
        </tr>
      <% end %>
    </table>
  </div>
</main>

<h2>登録ユーザー一覧</h2>

<table>

<% @users.each do |user| %>

<tr>

</tr>

<% end %>

</table>

</div>

</main>

表示結果

Rails- 掲示板 – アクセス制御

2021-03-24 / tau / コメントする

概要

セッション機能を使って、悪性制御を行う。

サインインしていない状態で登録ユーザー用のページ(今回はトップページ)にアクセスした場合、これを表示せずにサインインページにリダイレクトする。

また、サインイン状態でルートにアクセスした場合はトップページを表示する。

掲示板の第1段階へ

セッション中確認機能の追加

以下のメソッドをUserHelpaerモジュールに追加する。

user_in_session?: アクセスしたユーザーがサインイン中かどうか(そのユーザーのセッションが存在するか)判定するメソッド。
authorize: ユーザーがサインイン状態でなければサインインページにリダイレクトするメソッド。コントローラーのフィルターでコールバックとして登録するのに用いる。

module UsersHelper

  .....

  def user_in_session?
    user_in_session.present?
  end

  .....

  def authorize
    redirect_to :sign_in unless user_in_session?
  end
end

module UsersHelper

.....

def user_in_session?

user_in_session.present?

end

.....

def authorize

redirect_to :sign_in unless user_in_session?

end

アクション実行前の認証

UserHelperで定義したauthorizeメソッドを、トップページを含むpageコントローラーのフィルターで設定する。

class PagesController < ApplicationController
  before_action :authorize

  def top
  end
end

class PagesController < ApplicationController

before_action :authorize

def top

end

ここではpageコントローラーのフィルターとして設定し、コントローラーにはtopアクションが含まれている。

アクセスしたユーザーがサインイン状態であればtopビューがレンダリングされ、サインインしていなければauthorizeの内容に従ってsign_inページに遷移する。

たとえばアクションによって振り分けたい場合はフィルターのonlyやexceptで対象となるアクションを制御する。