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で対象となるアクションを制御する。

Rails – 掲示板 – セッション機能

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

概要

ユーザー認証によってサインインしたユーザーの情報を保持し、サインアウト時にそれを破棄する。

サイトのルートはトップページ
- サインインしていなければサインインページへリダイレクト
- サインイン中のユーザーの名前表示
- メニューからサインアウト可能
サインインページ
- サインイン成功後にトップページに遷移
サインアップページ
- サインアップ成功後にトップページに遷移

掲示板の第1段階へ

ヘルパーの追加

ヘルパーモジュールのインクルード

以降、ユーザーセッションの管理に関するメソッドをUserHelperモジュールに書いていく。

プロジェクト内でそれらを共有するため、applicationコントローラーでモジュールをインクルードする。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  # ユーザーセッションの管理に関するメソッドモジュールをインクルード
  include UsersHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

# ユーザーセッションの管理に関するメソッドモジュールをインクルード

include UsersHelper

end

ヘルパーモジュールのメソッド定義

ユーザーのサインイン／サインアウト処理、サインイン中のユーザーを取得するメソッドを、UserHelperモジュールに書く。

セッション中のユーザーをインスタンス変数に保持する。

app/helpers/user_helper.rb

module UsersHelper
  # ユーザーIDをセットしてセッション開始(サインイン)
  def user_session_start(user)
    session[:user_id] = user.id
  end

  # セッション中のユーザーインスタンスを取得
  def user_in_session
    # 初めて取得する場合、インスタンス変数に保存
    if @user_in_session.nil?
      @user_in_session = User.find_by(id: session[:user_id])
    # 既に取得済みなら、インスタンス変数で返す
    else
      @user_in_session
    end
  end

  # セッション終了(サインアウト)
  def user_session_end
    session.delete(:user_id)
    @user_in_session = nil
  end
end

module UsersHelper

# ユーザーIDをセットしてセッション開始(サインイン)

def user_session_start(user)

session[:user_id] = user.id

end

# セッション中のユーザーインスタンスを取得

def user_in_session

# 初めて取得する場合、インスタンス変数に保存

if @user_in_session.nil?

@user_in_session = User.find_by(id: session[:user_id])

# 既に取得済みなら、インスタンス変数で返す

else

@user_in_session

end

# セッション終了(サインアウト)

def user_session_end

session.delete(:user_id)

@user_in_session = nil

end

サインイン・サインアウト処理

サインイン処理

サインインに成功した場合、セッションを開始してユーザIDを登録する。

app/controllers/users_controller.rb

class UsersController < ApplicationController

  .....

  def sign_in_process
    # フォームに値を残すため、入力内容をセットしたモデルインスタンス使う
    @user = User.new(user_params)
    # パスワードをサインアップ時と同じ方法で暗号化
    encrypted_password = User.generate_digest(user_params[:password])
    # アドレスとパスワードが一致する最初のユーザーを取得
    user = User.find_by(email: user_params[:email], password: encrypted_password)
    # サインイン成功の場合、トップページに遷移
    if user
      user_session_start(user)
      redirect_to top_path and return
    # サインイン失敗の場合、サインインページに戻る
    else
      flash.now[:danger] = "サインインできません"
      render :sign_in, layout: 'application_signed_out' and return
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_in_process

# フォームに値を残すため、入力内容をセットしたモデルインスタンス使う

@user = User.new(user_params)

# パスワードをサインアップ時と同じ方法で暗号化

encrypted_password = User.generate_digest(user_params[:password])

# アドレスとパスワードが一致する最初のユーザーを取得

user = User.find_by(email: user_params[:email], password: encrypted_password)

# サインイン成功の場合、トップページに遷移

if user

user_session_start(user)

redirect_to top_path and return

# サインイン失敗の場合、サインインページに戻る

else

flash.now[:danger] = "サインインできません"

render :sign_in, layout: 'application_signed_out' and return

end

.....

end

サインアップ後の処理

サインアップが成功した場合も、サインイン状態と同様にセッション登録してトップページに遷移する。

class UsersController < ApplicationController

  .....

  def sign_up_process
    # フォームに値を残すため@userを使う
    @user = User.new(user_params)
    # 適正にユーザー登録した場合、セッションを開始しトップページに遷移
    if @user.save
      user_session_start(@user)
      flash.now[:success] = "ユーザー登録しました"
      redirect_to top_path and return
    # 不適正な入力の場合、エラーを表示してサインアップページに戻る
    else
      flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")
      render :sign_up, layout: 'application_signed_out' and return
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_up_process

# フォームに値を残すため@userを使う

@user = User.new(user_params)

# 適正にユーザー登録した場合、セッションを開始しトップページに遷移

if @user.save

user_session_start(@user)

flash.now[:success] = "ユーザー登録しました"

redirect_to top_path and return

# 不適正な入力の場合、エラーを表示してサインアップページに戻る

else

flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")

render :sign_up, layout: 'application_signed_out' and return

end

.....

end

サインアウト処理の追加

サインイン中のユーザーがサインアウトを要求した時のアクションを、usersコントローラーに定義する。

サインアウトにあたってセッションを停止し、サインインページに遷移する。

class UsersController < ApplicationController

  .....

  def sign_out
    user_session_end
    redirect_to :sign_in and return
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_out

user_session_end

redirect_to :sign_in and return

end

.....

end

ルーティングの設定

サインアウトのルーティングを追加する。

Rails.application.routes.draw do
  get '/top', to: 'pages#top'

  get '/sign_up', to: 'users#sign_up'
  get '/sign_in', to: 'users#sign_in'
  get '/sign_out', to: 'users#sign_out'

  post 'sign_up', to: 'users#sign_up_process', as: :sign_up_process
  post 'sign_in', to: 'users#sign_in_process', as: :sign_in_process
end

Rails.application.routes.draw do

get '/top', to: 'pages#top'

get '/sign_up', to: 'users#sign_up'

get '/sign_in', to: 'users#sign_in'

get '/sign_out', to: 'users#sign_out'

post 'sign_up', to: 'users#sign_up_process', as: :sign_up_process

post 'sign_in', to: 'users#sign_in_process', as: :sign_in_process

end

ビューの修正・サインアウト

ヘッダー部にサインイン中のユーザー名を表示する。

また、ヘッダーメニューのサインアウトのリンク先をsign_outアクションとする。

<!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("プロフィール", "#") %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

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

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

Rails – フィルター

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

概要

フィルターは、コントローラーのアクションが実行される前や後などに登録した関数が実行されるよう設定する。

特定のアクションのときだけ実行したり、指定したアクション以外のときに実行させるよう指定できる。

フィルターの種類

before_action

before_action :コールバック

アクションの実行前に、指定したコールバックを実行するよう設定する。

after_action

after_action :コールバック

アクションの実行後に、指定したコールバックを実行するよう設定する。

around_action

around_action :コールバック

アクションの実行中に、指定したコールバックを実行するよう設定する。

コールバック中にアクションの実行をyieldするような場合に使うらしい。

only/except

コールバックを実行するアクションを限定したり(only)、除外したり(except)する。

before_action :コールバック, only: [...], except: [...]

only/exceptの指定は、コールバックのシンボルをカンマで区切って並べる。

[:コールバック1, :コールバック2, ...]