はじめに
【Rails】Twitterクローンを作ってみた 〜コメント機能の作成〜の続きです。こちらを前提に進めていきますので、まだご覧になっていない方はそちらからご覧ください！※こちらはdockerでの環境構築を省きます。
サービス環境
- ruby 3.0.0
- Rails 6.0.4
- docker
- mysql 8.0.2
- Slim, SCSS
画像アップロード機能
条件
- ユーザー詳細ページの自分のアイコンをクリックでプロフィール画像をアップロードできる。
画像アップロードにはActiveRecordを使用してください。
実装流れ(簡略)
① Gemfileにgem "image_processing", ">= 1.2"を追記し、bundle install
② docker再起動
③ $ rails active_storage:install
④ db:migrate
⑤ models/profile.rbにhas_one_attached :image追記
⑥ profiles_controllers.rbを編集(必要なparamsにimageを加える)
⑦ profiles/_form.html.slim(プロフィール編集画面)を編集。cssも同様に。 ← accept条件！
⑧ profiles/show.html.slimを編集。cssも同様に。
⑨ tweets/index.html.slim(root_path), show.html.slimを編集。cssも同様に。
⑩ views/shared/_icon.htmlを作り、見た目の共通化
プロフィール編集画面
プロフィール画面(画像アップロード後)
解説
views/profiles/_form.html.slim
= form_with model: @profile, locals: true do |f|
.form-group
= f.label :name
= f.text_field :name, class: "form-control"
.form-group
= f.label :profile_text
= f.text_area :profile_text, class: "form-control"
.form-group
= f.label :profile_image
= f.file_field :image, class: "form-control", accept: 'image/jpg, image/jpeg, image/png, image/gif'
.btn-space
= f.submit '保存', class: 'btn'
今回苦労した部分はこちらです。file_fieldに拡張子を制限して、画像ファイル以外選択できないようにするということです。最初はモデルでのバリデーションで処理しようかと考えていたのですが、簡単にhtml側で処理することができるというとてもシンプルなものを知り、こちらを使用しました。(acceptを使用することで、拡張子が画像系のものしか上げなくできます。)
モデルに一つのファイルを添付する
class Profile < ApplicationRecord
belongs_to :user
has_one_attached :image
validates :name, presence: true
validates :profile_text, presence: true
end
Profileモデルに1つの画像を添付するには、has_one_attachedを使います。
:imageはファイルの呼び名で、:photo、:avatar、:hogeなど、ファイルの用途に合わせて好きなものを指定してください。ここで、Imageモデルなどを作る必要はないです。Active Storageは裏側でBlobとAttachmentモデルを使って、こそこそとprofile.imageを使えるようにしてくれます。
実装を通して学んだこと
1. Active Storageの利用方法
ファイルアップロードを行うための機能で、画像の投稿機能などが簡単に作れることを学びました。画像用ののカラムを作成することもなく、Imageモデル等も作る必要がないことを学びました。
2. acceptでの拡張子制限
html属性でfile_fieldに拡張子を制限できる方法があることを知りました。
感想
今回は簡単に機能を作成することができました！この機会でacceptでの拡張子制限等、知らないとすんなり行かないところを学べました。railsには様々な便利なgemがありますね。知らないgemの機能は無限にあると思いますが、その都度調べて使えるように自走力をつけることは非常に大事だなと感じております。
次回はomniauthを使ったGitHubログインについてアウトプットしていこうと思います！読んでいただきありがとうございました。