Ruby on Rails5 ProgateVII ユーザーのプロフィール画像設定

2020年1月24日 20:55

・初期状態の画像の設定
・編集画面からのプロフィール画像編集

仕組み

データベースに画像のファイル名を保存しておき、そのファイル名の画像を表示する。
usersテーブルに画像カラムを増やす。

*画像はpublicフォルダに保存

カラムの追加方法

　マイグレーションファイルの作成
　マイグレーションファイル内容のデータベースの反映

　マイグレーションファイルのみを作成する
*rails g model image_name:stringだとモデルとマイグレーションファイルが作成されてしまう
*マイグレーションファイル・・・データベースを生成する際の設計図。
マイグレーションファイルを実行することにより、その内容に基づいたデータテーブルを生成してくれる。

$ rails g migration　コマンドを使う

$ rails g migration [ファイル名]
　
$ rails g migration add_image_name_to_users
     *//追加するカラム名を含めると望ましい

↑ db/migrateに[20200121075256_add_image_name_to_users.rb]みたいなのが追加されてる

↑migtateファイルに空のchangeメソッドが定義されている　
*まだデータベースに変更を加える支持が書かれていないのでマイグレーションファイルとして完成していない

マイグレーションファイルの仕組み

rails db:migrateメソッドはマイグレーションファイルの中のchange メソッドを実行するするためのコマンド

changeメソッドの中にテーブルの変更内容を記述する
　　*rails g model コマンドで生成したマイグレーションファイルは changeメソッドの中身が自動生成されている

「add_column :テーブル名, :カラム名, :データ型」でカラムを追加

[20200121075612_add_image_name_to_users.rb]

def change
  add_column :users, :image_name, :string
             :テーブル名, :カラム名, :データ型
end

↑　マイグレーションファイルの中身を作成したらrails db:mirateでテーブルに変更が反映

初期画像の設定

新たにユーザーが登録される際に、初期画像(URL)が保存されるようにする

今回の場合createアクションの中で設定

[users_controller.rb]
def create
 @user = User.new(
   name: params[:name]
   email: params[:email]
   image_name: "default_user.jpg"   //ここ！
    
   〜
)

end

↑　これで新規登録した際にデータベースに画像名も保存されるようになった

ユーザー画像の表示

ユーザー一覧とユーザー詳細ページで画像を表示する

ビューに画像URLをかく

<img src="<%= "/user_images/#{@user.image_name}" %>">

画像を送信する

ユーザーごとに画像を編集できるようにする

・画像追加のフォームを追加

[html.erb]
<input name="image" type="file"> 
 //　neme属性はimage, typeをfileに

上記で画像選択のボタンを表示できる

画像の送信は特殊なのでform_tagに{multipart: true}を追加

[html.erb]
<%= form_tag( "/〜", {multipart: true}) do %>
　　//画像を送信したいときは{multipart: ture}をつける

  <input name="image" type="file"> 

<% end %>

ファイルを作成しよう

上記で画像をアップロードする準備はできた

updateアクションで
データベースに画像ファイル名を保存、publicフォルダに画像を保存する

public フォルダに画像ファイルを作成するために、ファイルを作成する方法

Rubyのコードでファイル作成
・Rubyに元から用意されている「Fileクラス」を使う
・Fileクラスの「writeメソッド」でファイルを作成

[rails console]

File.write("public/sample.txt", "Hello World")
File.write("ファイルの場所", "ファイルの中身")

上記をコンソールで行うとファイル作成
*今回はテキストファイル

送信された画像を保存する

上記のファイル作成方法を応用して送信された画像ファイルを保存する。

updateアクションに以下の機能をつける
・ファイル名をデータベースに保存
・public フォルダ内に画像を作成

・ファイル名をデータベースに保存

nameやemailを更新した時と同じように、@user.image_nameの値を上書

[users_controller.rb]
def update
 @user = User.find_by(id: params[:id])
 @user.name = params[:name]
 @user.email = params[:email]
 
 @user.image_name = "#{@user.id}.jpg"  //これ！
 
 if @user.save
   〜
end

・画像を受け取る (publicフォルダ内に画像を保存)

[users_controller.rb]
def update
 image = params[:image] //送信されたファイルの情報が入っている
end

・画像の保存

画像を保存するには、画像データを元に画像ファイルを作成する必要がある。

画像データは特殊なテキストファイルであるため、File.writeではなくFile.binwriteを用いる必要がある

変数imageに対し、readメソッドを用いることでその画像データを取得できる

[users_controller.rb]
def update 
 File.binwrite("public/user_images/#{@user.image_name}", image.read)

 File.binwrite(   "ファイルの場所",                         ファイルの中身)

end

画像が存在するか判定する

画像保存の処理は画像が送信された場合のみ行う。

画像が送信されたか判定する if文を追加する。

[users_controller.rb]
def update
  if params[:image] //画像が送信されているか判定する
    @user.image_name.save
    image = params[:image]
    File.binwrite("...", image.read)
    
  ~

  end
end