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 / コメントする

概要

複数のコントローラーやビューで共通に利用したいヘルパーの置き場所について。単純なヘルパーの場合、以下の場所が候補になる。

app/helpers下のビューに対応した***_helper.rbに記述
app/helpers/application_helper.rb内に記述
app/controllers/concerns下のモジュールファイルに記述(コントローラー

依存関係を持つような場合はconcernsに置くのがよいようだが、単純なヘルパーの場合はビューとの関連によってapplication_helper.rbに統一するのが簡明かもしれない。

コントローラーに対応したhelper

ヘルパーファイルにヘルパーを記述してapplication_controllerでインクルードすると、コントローラーやビューでこれを使うことができる。

以下はPagesコントローラーの例で、コントローラーとビューの両方でfoo_helperの実行が確認できる。

定義・設定

helpersディレクトリー内にあるコントローラー_helper.rbの中でヘルパーを定義する。

app/helpers/pages_helper.rb

module PagesHelper
  def foo_helper
    "FOO"
  end
end

module PagesHelper

def foo_helper

"FOO"

end

application_controllerでモジュールをインクルード。

app/controllers/application_controller.rb

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

  include PagesHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

include PagesHelper

end

利用

コントローラーで利用可能。

app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def helper_test
    p foo_helper
  end
end

class PagesController < ApplicationController

def helper_test

p foo_helper

end

ビューでも利用可能。

app/views/pages/helper_test.html.erb

<h1>Helper Test</h1>

<p><%= foo_helper %></p>

<h1>Helper Test</h1>

application_helper

application_helperもヘルパーファイルの1つで、Railsにより準備される。これを上と同じくapplication_controllerでインクルードして、アプリケーション共通のヘルパーとして使える。

定義・設定

helpersディレクトリー内にあるapplication_helper.rbの中でヘルパーを定義する。

app/helpers/application_helper.rb

module ApplicationHelper
  def bar_helper
    "BAR"
  end
end

module ApplicationHelper

def bar_helper

"BAR"

end

application_controllerでモジュールをインクルード。

app/controllers/application_controller.rb

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

  include ApplicationHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

include ApplicationHelper

end

利用

コントローラーで利用可能。

app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def helper_test
    p bar_helper
  end
end

class PagesController < ApplicationController

def helper_test

p bar_helper

end

ビューでも利用可能。

app/views/pages/helper_test.html.erb

<h1>Helper Test</h1>

<p><%= bar_helper %></p>

<h1>Helper Test</h1>

concerns

app/controllers/concernsにはコントローラー間で共通のモジュール、app/models/concernsはモデル間で共通のモジュールのファイルを配置する。

コントローラーなどでインクルードしてもビューではこれらのモジュールは使えない。

定義・設定

concernsディレクトリー下にモジュールファイルを作成して、その中にヘルパーを書く。

app/controller/concerns/common_module.rb

module CommonModule

  def baz_helper
    "BAZ"
  end
end

module CommonModule

def baz_helper

"BAZ"

end

application_controllerでモジュールをインクルード。

app/controllers/application_controller.rb

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

  include CommonModule
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

include CommonModule

end

利用

コントローラーで利用可能。

app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def helper_test
    p baz_helper
  end
end

class PagesController < ApplicationController

def helper_test

p baz_helper

end

しかしビューでは使えない。

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

HTML/CSS – img画像のフィッティングとセンタリング

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

概要

img要素で表示させる画像をdiv要素で囲む
div要素でサイズを指定して画像を収める
画像を縦横にセンタリングする
画像のサイズがdiv要素のサイズより大きい場合を想定している(画像の方が小さい場合に伸長はされない)

HTML

画像をdiv要素で囲み、CSSでサイズを設定する。画像ファイルは、CDNによるダミー画像を使っている。

<div class="image-frame">
  <img src="https://dummyimage.com/400x300/272ef5/eaf520.png">
</div>

</div>

CSS

画像を収めるための設定。画像ファイルより小さい枠のサイズを設定している。ただしこのままでは画像が左寄せか上寄せになる。

.image-frame {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.image-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-frame {

width: 200px;

height: 200px;

border: 1px solid black;

}

.image-frame img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

上の設定に画像の縦横センタリングを含めた設定。

.image-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.image-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-frame {

display: flex;

justify-content: center;

align-items: center;

width: 200px;

height: 200px;

border: 1px solid black;

}

.image-frame img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

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;

}

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)