プロフィール画像を表示する仕組み
プロフィール画像を表示する仕組みを見てみましょう。
データベースに画像のファイル名を保存しておき、そのファイル名の画像を表示します。ファイル名を保存するために、usersテーブルにimage_nameカラムを用意しましょう。
画像ファイルは、publicフォルダ内に保存します。
ファイル名を保存するカラムを追加しよう
それでは、ユーザーが画像を保存できるようにしていこう。まずは、 users テーブルに image_name カラムを追加していくぞ。
データベースに変更を加える手順は覚えているかな？
マイグレーションファイルのみを作成するrails g migration
STEP1 では
「rails g model User image_names:string」とすれば良いんですよね？
おっと、「rails g model」コマンドではモデルとマイグレーションファイルが作成されてしまう。
今回はマイグレーションファイルのみを作成するようにしよう。
そのために、「rails g migration」というコマンドを使うぞ。
詳しくは次のスライドで見ていこう！
rails g migration
migrate
マイグレーションファイルのみを作成するには、「rails g migration ファイル名」とします。指定したファイル名のマイグレーションファイルが作成されます。ファイル名は自由に指定できますが、追加するカラム名を含めるなど分かりやすい名前が望ましいです。
また、ファイル名には先頭にファイルの作成日時が自動的に追加されます。
rails g migration add_image_name_to_users
「rails g model」とマイグレーションファイル
これまで「rails g model」によって生成されてきたマイグレーションファイルは、changeメソッドの中身が自動生成されていました。
なので、マイグレーションファイルの中身を特に変更すること無く、そのまま「rails db:migrate」コマンドを実行することでデータベースに変更を反映することができていました。
カラムを追加するマイグレーションファイル
今回は自分でchangeメソッドの中身を書く必要があります。
カラムを追加する場合には左の図のように、
「add_column :テーブル名, :カラム名, :データ型」とします。
changeメソッドの中身を追加したら、「rails db:migrate」でデータベースに変更を反映します。
class AddImageNameToUsers < ActiveRecord::Migration[5.0]
def change
# usersテーブルにimage_nameカラムを追加するコードを追加してください
add_column :users, :image_name, :string
end
end
ユーザー登録時に初期画像を保存しよう
ユーザー登録時に、image_nameカラムの値が「default_user.jpg」になるようにしましょう。
createアクション内の@userを定義しているところで、newメソッドの引数としてimage_nameを追加するようにします。
users_controller.rb
def create
@user = User.new(
name: params[:name],
email: params[:email],
# 引数を追加し、初期画像が設定されるようにしてください
image_name: "default_user.jpg"
)
if @user.save
flash[:notice] = "ユーザー登録が完了しました"
redirect_to("/users/#{@user.id}")
else
render("users/new")
end
end
ビューに画像を表示しよう
ユーザー画像を表示するためには、今まで画像を表示してきた時と同様に、HTMLのタグを用います。
画像はpublic/user_imagesフォルダに保存されているので、src属性の値は「/user_images/ファイル名」とする必要があります。
Rubyのコード部分は<%= %>で囲む必要があることに注意しましょう。
“>
show.html.erb
<%= @user.name %>
<%= @user.email %>
<%= link_to("編集", "/users/#{@user.id}/edit") %>
画像選択ボタン
file
左の図のようにタグに「type=”file”」を追加することで、右の図のように画像ファイルを選択するボタンを表示することが出来ます。
また、ここではname属性は「image」としておきましょう。
multipart : true
multipart
画像の送信は特殊なので、form_tagに{multipart: true}を追加する必要があります。
詳しく理解する必要はないので、「画像を送信したいときには{multipart: true}をつける必要がある」ということだけ覚えておきましょう。
<%= form_tag("/users/#{@user.id}/update", {multipart: true}) do %>
ユーザー名
ファイルを作成しよう
public フォルダに画像ファイルを作成するために、ファイルを作成する方法を学ぶ必要があるな。
画像は、右図のようにコンピュータから見ると、コンピュータ用の文字で書かれたファイルなのじゃ。
しかし、それ以外はテキストファイルなどと同じで、普通のファイルと言って良い。
まずは簡単なテキストファイルを用いて、 Ruby のコードでファイルを作成・保存する方法を見ていくぞ！
Rubyのコードでファイルを作成しよう
write
Rubyのコードでファイルを扱うには、Rubyに元から用意されてあるFileクラスを用います。
ファイルを作成するためには、Fileクラスのwriteメソッドを使います。
左の図のように、「File.write(ファイルの場所, ファイルの中身)」とすることで、ファイルを作成することができます。
■ ターミナルで以下のコマンドを実行してください
rails console
■ コンソールで以下のコマンドを実行してください
File.write(“public/sample.txt”, “Hello World”)
画像を保存しよう
ファイル名をデータベースに保存する
まず、ファイル名をデータベースに保存する方法をみてみましょう。
nameやemailを更新した時と同じように、@user.image_nameの値を上書きします。
ファイル名は右の図のように、「ユーザーのid.jpg」となるようにしましょう。
画像を受け取る
次に、publicフォルダ内に画像を保存する方法をみてみましょう。
画像ファイルも他のnameやemailと同様に、params[:image]とすることで受け取ることができます。
params[:image]の中には、送信された画像ファイルに関する情報が入っています。ここで受け取る画像ファイルを利用して、publicフォルダ内に画像を作成します。
画像の保存
readbinwrite
画像を保存するには、画像データを元に画像ファイルを作成する必要があります。ファイルを作成するためにはFileクラスを用います。ただし、前ページで学習したように画像データは特殊なテキストファイルであるため、File.writeではなくFile.binwriteを用いる必要があります。図のように変数imageに対し、readメソッドを用いることでその画像データを取得できます。
画像が存在するか判定する
画像を保存する処理は、画像データが送信された場合だけ実行しましょう。
下の図のように画像が送信された時にだけ画像を更新するように、画像が送信されたかを判定するif文を追加しましょう。
# 画像を保存する処理を追加してください
if params[:image]
@user.image_name = “#{@user.id}.jpg”
image = params[:image]
File.binwrite(“public/user_images/#{@user.image_name}”, image.read)
end