Rails – 掲示板 – 新規投稿機能

2021-04-02 / tau / コメントする

概要

新規投稿ページの枠組みをつくったので、これに投稿機能を実装する。

掲示板の第2段階へ

準備

投稿画像ディレクトリー

投稿画像ファイル保存用のディレクトリーを作成する。

public/post_images

ビュー

新規投稿のnewビューは再掲。

<div class="new_post">
  <h1>新規記事投稿</h1>
  <div class="contents">
    <%= form_with(model: @post, url: '/posts', local: true) do |f| %>
      <h2>メッセージ入力</h2>
      <div class="field">
        <%= f.text_area(:message, class: "message") %>
      </div>
      <h2>画像アップロード</h2>
      <div class="field">
        <%= f.file_field(:upload_file) %>
      </div>
      <button>登録する</button>
    <% end %>
  </div>
</div>

<h1>新規記事投稿</h1>

<%= form_with(model: @post, url: '/posts', local: true) do |f| %>

<h2>メッセージ入力</h2>

<%= f.text_area(:message, class: "message") %>

</div>

<h2>画像アップロード</h2>

<%= f.file_field(:upload_file) %>

</div>

<% end %>

</div>

コントローラー

post_paramsヘルパー

ビューのフォームからパラメーターを受け取る際のヘルパーで、コントローラーで扱うパラメーターを許可している。

:upload_fileは直接保存しないので含めていない。

class PostsController < ApplicationController

  .....

  def post_params
    params.require(:post).permit(:message)
  end
end

class PostsController < ApplicationController

.....

def post_params

params.require(:post).permit(:message)

end

createアクション

フォーム入力を受けて投稿記事を生成・保存する本体。ファイルのアップロードについてはこちらを参照。

記事を投稿したユーザーをデータベースから拾っている(L7)
メッセージか画像かどちらかがあれば投稿できる(L10-13)

app/controllers/posts_controllers.rb

class PostsController < ApplicationController

  .....

  def create
    # 記事を投稿したユーザーをDBから取得
    @user = User.find(user_in_session.id)
    # フォーム入力されたアップロードファイルを取得
    upload_file = params[:post][:upload_file]
    # メッセージと画像ファイルの両方がないとエラー
    if post_params[:message].blank? && upload_file.nil?
      flash[:danger] = "メッセージか画像か少なくともどちらかを入れてください"
      redirect_to new_post_path and return
    end

    # Postオブジェクトを生成
    @post = Post.new(post_params.merge(user_id: @user.id))

    # 画像ファイルが選択された場合
    if upload_file
      # アップロードファイルのファイルタイプが妥当かどうか検証
      case upload_file.content_type
      when "image/jpeg"
        extention = ".jpg"
      when "image/png"
        extention = ".png"
      else
        flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"
        render new_post_path and return
      end

      # 保存する画像ファイル名をランダム文字列に
      upload_file_name = random_string(20) + extention
      # 投稿画像を保存するディレクトリー
      upload_dir = Rails.root.join("public", "post_images")
      # アップロードする投稿画像ファイルのフルパス
      upload_file_path = upload_dir + upload_file_name
      # アップロードファイルの書き込み
      File.binwrite(upload_file_path, upload_file.read)

      # 生成済みのPostオブジェクトに従属させてPostImageオブジェクトを生成
      if !@post.post_images.build(post_id: @post.id, file_name: upload_file_name)
        flash[:danger] = "投稿画像が保存できませんでした"
        redirect_to new_post_path and return
      end
    end

    # エラーがなければPostオブジェクトをデータベースに保存
    if @post.save
      redirect_to top_path and return
    else
      flash.now[:danger] = "投稿メッセージが保存できませんでした"
      redirect_to new_post_path and return
    end
  end

  .....

end

class PostsController < ApplicationController

.....

def create

# 記事を投稿したユーザーをDBから取得

@user = User.find(user_in_session.id)

# フォーム入力されたアップロードファイルを取得

upload_file = params[:post][:upload_file]

# メッセージと画像ファイルの両方がないとエラー

if post_params[:message].blank? && upload_file.nil?

flash[:danger] = "メッセージか画像か少なくともどちらかを入れてください"

redirect_to new_post_path and return

end

# Postオブジェクトを生成

@post = Post.new(post_params.merge(user_id: @user.id))

# 画像ファイルが選択された場合

if upload_file

# アップロードファイルのファイルタイプが妥当かどうか検証

case upload_file.content_type

when "image/jpeg"

extention = ".jpg"

when "image/png"

extention = ".png"

else

flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"

render new_post_path and return

end

# 保存する画像ファイル名をランダム文字列に

upload_file_name = random_string(20) + extention

# 投稿画像を保存するディレクトリー

upload_dir = Rails.root.join("public", "post_images")

# アップロードする投稿画像ファイルのフルパス

upload_file_path = upload_dir + upload_file_name

# アップロードファイルの書き込み

File.binwrite(upload_file_path, upload_file.read)

# 生成済みのPostオブジェクトに従属させてPostImageオブジェクトを生成

if !@post.post_images.build(post_id: @post.id, file_name: upload_file_name)

flash[:danger] = "投稿画像が保存できませんでした"

redirect_to new_post_path and return

end

# エラーがなければPostオブジェクトをデータベースに保存

if @post.save

redirect_to top_path and return

else

flash.now[:danger] = "投稿メッセージが保存できませんでした"

redirect_to new_post_path and return

end

.....

end

メッセージと画像、メッセージのみ、画像のみの投稿後のデータベースの例は以下のとおり。

mysql> SELECT id, user_id, message FROM posts;
+----+---------+-------------------------------------------+
| id | user_id | message                                   |
+----+---------+-------------------------------------------+
|  1 |       1 | こんにちは                                |
|  2 |       2 | よろしく。
メッセージだけ。              |
|  3 |       3 |                                           |
+----+---------+-------------------------------------------+
3 rows in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;
+----+---------+--------------------------+
| id | post_id | file_name                |
+----+---------+--------------------------+
|  1 |       1 | Z579R0dXcpxF6BZqqmN8.jpg |
|  2 |       3 | qFpkBIPhopF5JBhLluoY.jpg |
+----+---------+--------------------------+
2 rows in set (0.00 sec)

mysql> SELECT id, user_id, message FROM posts;

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

| id | user_id | message |

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

| 1 | 1 | こんにちは |

| 2 | 2 | よろしく。

メッセージだけ。 |

| 3 | 3 | |

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

3 rows in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;

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

| id | post_id | file_name |

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

| 1 | 1 | Z579R0dXcpxF6BZqqmN8.jpg |

| 2 | 3 | qFpkBIPhopF5JBhLluoY.jpg |

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

2 rows in set (0.00 sec)

Rails – バリデーターのカスタマイズ

2021-04-01 / tau / コメントする

概要

モデルの検証を行うバリデーターを自作するのにいくつかの方法がある。

バリデーションメソッドをモデルで定義
ActiveModel::Validatorのサブクラスを定義
ActiveModel::EachValidatorのサブクラスを定義

バリデーションメソッド

検証したいモデルの中でカスタムメソッドを定義し、validate(単数形)でメソッドを呼び出す。

以下のコードは、:name属性と:email属性を持つUserモデルをカスタムメソッドにより検証する例。

class User < ApplicationRecord
  validate :name_or_email_presents

  def name_or_email_presents
    message = "Either name or email must present"
    errors.add(:name, message) unless name.present? || email.present?
  end
end

class User < ApplicationRecord

validate :name_or_email_presents

def name_or_email_presents

message = "Either name or email must present"

errors.add(:name, message) unless name.present? || email.present?

end

カスタムメソッドname_or_email_presentsを定義
メソッドでは、:nameと:emailの両方とも空の場合にエラーを追加
モデルでvalidateによってメソッドをコールバックとして追加(validateは単数形)

ActiveModel::Validator

ActiveModel::EachValidator

Rails – 掲示板 – 新規投稿ページ

2021-04-01 / tau / コメントする

概要

サインインユーザーによる新規記事投稿のページを実装していく。

サインインユーザーがメニューアイコンをクリックして新規投稿ページへ
- 新規投稿ページでは、メッセージを入力、画像ファイルを指定
- サインインしていないユーザーに対してはアクセス制限
ここではresourcesによるRails標準のルーティングを使う
コントローラーはPostsController.rb

掲示板の第2段階へ

ルーティング

コントローラーに対応したpostsについてresourcesでルーティングを設定する。

config/routes.rb

Rails.application.routes.draw do

  .....

  resources :posts
end

Rails.application.routes.draw do

.....

resources :posts

end

resourcesにより設定されたルーティングは以下のとおり。

rails routes

[vagrant@vagrant ex_bbs]$ rails routes
         Prefix Verb   URI Pattern               Controller#Action
           root GET    /                         pages#top
            top GET    /top(.:format)            pages#top
        sign_up GET    /sign_up(.:format)        users#sign_up
        sign_in GET    /sign_in(.:format)        users#sign_in
       sign_out GET    /sign_out(.:format)       users#sign_out
sign_up_process POST   /sign_up(.:format)        users#sign_up_process
sign_in_process POST   /sign_in(.:format)        users#sign_in_process
        profile GET    /profile/:id(.:format)    users#show
      edit_user GET    /users/:id/edit(.:format) users#edit
    update_user PATCH  /users/:id/edit(.:format) users#update
          posts GET    /posts(.:format)          posts#index
                POST   /posts(.:format)          posts#create
       new_post GET    /posts/new(.:format)      posts#new
      edit_post GET    /posts/:id/edit(.:format) posts#edit
           post GET    /posts/:id(.:format)      posts#show
                PATCH  /posts/:id(.:format)      posts#update
                PUT    /posts/:id(.:format)      posts#update
                DELETE /posts/:id(.:format)      posts#destroy

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

root GET / pages#top

top GET /top(.:format) pages#top

sign_up GET /sign_up(.:format) users#sign_up

sign_in GET /sign_in(.:format) users#sign_in

sign_out GET /sign_out(.:format) users#sign_out

sign_up_process POST /sign_up(.:format) users#sign_up_process

sign_in_process POST /sign_in(.:format) users#sign_in_process

profile GET /profile/:id(.:format) users#show

edit_user GET /users/:id/edit(.:format) users#edit

update_user PATCH /users/:id/edit(.:format) users#update

posts GET /posts(.:format) posts#index

POST /posts(.:format) posts#create

new_post GET /posts/new(.:format) posts#new

edit_post GET /posts/:id/edit(.:format) posts#edit

post GET /posts/:id(.:format) posts#show

PATCH /posts/:id(.:format) posts#update

PUT /posts/:id(.:format) posts#update

DELETE /posts/:id(.:format) posts#destroy

コントローラー

PostControllerコントローラーを生成する。アクションについては、生成後のコントローラーファイルを編集することとして、ここでは枠組みだけを生成。

rails generate controller posts

[vagrant@vagrant ex_bbs]$ rails generate controller posts
Running via Spring preloader in process 28111
      create  app/controllers/posts_controller.rb
      invoke  erb
      create    app/views/posts
      invoke  test_unit
      create    test/controllers/posts_controller_test.rb
      invoke  helper
      create    app/helpers/posts_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/posts.coffee
      invoke    scss
      create      app/assets/stylesheets/posts.scss

[vagrant@vagrant ex_bbs]$ rails generate controller posts

Running via Spring preloader in process 28111

create app/controllers/posts_controller.rb

invoke erb

create app/views/posts

invoke test_unit

create test/controllers/posts_controller_test.rb

invoke helper

create app/helpers/posts_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/posts.coffee

invoke scss

create app/assets/stylesheets/posts.scss

生成されたコントローラーファイルにアクションを追加。

new
- 他画面から遷移して投稿画面をレンダリング
- ビューで扱うモデルはPostなので、@postにUserのインスタンスをいれておく
create
- 投稿画面からのPOSTにより処理が渡され、投稿記事の新規作成処理を行う

またアクション実行前にauthorizeをコールバック登録し、アクセス制限をかけている。

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  before_action :authorize

  def new
    @user = User.new
  end

  def create
  end
end

class PostsController < ApplicationController

before_action :authorize

def new

@user = User.new

end

def create

end

ビュー

newアクションによりレンダリングされるページのコード。

メッセージ入力用のtext_areaとファイル選択用のfile_field、送信用のボタンを配置する。

views/posts/new.html.erb

<div class="new_post">
  <h1>新規記事投稿</h1>
  <div class="contents">
    <%= form_with(model: @post, url: '/posts', local: true) do |f| %>
      <h2>メッセージ入力</h2>
      <div class="field">
        <%= f.text_area(:message, class: "message") %>
      </div>
      <h2>画像アップロード</h2>
      <div class="field">
        <%= f.file_field(:upload_file) %>
      </div>
      <button>登録する</button>
    <% end %>
  </div>
</div>

<h1>新規記事投稿</h1>

<%= form_with(model: @post, url: '/posts', local: true) do |f| %>

<h2>メッセージ入力</h2>

<%= f.text_area(:message, class: "message") %>

</div>

<h2>画像アップロード</h2>

<%= f.file_field(:upload_file) %>

</div>

<% end %>

</div>

スタイル

ビューに対する最低限のスタイルを設定。

app/assests/stylesheets/posts.scss

// new.html.erb
.new_post {
  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;
  }
  .contents {
    h2 {
      margin: 30px 20px 0 10px;
      font-size: 15px;
    }
    .field {
      margin: 10px 20px 0 auto;
      width: 500px;
    }
    .message {
      background-color: red;
      width: 100%;
      height: 100px;
      background-color: #f8f8f8;
    }
    button {
      display: block;
      margin: 20px auto;
    }
  }
}

// new.html.erb

.new_post {

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;

}

.contents {

h2 {

margin: 30px 20px 0 10px;

font-size: 15px;

}

.field {

margin: 10px 20px 0 auto;

width: 500px;

}

.message {

background-color: red;

width: 100%;

height: 100px;

background-color: #f8f8f8;

}

button {

display: block;

margin: 20px auto;

}

リンク設定

サインインユーザー用ヘッダーメニューのアイコンから記事投稿ページへのリンクを設定。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  .....

  <body>
    .....
    <header>
      .....
      <!-- ヘッダーメニュ -->
      <ul class="header_menu">
        .....
        <!-- 記事投稿 -->
        <li>
          <%= link_to(new_post_path) do %>
            <i class="fas fa-arrow-circle-up icon" title="記事投稿"></i>
          <% end %>
        </li>
        .....
      </ul>
    </header>

    .....
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

.....

.....

.....

<li>

<%= link_to(new_post_path) do %>

<% end %>

</li>

.....

</ul>

</header>

.....

</body>

</html>

Rails – 掲示板 – モデルとデータベースの準備

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

概要

第2段階の仕様のうちプロフィールに続いて記事投稿の機能を実装していく。

まず、記事投稿に必要なモデルとデータベースのテーブルを準備する。

Post：投稿記事のモデル
PostImage：投稿記事に付加可能な画像ファイルのモデル

手順の詳細は「モデル生成とマイグレーション」、「アソシエーション～基本」を参照

モデルの生成

Postモデル

以下のRailsコマンドでPostモデルを生成する。Userモデルを参照するため、user:referencesを指定。

$ rails generate model post user:references message:text

1	$ rails generate model post user:references message:text

生成されたモデルの内容を確認。references指定に基づいて、Railsによりbelongs_toが記述されている。

app/models/post.rb

class Post < ApplicationRecord
  belongs_to :user
end

class Post < ApplicationRecord

belongs_to :user

end

モデルと同時に生成されるマイグレーションファイルを確認。ここでもusersテーブルを参照する外部キーが設定されている。

20210331121751_create_posts

class CreatePosts < ActiveRecord::Migration[5.1]
  def change
    create_table :posts do |t|
      t.references :user, foreign_key: true
      t.text :message

      t.timestamps
    end
  end
end

class CreatePosts < ActiveRecord::Migration[5.1]

def change

create_table :posts do |t|

t.references :user, foreign_key: true

t.text :message

t.timestamps

end

PostImageモデル

以下のRailsコマンドでPostモデルを生成する。Postモデルを参照するため、post:referencesを指定。

$ rails generate model post_image post:references file_name:string

1	$ rails generate model post_image post:references file_name:string

生成されたモデルの内容を確認。references指定に基づいて、Railsによりbelongs_toが記述されている。

models/post_image.rb

class PostImage < ApplicationRecord
  belongs_to :post
end

class PostImage < ApplicationRecord

belongs_to :post

end

モデルと同時に生成されるマイグレーションファイルを確認。ここでもpostsテーブルを参照する外部キーが設定されている。

20210331122545_create_post_images.rb

class CreatePostImages < ActiveRecord::Migration[5.1]
  def change
    create_table :post_images do |t|
      t.references :post, foreign_key: true
      t.string :file_name

      t.timestamps
    end
  end
end

class CreatePostImages < ActiveRecord::Migration[5.1]

def change

create_table :post_images do |t|

t.references :post, foreign_key: true

t.string :file_name

t.timestamps

end

アソシエーションの設定

Userは複数の記事(Post)を投稿するため、Userモデルにhas_manyを追加する。

models/User.rb

class User < ApplicationRecord
  has_many :posts

  .....

end

class User < ApplicationRecord

has_many :posts

.....

end

1つの記事(Post)が複数の画像(PostImage)を持つことができるので、Postモデルにhas_manyを設定する。post_imagesと複数形になっている点に注意。

さらに、記事投稿時に画像ファイルも削除するよう、dependentも設定。

models/post.rb

class Post < ApplicationRecord
  belongs_to :user # Railsにより記述済み
  # Postは複数のPostImageを持ち、消去時にPostImageも併せて消去
  has_many :post_images, dependent: :destroy
end

class Post < ApplicationRecord

belongs_to :user # Railsにより記述済み

# Postは複数のPostImageを持ち、消去時にPostImageも併せて消去

has_many :post_images, dependent: :destroy

end

post_image.rbはPostに従属するが、Railsによってbelongs_toが設定済みなので編集不要。

マイグレート

以上の設定に基づいてマイグレーションを実行。その結果、postsテーブルとpost_imagesテーブルが生成される。

mysql> show tables;
+------------------------------+
| Tables_in_ex_bbs_development |
+------------------------------+
| ar_internal_metadata         |
| post_images                  |
| posts                        |
| schema_migrations            |
| users                        |
+------------------------------+
5 rows in set (0.00 sec)

mysql> show tables;

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

| Tables_in_ex_bbs_development |

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

| ar_internal_metadata |

| post_images |

| posts |

| schema_migrations |

| users |

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

5 rows in set (0.00 sec)

postsテーブル、post_imagesテーブルの構造を確認。

mysql> DESCRIBE posts;
+------------+------------+------+-----+---------+----------------+
| Field      | Type       | Null | Key | Default | Extra          |
+------------+------------+------+-----+---------+----------------+
| id         | bigint(20) | NO   | PRI | NULL    | auto_increment |
| user_id    | bigint(20) | YES  | MUL | NULL    |                |
| message    | text       | YES  |     | NULL    |                |
| created_at | datetime   | NO   |     | NULL    |                |
| updated_at | datetime   | NO   |     | NULL    |                |
+------------+------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

mysql> DESCRIBE post_images;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| post_id    | bigint(20)   | YES  | MUL | NULL    |                |
| file_name  | varchar(255) | YES  |     | NULL    |                |
| created_at | datetime     | NO   |     | NULL    |                |
| updated_at | datetime     | NO   |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

mysql> DESCRIBE posts;

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

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

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

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

5 rows in set (0.00 sec)

mysql> DESCRIBE post_images;

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

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

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

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

5 rows in set (0.00 sec)

rails consoleでの確認

rails consoleでアソシエーションが機能しているか確認。

まず、Userに属するPostデータとPostに属するPostImageデータを作成。

irb(main):001:0> user = User.find(1)
irb(main):002:0> post = user.posts.create(message: "初投稿")
irb(main):003:0> post.post_images(file_name: "dummy")

irb(main):001:0> user = User.find(1)

irb(main):002:0> post = user.posts.create(message: "初投稿")

irb(main):003:0> post.post_images(file_name: "dummy")

テーブルに登録されたデータを確認。

mysql> SELECT id, user_id, message FROM posts;
+----+---------+-----------+
| id | user_id | message   |
+----+---------+-----------+
|  1 |       1 | 初投稿    |
+----+---------+-----------+
1 row in set (0.00 sec)

mysql> SELECT id, post_id, file_name  FROM post_images;
+----+---------+-----------+
| id | post_id | file_name |
+----+---------+-----------+
|  1 |       1 | dummy     |
+----+---------+-----------+
1 row in set (0.00 sec)

mysql> SELECT id, user_id, message FROM posts;

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

| id | user_id | message |

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

| 1 | 1 | 初投稿 |

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

1 row in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;

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

| id | post_id | file_name |

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

| 1 | 1 | dummy |

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

1 row in set (0.00 sec)

このあとpost.destroyにより、postデータとPostImageデータが連動して削除される。

Rails – アソシエーション – 基本

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

概要

Railsにおけるデータベースのテーブル間のアソシエーションについて、基本を整理する。

以下のようなテーブルを例にする。Railsが生成するcreated_atとupdated_atは省略している。

users、posts、imagesのレコードはそれぞれUser、Post、Imageモデルのインスタンス
PostはUserに、ImageはPostに属する
Userは0以上複数のPostを持つ
Postは0以上複数のImageを持つ

アソシエーションの意義

単純にテーブル操作する場合

普通に3つのテーブルだけがある場合に、特定idのユーザーの投稿記事を作成し、その記事が2つの画像を持たせるには以下の様になるだろう。

user = User.find(1)
post = Post.create(user_id: 1)
Image.create(post_id: post.id, file_name: "image1")
Image.create(post_id: post.id, file_name: "image2")

user = User.find(1)

post = Post.create(user_id: 1)

Image.create(post_id: post.id, file_name: "image1")

Image.create(post_id: post.id, file_name: "image2")

このときに生成されるデータは以下の様になる。

<User id: 1, name: "user1", created_at: ...>
<Post id: 1, user_id: 1, created_at: ...>
<Image id: 1, post_id: 1, file_name: "image1", created_at:...>
<Image id: 2, post_id: 1, file_name: "image2", created_at:...>

ここで投稿記事Post(id=1)をそれらに付随する2つの画像データとともに削除する。それには2つのImageを削除してから元のPostを削除する。

Image.where(post_id: post.id).each do |image|
  image.delete
end

post.delete

Image.where(post_id: post.id).each do |image|

image.delete

end

post.delete

このように個別のテーブルを操作する場合、データの生成・登録や削除の際に、

関連するテーブルのデータのidを常に意識し
データ間の関連を念頭に置きながら個々のデータを操作する

必要がある。

アソシエーション導入後

テーブル間のアソシエーションを導入した場合、関連付けられたデータの操作が直感的に、またシンプルになる。

データの生成

データの生成は以下のとおりで、親となるデータのidを意識しなくても、具体の親オブジェクトを指定して生成すれば関連付けられたデータが生成される。

user = User.find(1)
user.posts.create
post = user.posts.create
post.images.create(file_name: "image1")
post.images.create(file_name: "image2")

user = User.find(1)

user.posts.create

post = user.posts.create

post.images.create(file_name: "image1")

post.images.create(file_name: "image2")

上の例では、まずpostsをcreateした後に、そのインスタンスに従属するようにimagesをcreateしている。

このようなデータベースへの書き込みを、さらにまとめることができる。

user = User.find(1)
post = user.posts.build
post.images.build(file_name: "image1")
post.images.build(file_name: "image2")

post.save

user = User.find(1)

post = user.posts.build

post.images.build(file_name: "image1")

post.images.build(file_name: "image2")

post.save

最後にsaveするまではデータベースには保存されずidもnilのままだが、オブジェクト間の関係は保たれている。最後に保存するときに、postと2つのImagesのインスタンスが同時に保存される。

データの取得

データの取得は、親モデル.子モデルのコレクションで取得し、親モデルは単数形、子モデルは複数形。

# 1つだけ取り出す
user.posts[0]
# 全て取り出す
user.posts.each do |post|
  # 1つだけ取り出す
  post.images[0]
  # 全部取り出す
  post.images.each do |image|
    # imageに関する処理
  end
end

# 1つだけ取り出す

user.posts[0]

# 全て取り出す

user.posts.each do |post|

# 1つだけ取り出す

post.images[0]

# 全部取り出す

post.images.each do |image|

# imageに関する処理

end

データの削除

そして投稿記事を画像ごと削除する場合には、以下の様にたった1行で済む

post.destroy

1	post.destroy

さらに、外部キー制約をかけているので、以下のように親のデータだけを削除しようとするとエラーとなる。

post.delete # ActiveRecord::StatementInvalid (Mysql2::Error: Cannot delete or update a parent row: a foreign key constraint fails ...)

1	post.delete # ActiveRecord::StatementInvalid (Mysql2::Error: Cannot delete or update a parent row: a foreign key constraint fails ...)

アソシエーション設定の流れ

仕様

冒頭の3つのテーブルのうち、PostとImageの2つを取り出して考える。以下の様に若干変更。

Postはcomment要素を持つ
Image→PostImageに変更
Userとの関係は考えない

2つのモデルの関係は以下のとおりとする。

PostImageはPostに属する
Postは0以上複数のPostImageを持つ
Postの削除に伴って、これに属するPostImageのデータも削除される

モデルの生成～外部キー指定

以下のコマンドで2つのモデルを生成する。

$ rails generate model post comment:text
$ rails generate model post_image post:references file_name:string

1 2	$ rails generate model post comment:text $ rails generate model post_image post:references file_name:string

PostImageがPostに従属するよう、post:referencesを指定している。生成するモデルが属するモデル(親のモデル)をAとするとA:referencesと指定する。

Postモデルについては枠組みのみ生成されている。

app/models/post.rb

class Post < ApplicationRecord
end

1 2	class Post < ApplicationRecord end

PostImageモデルについては、references指定に伴って、Railsによりbelongs_toの1行が追加されている。

app/models/post_image.rb

class PostImage < ApplicationRecord
  belongs_to :post
end

class PostImage < ApplicationRecord

belongs_to :post

end

モデルのアソシエーションの定義

has_many

Postが複数のPostImageを持つことをRailsに伝えるため、Postモデルにhas_manyメソッドを追記する。

dependent

親のデータを削除するときにこのデータも一括して削除するためには、dependent: :destroyを指定。

class Post < ApplicationRecord
  has_many :post_images, dependent: :destroy
end

class Post < ApplicationRecord

has_many :post_images, dependent: :destroy

end

注意点

belongs_to :parentはメソッドの引数が単数形
has_many :childrenはメソッドの引数が複数形
dependent: :destroyは引数のハッシュで値がシンボル

マイグレーションファイル

Postsモデル

コマンドでの指定に従って、comment要素が設定されている。

class CreatePosts < ActiveRecord::Migration[5.1]
  def change
    create_table :posts do |t|
      t.text :comment

      t.timestamps
    end
  end
end

class CreatePosts < ActiveRecord::Migration[5.1]

def change

create_table :posts do |t|

t.text :comment

t.timestamps

end

PostImageモデル

コマンドで指定したfile_nameのほか、Railsによって以下の外部キーの指定が生成されている。

t.references :user, foreign_key: true

class CreatePostImages < ActiveRecord::Migration[5.1]
  def change
    create_table :post_images do |t|
      t.references :post, foreign_key: true
      t.string :file_name

      t.timestamps
    end
  end
end

class CreatePostImages < ActiveRecord::Migration[5.1]

def change

create_table :post_images do |t|

t.references :post, foreign_key: true

t.string :file_name

t.timestamps

end

マイグレーション実行～テーブル

マイグレーション実行の結果、posts、imagesの3つのテーブルが生成される。

mysql> show tables;
+-------------------------------+
| Tables_in_testapp_development |
+-------------------------------+
| ar_internal_metadata          |
| post_images                   |
| posts                         |
| schema_migrations             |
+-------------------------------+
4 rows in set (0.00 sec)

mysql> show tables;

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

| Tables_in_testapp_development |

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

| ar_internal_metadata |

| post_images |

| posts |

| schema_migrations |

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

4 rows in set (0.00 sec)

postsテーブル

デフォルトのid、created_at、updated_atのほか、不通に指定したcomment要素が含まれる。

mysql> DESCRIBE posts;
+------------+------------+------+-----+---------+----------------+
| Field      | Type       | Null | Key | Default | Extra          |
+------------+------------+------+-----+---------+----------------+
| id         | bigint(20) | NO   | PRI | NULL    | auto_increment |
| comment    | text       | YES  |     | NULL    |                |
| created_at | datetime   | NO   |     | NULL    |                |
| updated_at | datetime   | NO   |     | NULL    |                |
+------------+------------+------+-----+---------+----------------+
4 rows in set (0.00 sec)

mysql> DESCRIBE posts;

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

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

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

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

4 rows in set (0.00 sec)

post_imagesテーブル

デフォルトの要素のほか、Railsコマンドで指定した2つの要素が含まれる。

post: referencesの指定に対して、postsテーブルのidを参照する外部キーpost_id
普通に指定したfile_name

mysql> DESCRIBE post_images;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| post_id    | bigint(20)   | YES  | MUL | NULL    |                |
| file_name  | varchar(255) | YES  |     | NULL    |                |
| created_at | datetime     | NO   |     | NULL    |                |
| updated_at | datetime     | NO   |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

mysql> DESCRIBE post_images;

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

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

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

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

5 rows in set (0.00 sec)

アソシエーション設定の確認

rails consoleによる確認

rails consoleでデータベース操作の効果を確認する。

$ rails console
Running via Spring preloader in process 1557
^[[6~Loading development environment (Rails 5.1.7)
irb(main):001:0>

$ rails console

Running via Spring preloader in process 1557

^[[6~Loading development environment (Rails 5.1.7)

irb(main):001:0>

データの生成と保存

2つのPostImageオブジェクトを持つPostオブジェクトを1つ生成し、まとめて保存する。表示は見やすくするために再構成している。

saveより前では3つのオブジェクトともidがnilとなっているが、オブジェクト間の関連は保持されている。

irb(main):001:0> post = Post.new(comment: "こんにちは")
irb(main):002:0> post.post_images.build(file_name: "image1")
irb(main):003:0> post.post_images.build(file_name: "image2")

=> #<Post id: nil, comment: "こんにちは", created_at: nil, updated_at: nil>
=> #<PostImage id: nil, post_id: nil, file_name: "image1", created_at: nil, updated_at: nil>
=> #<PostImage id: nil, post_id: nil, file_name: "image2", created_at: nil, updated_at: nil>
# この段階ではDBには登録されていない

irb(main):004:0> post.save
# これでpostと従属する2つのpost_imagesの2つのレコードがDBに登録される

irb(main):001:0> post = Post.new(comment: "こんにちは")

irb(main):002:0> post.post_images.build(file_name: "image1")

irb(main):003:0> post.post_images.build(file_name: "image2")

=> #<Post id: nil, comment: "こんにちは", created_at: nil, updated_at: nil>

=> #<PostImage id: nil, post_id: nil, file_name: "image1", created_at: nil, updated_at: nil>

=> #<PostImage id: nil, post_id: nil, file_name: "image2", created_at: nil, updated_at: nil>

# この段階ではDBには登録されていない

irb(main):004:0> post.save

# これでpostと従属する2つのpost_imagesの2つのレコードがDBに登録される

postsテーブルとPostImagesテーブルへの登録内容を確認。

mysql> SELECT id, comment FROM posts;
+----+-----------------+
| id | comment         |
+----+-----------------+
|  1 | こんにちは      |
+----+-----------------+
1 row in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;
+----+---------+-----------+
| id | post_id | file_name |
+----+---------+-----------+
|  1 |       1 | image1    |
|  2 |       1 | image2    |
+----+---------+-----------+
2 rows in set (0.00 sec)

mysql> SELECT id, comment FROM posts;

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

| id | comment |

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

| 1 | こんにちは |

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

1 row in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;

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

| id | post_id | file_name |

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

| 1 | 1 | image1 |

| 2 | 1 | image2 |

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

2 rows in set (0.00 sec)

データの取得

postsに従属する複数のPostImageデータをループで取り出す例。

この操作はデータベース登録(save)の前でも可能。

post.post_images.each do |image|
  puts image.file_name
end

# image1
# image2

post.post_images.each do |image|

puts image.file_name

end

# image1

# image2

deleteに対する制約エラー

PostImageデータを持っている状態でpost.deleteしようとすると外部キー制約エラー

irb(main):007:0> post = Post.find(1)
irb(main):009:0> post.delete
  SQL (10.8ms)  DELETE FROM `posts` WHERE `posts`.`id` = 1
Traceback (most recent call last):
        1: from (irb):9
ActiveRecord::StatementInvalid (Mysql2::Error: Cannot delete or update a parent row: a foreign key constraint fails (`testapp_development`.`post_images`, CONSTRAINT `fk_rails_3ee54b46c4` FOREIGN KEY (`post_id`) REFERENCES `posts` (`id`)): DELETE FROM `posts` WHERE `posts`.`id` = 1)

irb(main):007:0> post = Post.find(1)

irb(main):009:0> post.delete

SQL (10.8ms) DELETE FROM `posts` WHERE `posts`.`id` = 1

Traceback (most recent call last):

1: from (irb):9

ActiveRecord::StatementInvalid (Mysql2::Error: Cannot delete or update a parent row: a foreign key constraint fails (`testapp_development`.`post_images`, CONSTRAINT `fk_rails_3ee54b46c4` FOREIGN KEY (`post_id`) REFERENCES `posts` (`id`)): DELETE FROM `posts` WHERE `posts`.`id` = 1)

destroyによる一括削除

post.destroyだと従属する2つのImageも削除される

irb(main):005:0> post.destroy
   (0.2ms)  BEGIN
  PostImage Load (0.4ms)  SELECT `post_images`.* FROM `post_images` WHERE `post_images`.`post_id` = 1
  SQL (0.4ms)  DELETE FROM `post_images` WHERE `post_images`.`id` = 1
  SQL (0.2ms)  DELETE FROM `post_images` WHERE `post_images`.`id` = 2
  SQL (0.2ms)  DELETE FROM `posts` WHERE `posts`.`id` = 1
   (11.0ms)  COMMIT

irb(main):005:0> post.destroy

(0.2ms) BEGIN

PostImage Load (0.4ms) SELECT `post_images`.* FROM `post_images` WHERE `post_images`.`post_id` = 1

SQL (0.4ms) DELETE FROM `post_images` WHERE `post_images`.`id` = 1

SQL (0.2ms) DELETE FROM `post_images` WHERE `post_images`.`id` = 2

SQL (0.2ms) DELETE FROM `posts` WHERE `posts`.`id` = 1

(11.0ms) COMMIT

1つの実行文で、当該Postデータとそれに関連付けられたPostImageデータも削除される。

Rails – 掲示板 – プロフィール画像アップロード機能

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

概要

ユーザー設定の枠組みでコメント編集機能を実装した。

ファイルアップロードの実装の詳細は「画像アップロード」にまとめており、ここでは以下の仕様のコードと説明のみまとめる。

ユーザー設定画面に以下を表示
- 現在のプロフィール画像
- ファイル選択要素
- コメント入力要素(現在のコメント内容を入れておく)
送信時に画像が選択されていれば画像ファイルを保存してファイル名をデータベースに登録
- 画像保存前に今の画像ファイルを削除
- 画像ファイル名はランダム文字列で与える
コメント入力は入力されているテキストで更新
更新に成功すればプロフィール画面に遷移
更新に失敗すれば再度ユーザー設定画面に遷移

掲示板の第2段階へ

画像ファイル保存場所

publicディレクトリー下にuser_imagesディレクトリーを作成。ここにプロフィール画像を保存。

users#editアクション

プロフィールコメント編集と同じ。

ルーティング

プロフィールコメント編集と同じ。

edit.html.erbビュー

画像アップロードに関する表示要素は以下のとおり。

現在のプロフィール画像(L6～12)
プロフィール画像選択フィールド(L13)

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>
      <div class="profile_image">
        <% if @user.image_file_name == nil %>
          <%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>
        <% else %>
          <%= image_tag user_image_url(@user) %>
        <% end %>
      </div>
      <%= f.file_field(:upload_file, class: "input file") %>
      <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>

<% if @user.image_file_name == nil %>

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

<% else %>

<%= image_tag user_image_url(@user) %>

<% end %>

</div>

<%= f.file_field(:upload_file, class: "input file") %>

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

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

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

<% end %>

</div>

イメージファイルをdivで囲んでいる(L6～12)。スタイル設定でdiv要素のサイズに合わせて画像をフィッティング・センタリング。

file_fieldのパラメーターキー:upload_fileはモデルのパラメーターには含まれない(L13)。コントローラーでファイルオブジェクトを取り出すためだけに使われる。

ボタンが押されると、update_user_path→updateコントローラーに制御が移る(L4)。

user_image_urlヘルパー

editビューでプロフィール画像を表示するのにuser_image_urlヘルパーを使っている。このヘルパーはUserに関して使うので、UsersHelperモジュールに書いている。

画像ファイルのパスについては画像ファイルの配置とパス指定を参照

module UsersHelper

  .....

  # プロフィール画像ファイルのフルパスを返す
  def user_image_url(user)
    "/user_images/#{user.image_file_name}"
  end
end

module UsersHelper

.....

# プロフィール画像ファイルのフルパスを返す

def user_image_url(user)

"/user_images/#{user.image_file_name}"

end

users#updateアクション

次の機能を追加している。

フォームからのアップロードファイルの取得
ファイルの保存
データベースへのファイル名の登録

app/controllers/users_controller.rb

  def update
    # セッション中のユーザーに対する処理
    @user = User.find(user_in_session.id)

    # アップロードファイル <- file_field
    upload_file = params[:user][:upload_file]
    # 画像ファイルのパラメーターをマージするため
    new_user_params = user_params
    # 画像ファイルが選択されていれば、検証・保存・パラメーター設定
    if upload_file.present?
      # ファイルタイプが適切でない場合はエラー・遷移
      case upload_file.content_type
      when "image/jpeg"
        extention = ".jpg"
      when "image/png"
        extention = ".png"
      else
        flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"
        render action: :edit and return
      end
      # 画像ファイルのファイル名をランダム文字列に
      upload_file_name = random_string(20) + extention
      # プロフィール画像を保存するディレクトリー
      upload_dir = Rails.root.join("public", "user_images")
      # アップロードするファイルのフルパス
      upload_file_path = upload_dir + upload_file_name
      # プロフィール画像がある場合は削除処理に入る
      if @user.image_file_name.present?
        # 前のファイルを削除するためのパス
        old_file_path = upload_dir + @user.image_file_name
        # 今のファイルを削除
        File.delete(old_file_path)
      end
      # アップロードファイルの書き込み
      File.binwrite(upload_file_path, upload_file.read)

      # フォームから得られたparamsにファイル名の項目を追加
      new_user_params = user_params.merge({image_file_name: upload_file_name})
    end

    # 登録成功ならプロフィールページへ
    if @user.update(new_user_params)
      redirect_to profile_path(user_in_session) and return
    # 登録失敗ならエラーをフラッシュして再度ユーザー設定ページへ
    else
      flash.now[:danger] = "設定更新できませんでした"
      render action: :edit and return
    end
  end

def update

# セッション中のユーザーに対する処理

@user = User.find(user_in_session.id)

# アップロードファイル <- file_field

upload_file = params[:user][:upload_file]

# 画像ファイルのパラメーターをマージするため

new_user_params = user_params

# 画像ファイルが選択されていれば、検証・保存・パラメーター設定

if upload_file.present?

# ファイルタイプが適切でない場合はエラー・遷移

case upload_file.content_type

when "image/jpeg"

extention = ".jpg"

when "image/png"

extention = ".png"

else

flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"

render action: :edit and return

end

# 画像ファイルのファイル名をランダム文字列に

upload_file_name = random_string(20) + extention

# プロフィール画像を保存するディレクトリー

upload_dir = Rails.root.join("public", "user_images")

# アップロードするファイルのフルパス

upload_file_path = upload_dir + upload_file_name

# プロフィール画像がある場合は削除処理に入る

if @user.image_file_name.present?

# 前のファイルを削除するためのパス

old_file_path = upload_dir + @user.image_file_name

# 今のファイルを削除

File.delete(old_file_path)

end

# アップロードファイルの書き込み

File.binwrite(upload_file_path, upload_file.read)

# フォームから得られたparamsにファイル名の項目を追加

new_user_params = user_params.merge({image_file_name: upload_file_name})

end

# 登録成功ならプロフィールページへ

if @user.update(new_user_params)

redirect_to profile_path(user_in_session) and return

# 登録失敗ならエラーをフラッシュして再度ユーザー設定ページへ

else

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

render action: :edit and return

end

パラメーターからアップロードファイルのオブジェクトを取得(L6)。

user_paramsで得られたパラメーターをnew_user_paramsに保存しているが、ファイルが存在する場合はこれに:image_file_nameがマージが追加される。

ファイルタイプはJPEGかPINGのみで、それ以外はエラーをフラッシュして再度設定画面を表示(L11～20)。

ファイル名の衝突を避けるため、ファイル名をランダム文字列としている(L22)。

現在存在しているファイルを削除する(L27～33)。

ランダム文字列の生成

ランダム文字列の生成は記事投稿にも使うため、application_helper.rbに書く。

app/helpers/application_helper.rb

module ApplicationHelper
  def random_string(n)
    chars = ("0".."9").to_a.join + ("A".."Z").to_a.join + ("a".."z").to_a.join
    (Array.new(n).map! {|e| chars[rand(chars.length)]}).join
  end
end

module ApplicationHelper

def random_string(n)

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

(Array.new(n).map! {|e| chars[rand(chars.length)]}).join

end

これを有効にするにはインクルードしておく必要がある。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  # 共通で使われるヘルパーのモジュールをインクルード
  include ApplicationHelper
  # ユーザーセッションの管理に関するメソッドモジュールをインクルード
  include UsersHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

# 共通で使われるヘルパーのモジュールをインクルード

include ApplicationHelper

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

include UsersHelper

end

user_paramsヘルパー

プロフィールコメント編集と同じ。

params[:user][:update_file]は直接保存しないため、ストロングパラメーターとする必要がない。

スタイル

プロフィール画像のフィッティングとセンタリング(L20～33)。

L34ではファイル入力要素のスタイルを設定。

app/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;
    }
    .profile_image {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px auto;
      width: 200px;
      height: 200px;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }
    .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;

}

.profile_image {

display: flex;

align-items: center;

justify-content: center;

margin: 10px auto;

width: 200px;

height: 200px;

img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

.input {

display: block;

margin: 10px 20px 0 auto;

width: 500px;

}

.comment {

height: 100px;

background-color: #f8f8f8;

}

button {

display: block;

margin: 10px 20px 10px auto;

}

フラッシュの追加

application.html.erbにフラッシュの表示を追加(application_signed_out.html.erbと同じ内容)。

jQueryの読み込み
フラッシュ表示部
一定時間後のスライドアップ

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' %>
    <%= javascript_include_tag 'https://code.jquery.com/jquery-3.5.0.min.js' %>
    <script src="https://kit.fontawesome.com/08c0548ff0.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <% if flash.now.present? %>
      <% flash.each do |type, message| %>
        <p class="flash_message flash_message_<%= type %>"><%= message.html_safe %></p>
      <% end %>
    <% end %>

    <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">

      .....

      </ul>
    </header>

    <%= yield %>

    <script>
      window.setTimeout(() => {
        $(".flash_message").slideUp();
      }, 3000);
    </script>
  </body>
</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' %>

<%= javascript_include_tag 'https://code.jquery.com/jquery-3.5.0.min.js' %>

</head>

<body>

<% if flash.now.present? %>

<% flash.each do |type, message| %>

<% end %>

<%= link_to(top_path) do %>

<% end %>

.....

</ul>

</header>

<%= yield %>

window.setTimeout(() => {

$(".flash_message").slideUp();

}, 3000);

</script>

</body>

</html>

プロフィール画面の変更

プロフィール画像ファイルのアップロードができたので、プロフィール画面にこれを表示させるよう変更する。

プロフィール画面が未登録の場合はダミー画像を表示する
画像が存在する場合はuser_image_urlヘルパーで画像のフルパスを取得する

app/views/users/show.html.erb

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

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

<% if @user.image_file_name == nil %>

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

<% else %>

<%= image_tag user_image_url(@user) %>

<% end %>

</div>

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

</p>

</div>

Rails – ファイルのアップロード～ゼロから組み立て

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

概要

Railsで画像ファイルをアップロードする処理を整理する
ユーザーのプロフィール画面のアップロードと更新を例にする
更新時、前の画像は削除する
画像ファイル名の衝突をさけるため、ランダム文字列を生成してファイル名にする

フォームからのアップロード情報を受け取る

ビュー

以下のビューが表示されるとファイル選択要素が表示される。

file_fieldに対するキーは:upload_fileと設定しているが、これはモデルに存在しないキーでもよい。

ここでは登録済みユーザーのプロフィール画像を編集する想定で、PATCHメソッドでupdateコントローラーに送信される。

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

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

<%= f.file_field(:upload_file) %>

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

<% end %>

コントローラー

フォームから送られたアップロードファイルに関するデータはparamsに格納されていて、以下で取得できる。

params[:モデル][:file_fieldで設定したキー]

ここではアップロードファイルが指定されているときにupload_fileにアップロードファイルの内容を保存し、その中のoriginal_filenameの値をupload_file_nameに保存している。

class UsersController < ApplicationController

  .....

  def update
    # セッション中のユーザーに対する処理
    @user = User.find(user_in_session.id)

    # アップロードファイル <- file_field
    upload_file = params[:user][:upload_file]
    if upload_file.present?
      # アップロードファイルの元の名前
      upload_file_name = upload_file.original_filename
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def update

# セッション中のユーザーに対する処理

@user = User.find(user_in_session.id)

# アップロードファイル <- file_field

upload_file = params[:user][:upload_file]

if upload_file.present?

# アップロードファイルの元の名前

upload_file_name = upload_file.original_filename

end

.....

end

UploadedFileクラス

file_fieldからparamsに保存されるのはUploadedFileクラスのインスタンス。

たとえば上のupload_fileの内容は以下の様になっていて、original_filenameやcontent_typeがインスタンス変数として参照できる。

#<ActionDispatch::Http::UploadedFile:0x0000000005a9f1c8
  @tempfile=#<Tempfile:/tmp/RackMultipart20210329-327-1fatvrf.jpg>,
  @original_filename="image_car_on_beach.jpg",
  @content_type="image/jpeg",
  @headers="Content-Disposition: form-data; name=\"user[upload_file]\"; filename=\"image_car_on_beach.jpg\"\r\nContent-Type: image/jpeg\r\n">

#<ActionDispatch::Http::UploadedFile:0x0000000005a9f1c8

@tempfile=#<Tempfile:/tmp/RackMultipart20210329-327-1fatvrf.jpg>,

@original_filename="image_car_on_beach.jpg",

@content_type="image/jpeg",

@headers="Content-Disposition: form-data; name=\"user[upload_file]\"; filename=\"image_car_on_beach.jpg\"\r\nContent-Type: image/jpeg\r\n">

また、画像ファイルの実体はreadメソッドで読みだすことができて、これをファイルの保存時に使う(readメソッドは1回しか呼び出せないらしい)。

permitの設定は不要

フォームから得られるUploadedFileオブジェクトをparamsで取得しているが、これに対してrequire.permitに含める必要はない。

Railsのモデルの仕組みによって自動的に入力・保存するものではないため。

ファイルの書き込み

基本手順

アプリケーションの中のファイル保存ディレクトリーを取得
上記とファイル名を組み合わせたフルパスを取得
画像ファイルの書き込み

コントローラー

コントローラーのupdateアクションのみ示す。

  def update
    # セッション中のユーザーに対する処理
    @user = User.find(user_in_session.id)

    # アップロードファイル <- file_field
    upload_file = params[:user][:upload_file]
    if upload_file.present?
      # アップロードファイルの元の名前
      upload_file_name = upload_file.original_filename
      # プロフィール画像を保存するディレクトリー
      upload_dir = Rails.root.join("public", "user_images")
      # アップロードするファイルのフルパス
      upload_file_path = upload_dir + upload_file_name
      # 前のファイルを削除するためのパス
      old_file_path = upload_dir + @user.image_file_name
      # アップロードファイルの書き込み
      File.binwrite(upload_file_path, upload_file.read)
    end
  end

def update

# セッション中のユーザーに対する処理

@user = User.find(user_in_session.id)

# アップロードファイル <- file_field

upload_file = params[:user][:upload_file]

if upload_file.present?

# アップロードファイルの元の名前

upload_file_name = upload_file.original_filename

# プロフィール画像を保存するディレクトリー

upload_dir = Rails.root.join("public", "user_images")

# アップロードするファイルのフルパス

upload_file_path = upload_dir + upload_file_name

# 前のファイルを削除するためのパス

old_file_path = upload_dir + @user.image_file_name

# アップロードファイルの書き込み

File.binwrite(upload_file_path, upload_file.read)

end

流れは以下のとおり。

まず事前にプロジェクトディレクトリー下のpublicに必要に応じてサブディレクトリーをつくっておく

/home/.../ex_bbs/public/user_images

Rails.rootはプロジェクトディレクトリーのフルパスを保持したPathオブジェクト

#<Pathname:/home/.../ex_bbs>

1	#<Pathname:/home/.../ex_bbs>

Rails.root.join()でパスにディレクトリーをつなげていく

upload_dir = Rails.root.join("public", "user_images")

#<Pathname:/home/,,,/ex_bbs/public/user_images>

1	#<Pathname:/home/,,,/ex_bbs/public/user_images>

upload_dirにファイル名をつなげてファイルのフルパスにする

upload_file_path = upload_dir + upload_file_name

#<Pathname:/home/,,,/ex_bbs/public/user_images/image_car_on_beach.jpg>

1	#<Pathname:/home/,,,/ex_bbs/public/user_images/image_car_on_beach.jpg>

ファイルのフルパスとファイルの実体を指定して、画像ファイルを書き込む。

File.binwrite(upload_file_path, upload_file.read)

データベースへの登録

基本手順

フォームから得られたparamsにヘルパーでパーミッションを適用
その結果にアップロードファイルのファイル名をマージして登録用のパラメーターとする
登録用パラメーターでデータベースに登録

コントローラー

  def update
    # セッション中のユーザーに対する処理
    @user = User.find(user_in_session.id)

    # アップロードファイル <- file_field
    upload_file = params[:user][:upload_file]
    if upload_file.present?

    .....

      # フォームから得られたparamsにファイル名の項目を追加
      new_user_params = user_params.merge({image_file_name: upload_file_name})
    end

    if @user.update(new_user_params)
      redirect_to profile_path(user_in_session)
    else
      flash.now[:danger] = "設定更新できませんでした"
      <span class="crayon-i">render</span> <span class="crayon-i">action</span><span class="crayon-sy">:</span> <span class="crayon-sy">:</span><span class="crayon-i">edit</span> <span class="crayon-st">and</span> <span class="crayon-st">return</span>
    end
  end

def update

# セッション中のユーザーに対する処理

@user = User.find(user_in_session.id)

# アップロードファイル <- file_field

upload_file = params[:user][:upload_file]

if upload_file.present?

.....

# フォームから得られたparamsにファイル名の項目を追加

new_user_params = user_params.merge({image_file_name: upload_file_name})

end

if @user.update(new_user_params)

redirect_to profile_path(user_in_session)

else

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

<span class="crayon-i">render</span> <span class="crayon-i">action</span><span class="crayon-sy">:</span> <span class="crayon-sy">:</span><span class="crayon-i">edit</span> <span class="crayon-st">and</span> <span class="crayon-st">return</span>

end

パラメーターヘルパー

コントローラーで多用されるヘルパーは以下のような形。

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

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

private

def user_params

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

end

フォームから得られたパラメーター(user_paramsの戻り値)は以下のような内容。画像選択以外の要素がないのでパラメーターは空になっている。

Unpermitted parameter: :upload_file
<ActionController::Parameters {} permitted: true>

1 2	Unpermitted parameter: :upload_file <ActionController::Parameters {} permitted: true>

パラメーターの調整

フォームで得られた:upload_fileからデータベースに登録するファイル名を取り出し、パラメーターにマージする。

new_user_params = user_params.merge({image_file_name: upload_file_name})

マージ後のnew_user_paramsの内容は以下のとおりで、空だった内容に:image_file_nameが追加されている。

<ActionController::Parameters {"image_file_name"=>"image_car_on_beach.jpg"} permitted: true>

1	<ActionController::Parameters {"image_file_name"=>"image_car_on_beach.jpg"} permitted: true>

データベースの更新

ユーザーモデルのupdateに調整したパラメーターを与えてデータベースを更新する。

@user.update(new_user_params)

ファイルの削除

データ更新の際に、現在登録されているファイルを削除する場合。

    if upload_file.present?
      # 画像ファイルのファイル名をランダム文字列に
      upload_file_name = upload_file.original_filename
      # プロフィール画像を保損するディレクトリー
      upload_dir = Rails.root.join("public", "user_images")
      # アップロードするファイルのフルパス
      upload_file_path = upload_dir + upload_file_name
      # プロフィール画像がある場合は削除処理に入る
      if @user.image_file_name.present?
        # 今のファイルを削除するためのパス
        old_file_path = upload_dir + @user.image_file_name
        # 今のファイルを削除
        File.delete(old_file_path)
      end
      # アップロードファイルの書き込み
      File.binwrite(upload_file_path, upload_file.read)

      # フォームから得られたparamsにファイル名の項目を追加
      new_user_params = user_params.merge({image_file_name: upload_file_name})
    end

if upload_file.present?

# 画像ファイルのファイル名をランダム文字列に

upload_file_name = upload_file.original_filename

# プロフィール画像を保損するディレクトリー

upload_dir = Rails.root.join("public", "user_images")

# アップロードするファイルのフルパス

upload_file_path = upload_dir + upload_file_name

# プロフィール画像がある場合は削除処理に入る

if @user.image_file_name.present?

# 今のファイルを削除するためのパス

old_file_path = upload_dir + @user.image_file_name

# 今のファイルを削除

File.delete(old_file_path)

end

# アップロードファイルの書き込み

File.binwrite(upload_file_path, upload_file.read)

# フォームから得られたparamsにファイル名の項目を追加

new_user_params = user_params.merge({image_file_name: upload_file_name})

end

ファイル名の重複防止～ランダム文字列

アップロードファイル名にoriginal_filenameを使うと、ユーザー側で指定したファイル名が衝突する可能性がある。その場合、あとから登録した画像で上書きされてしまう。

そこで、ファイル名にランダム文字列を使って、実質上衝突が起こらないようにする。

同じ機能は投稿記事のコントローラーでも利用し、アプリケーションに共通なので、application_helper.rbに記述する。

app/helpers/application_helper.rb

module ApplicationHelper
  def random_string(n)
    chars = ("0".."9").to_a.join + ("A".."Z").to_a.join + ("a".."z").to_a.join
    (Array.new(n).map! {|e| chars[rand(chars.length)]}).join
  end
end

module ApplicationHelper

def random_string(n)

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

(Array.new(n).map! {|e| chars[rand(chars.length)]}).join

end

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  # 共通で使われるヘルパーのモジュールをインクルード
  include ApplicationHelper
  # ユーザーセッションの管理に関するメソッドモジュールをインクルード
  include UsersHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

# 共通で使われるヘルパーのモジュールをインクルード

include ApplicationHelper

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

include UsersHelper

end

そして、アップロード画像のファイル名をランダム文字列とする。このファイル名はデータベースの更新と画像ファイルの保存に共通して使われる。

  def update
    # セッション中のユーザーに対する処理
    @user = User.find(user_in_session.id)

    # アップロードファイル <- file_field
    upload_file = params[:user][:upload_file]
    if upload_file.present?
      # アップロードファイルの元の名前
      upload_file_name = random_string(20)

      .....

  end

def update

# セッション中のユーザーに対する処理

@user = User.find(user_in_session.id)

# アップロードファイル <- file_field

upload_file = params[:user][:upload_file]

if upload_file.present?

# アップロードファイルの元の名前

upload_file_name = random_string(20)

.....

end

こうすることで、複数のユーザーが同じファイル名で画像をアップロードしても、ユーザーごとに異なる名前となるため、ファイル名の衝突がおきない。

まとめ

画像ファイルのアップロードのためのファイル群をまとめておく。ユーザーのプロフィール画像をアップロードするケースを例にする。

editアクション

ユーザー操作などでルーティングされ、画像アップロードを含むページを表示する
ビューで使うセッション中のユーザーのインスタンスをインスタンス変数に保存する

app/controllers/users_controller.rb

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

  .....

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

  .....

end

class UsersController < ApplicationController

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

.....

def edit

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

@user = User.find(user_in_session.id)

end

.....

end

ビュー

画像アップロードを含むページ
ボタンを押すとPATCHメソッドでupdateアクションにデータが送られるようルーティングしている

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>
      <div class="profile_image">
        <% if @user.image_file_name == nil %>
          <%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>
        <% else %>
          <%= image_tag "/user_images/#{@user.image_file_name}" %>
        <% end %>
      </div>
      <%= f.file_field(:upload_file, class: "input file") %>
      <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>

<% if @user.image_file_name == nil %>

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

<% else %>

<%= image_tag "/user_images/#{@user.image_file_name}" %>

<% end %>

</div>

<%= f.file_field(:upload_file, class: "input file") %>

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

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

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

<% end %>

</div>

updateアクション

フォームからのデータを受け取り、以下の処理を行う。

画像の保存(古い画像の削除)
データベースのファイル名の更新

app/controllers/users_controller.rb

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

  .....

  def update
    # セッション中のユーザーに対する処理
    @user = User.find(user_in_session.id)

    # アップロードファイル <- file_field
    upload_file = params[:user][:upload_file]
    if upload_file.present?
      # アップロードファイルの元の名前
      upload_file_name = random_string(20)
      # プロフィール画像を保損するディレクトリー
      upload_dir = Rails.root.join("public", "user_images")
      # アップロードするファイルのフルパス
      upload_file_path = upload_dir + upload_file_name
      # プロフィール画像がある場合は削除処理に入る
      if @user.image_file_name.present?
        # 前のファイルを削除するためのパス
        old_file_path = upload_dir + @user.image_file_name
        # 今のファイルを削除
        File.delete(old_file_path)
      end
      # アップロードファイルの書き込み
      File.binwrite(upload_file_path, upload_file.read)

      # フォームから得られたparamsにファイル名の項目を追加
      new_user_params = user_params.merge({image_file_name: upload_file_name})
    end

    # 登録成功ならプロフィールページへ
    if @user.update(new_user_params)
      redirect_to profile_path(user_in_session) and return
    # 登録失敗なら再度ユーザー設定ページへ
    else
      flash.now[:danger] = "設定更新できませんでした"
      render :edit_user, layout: 'application' and return
    end
  end

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

class UsersController < ApplicationController

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

.....

def update

# セッション中のユーザーに対する処理

@user = User.find(user_in_session.id)

# アップロードファイル <- file_field

upload_file = params[:user][:upload_file]

if upload_file.present?

# アップロードファイルの元の名前

upload_file_name = random_string(20)

# プロフィール画像を保損するディレクトリー

upload_dir = Rails.root.join("public", "user_images")

# アップロードするファイルのフルパス

upload_file_path = upload_dir + upload_file_name

# プロフィール画像がある場合は削除処理に入る

if @user.image_file_name.present?

# 前のファイルを削除するためのパス

old_file_path = upload_dir + @user.image_file_name

# 今のファイルを削除

File.delete(old_file_path)

end

# アップロードファイルの書き込み

File.binwrite(upload_file_path, upload_file.read)

# フォームから得られたparamsにファイル名の項目を追加

new_user_params = user_params.merge({image_file_name: upload_file_name})

end

# 登録成功ならプロフィールページへ

if @user.update(new_user_params)

redirect_to profile_path(user_in_session) and return

# 登録失敗なら再度ユーザー設定ページへ

else

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

render :edit_user, layout: 'application' and return

end

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

private

def user_params

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

end

ランダム文字列ヘルパー

ファイル名の衝突を防ぐランダム文字列生成のヘルパー。

app/helpers/application_helper.rb

module ApplicationHelper
  def random_string(n)
    chars = ("0".."9").to_a.join + ("A".."Z").to_a.join + ("a".."z").to_a.join
    (Array.new(n).map! {|e| chars[rand(chars.length)]}).join
  end
end

module ApplicationHelper

def random_string(n)

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

(Array.new(n).map! {|e| chars[rand(chars.length)]}).join

end

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

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

概要

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

掲示板の第2段階へ

ルーティングの確認

ユーザー設定でルーティングは設定済みだが確認しておく。フォームからのデータは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;

}