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;

}

Tips – CDN – アイコン・ダミー画像など

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

アイコン

Font Awesome

概要

Font Awesomeのアイコンを利用するための手順。

メールアドレスでアカウントを取得する
アイコンを利用するためのキット番号を取得
- アカウント取得後は”Manage Kitのリンク先で確認できる
アイコンを使うページのheadセクションに、Font AwesomeのJSを読み込むスクリプトを書く
Font Awesomeのページで使いたいアイコンのタグ表現をコピーする
アイコンを利用する場所にコピーしたタグを張り付ける
必要なら、タグのスタイルを設定するクラスやマウスオーバー時のタイトルなどを指定する

JSの記述

まずhead部に以下のスクリプトを記述する。

<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

1	<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

タグの記述

アイコンを表示する場所にアイコンを表示するタグを記述。Font Awesomeのサイトでコピーできる。

<i class="fas fa-sign-out-alt"></i>

1	<i class="fas fa-sign-out-alt"></i>

スタイル設定

サイズや色などのスタイルをクラスで設定する場合、Font Awesome自体がclassで設定されているので以下の様になる。

HTML

<i class="fa fa-sign-out-alt header_icon"></i>

1	<i class="fa fa-sign-out-alt header_icon"></i>

CSS

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

.header_icon {

font-size: 30px;

color: #0af;

}

タイトル設定

マウスオーバーで文字列を表示させる場合、以下の様にtitle属性を追加する。

<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

1	<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

ダミー画像

Dynamic Dummy Image Generatorは自由なサイズと色の画像ファイルをリアルタイムで取り込める。

サイトで画像のサイズ、背景色、前景色、ファイルタイプを指定すると、それを織り込んだURLが表示される
そのURLをimgタグで指定すると、ページレンダリング時に必要なファイルがダウンロードされて表示される

以下は指定の例で、サイトに表示されたURLをそのままコピー&ペーストしたもの。

<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

1	<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

また、表示させるテキストも自由に設定できる。

<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

1	<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

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>