ユーザー画像を表示する仕組み
ファイル名を保存しておき、そのファイル名の画像を表示する。
→ファイル名を保存するために、usersテーブルにimage_nameカラムを用意する！
※画像ファイルは、publicフォルダ内に保存する
ファイル名を表示するカラムを追加する
マイグレーションファイルのみを作成するには、「rails g migration ファイル名」とする。
《ターミナル》
$ rails g migration add_image_name_to_users
ファイル名
- 指定したファイル名のマイグレーションファイルが作成される
- ファイル名は自由に指定できますが、追加するカラム名を含めるなど分かりやすい名前が良い
- ファイル名には先頭にファイルの作成日時が自動的に追加される
テーブルに変更を加えるためには、生成されたマイグレーションファイルの中の
changeメソッドの中に変更内容を書く必要がある。
今まで扱ってきた「rails db:migrate」コマンドはこのchangeメソッドの中身を実行するためのコマンドで、
「rails g model」コマンドではchangeメソッドの中身が自動生成されていた。
カラムを追加する場合には、
「add_column :テーブル名, :カラム名, :データ型」とする。
changeメソッドの中身を追加したら、「rails db:migrate」でデータベースに変更を反映する。
《ミグレーションファイル》
class AddImageNameToUsers < ActiveRecord::Migration[5.0]
def change
add_colmun :users, :image_name, :string
end
end
初期画像を設定する
ユーザー登録時に、image_nameカラムの値が「default_user.jpg」になるようにする。
createアクション内の@userを定義しているところで、newメソッドの引数としてimage_nameを追加する。
《コントローラ》
def create
@user = User.new(
name: params[:name],
email: params[:email],
image_name: “default_user.jpg”
)
ユーザー画像を表示する
詳細ページに画像を表示する
ユーザー画像を表示するためには、今まで画像を表示してきた時と同様に、HTMLの<img>タグを使う。
《ビュー》
<img src=”<%= “/user_images/#{@user.image_name}” %>“>
- 画像はpublic/user_imagesフォルダに保存されているので、src属性の値を「/user_images/ファイル名」とする必要がある
- /から始まるので注意
- Rubyのコード部分は<%= %>で囲む必要がある
一覧ページに画像を表示する
一覧画面にユーザー画像を表示するためには、each文を利用します。@usersに代入されている配列のデータをeach文で１つずつ変数userに代入し、ユーザー画像を繰り返し表示させる。
《ビュー》
<% @users.each do |user| %>
<img src=”<%= “/user_images/#{user.image_name}” %>“>
<% end %>
ユーザーごとに画像を編集できるようにする
画像選択ボタン
<input>タグに「type=”file”」を追加することで、画像ファイルを選択するボタンを表示することが出来る。
《ビュー》
<h2>画像</h2>
<input name=”image” type=”file”>
- name属性を指定するのを忘れない！
画像の送信 multipart : true
画僧の送信は特殊なので、form_tagに{multipart: true}を追加する必要がある。
《editビュー》
<% form_tag(“…”/{multipart: true}) do %>
【例】
<%= form_tag(“/users/#{@user.id}/update”,{multipart: true}) do %>
- form_tagの時、doを忘れがちなので注意
ファイルを作成する
update アクションで、ファイル名をデータベースに保存し、 public フォルダに画像ファイルを作成していく
Rubyのコードでファイルを作成する Fileクラス
ファイルを作成するためには、Fileクラスのwriteメソッドを使う
《ターミナル》
File.write(“public/sample.txt”,“Hello world”)
ファイルの場所 ファイルの中身
- File.writeの時には、「public」を指定していることに注意
送信された画像を保存する
updateアクションに以下の機能をつける
- ファイル名をデータベースに保存する
- publicフォルダ内に画像を作成する
ファイル名をデータベースに保存する
nameやemailを更新した時と同じように、@user.image_nameの値を上書きする。
《createアクション内》
@user.image_name = “#{@user.id}.jpg”
- ファイル名は上記のように、「ユーザーのid.jpg」となるようにする
- ドットを忘れないように注意！
画像を受け取る（publicフォルダ内に画像を保存する方法）
画像ファイルも他のnameやemailと同様に、params[:image]とすることで受け取ることができる。
《createアクション内》
image = params[:image]
- params[:image]の中には、<input name=”image”>から送信された画像ファイルに関する情報が入っている。
- ここで受け取る画像ファイルを利用して、publicフォルダ内に画像を作成する
画像を保存する File.binwriteメソッド
《createアクション内》
@user.image_name = “#{@user.id}jpg”
image = params[:image]
File.binwrite(“public/user_images/#{@user.image_name}”,image.read)
ファイルの場所 ファイルの中身(画像データ)
- File.writeではなくFile.binwriteを用いる
- 変数imageに対し、readメソッドを用いることでその画像データを取得できる
画像が存在するか判定する
画像を保存する処理は、画像データが送信された場合だけ実行する。if文で処理を分岐させる
《createアクション内》
if params[:image] ← 画像が保存されているかどうか判定する
@user.image_name = “#{@user.id}.jpg” ←保存されてたら、ファイル名を保存して、
image = params[:image] ← 画像データを受け取って
File.binwrite(“public/user_images/#{@user.image_name}”,image.read) ← 画像を保存する
コメント