コジマです。
※この記事は色々調べながら書いてるので、誤りあるかもしれません。
ご指摘頂くか自分で誤りに気付いたときに修正します。
こんな感じで画像アップロード機能を追加したんですよ。
（ユーザー編集画面はしれっと見た目を整えました）
アップロード手順を掲載しようかと思ったんですけど、Progateの真似事をして作って、重要なポイントがまだ押さえきれてないので重要なところを真似していくという形をとりたいと思います。
具体的な手順が知りたい人はProgateに課金してRails5のVIIで受講できるので、是非行なってください。
プログラマーになりたいと思った人がやるべき７つのこと
axiaのブログで推奨されているうちの1機能について完了です。
大きく分けると
- 画像をアップロードするフォームを作る
- 画像のファイル名をDBに保持する
- 画像を保存する
- 画像を表示する
と分けられます。
画像をアップロードするフォームを作る
form_tagにmultipartというオプションを指定します。
そうすることで、HTTPタグには
<form class="form-vertical" enctype="multipart/form-data" action="/users/17/update" accept-charset="UTF-8" method="post">
という情報がセットされます。
enctype=”multipart/form-data”
という部分が付加されます。
画像を扱う時のおまじないではなくて
複数のファイルタイプを扱うときに使うようですね。
この場合だとテキスト(type=”text”)と画像(type=”file”)ですかね。
ただ、他のpasswordとかtextboxとかはtext情報として扱えるものなのでmultipartとしなくても良いのかと思います。（詳しい人いたら教えてください。）
画像のファイル名をDBに保持する
DBにはファイル名を文字型でセットするだけなので、特に問題はないんじゃないかと思います。
画像を保存する
File.binwriteというメソッドを使用します。
rubydocによるとIOクラスのbinwriteメソッドらしいですね。
rubyの組み込みライブラリで基本的な入出力管理を司るものがIOクラス、その中でファイルアクセスを行うクラスがFileクラスとのこと。
FileクラスはIOクラスを継承しているのでFile.binwriteという使い方ができるようです。
binwriteメソッドはwriteメソッドをバイナリ対応させたメソッドです。
binwrite(書き込むパス,読み込む文字列)
という使い方をします。
アップロードのフォームからmultipartのtype=”file”からファイル情報をもらっているので、binwriteすることでファイル情報（今回は画像）を保存できる。という仕組みになっているようです。
画像を表示する
画像の表示はimage_tagにパスを指定すればいいので、
<%= image_tag("/user_images/#{@user.image_name}") %>
こんな書き方になりますね。
パスの最初に/をつけるとpublic
/を付けないとapp/assets/images
を読みにいくとのこと。
app/assets/imagesの下に保存したデータにはフィンガープリントというMD5ハッシュ値がファイル名に付加されるためにこういう可変のデータを扱うときは面倒らしいですよ。
アセットパイプラインというフレームワークが実装されていて、フィンガープリントを連結してブラウザ場で1つのファイルとしてキャッシュするから読み込み速度を高めることができるらしいです。
とまぁ、色々調べながら書いてみました。
エンジニアとしてただ使えるようになるだけでなくて、仕組みをきちんと知ることは大事だと思ってます。
フレームワークを勉強しているなら尚更。
Railsを使用した仕事がいつかできるようになるといいなと思いますね。
勉強会とかも参加しようと思っているので、そのときはまたレポしますね。
以上、コジマでした。
