オリジナルアプリ作成記 10 ~ 画像の投稿 ~

チャット画面にて画像の投稿をできるように実装する。

Active Storage
Active Storageは画像を投稿するためのGem。
Railsに最初から統合されている。

Image Magick
Image Magickという画像加工ツールをダウンロードする。
画像の作成、サイズ変更、保存形式の変更などができるようになる。
Image MagickはソフトウェアなのでHomebrewでダウンロードする必要がある。
さらにこのImage Magickを使用するためには、Mini MagickというGemをインストールする。

おまけに画像のサイズ変更をするためには、ImageProcessingというGemをインストールする必要がある。

Image Magick = Mini Magick + Image Processing

とまぁこんな感じ。

image magickをターミナルでインストール。

% brew install imagemagick

Gemの追加。

gem 'mini_magick'
gem 'image_processing', '~> 1.2'

追加したなら、ターミナルでインストール。

% bundle install

これでようやくActive Storageを導入する準備ができた。

Active Storageの導入

% rails active_storage:install

するとマイグレーションファイルが生成されるのでマイグレートを実行する。

% rails db:migrate

画像の保存

画像を保存するためには対象となるモデルとアソシエーションを組む必要がある。
この場合、チャット画面(=Messageモデル)と組むことになる。

has_one_attachedを記述したモデルの各レコードは、それぞれ一つのファイルを添付することができる。
この場合はimageを添付することができるようになる。
=>Message.imageと記述することで、モデルに添付された画像へとアクセスすることができるようになる。

もちろんcontrollerでストロングパラメータの追記を行う必要もある。

前回も貼り付けた画像と同じだが
message_paramsの部分のpermitの項目にimageを追加している。

これで画像の保存ができるようになった。

保存した画像の表示

image_tagでimage要素を生成することができる。
複雑なディレクトリパスを指定しなくても、モデルから画像を呼び出して、引数に記述するだけで画像を表示することができる。
<%= image_tag message.image %>

これに加えて、画像が存在しない時に発生するエラーを防ぐために
条件分岐でattached?を記述する。
これにより画像が存在する場合のみ、image_tagが実行されるようになる。

画像の大きさは、variant(resize: ~~~)で変更することができる。
モデル.ファイル名.variant(resize: ~~~)

バリデーションの変更

画像かテキストどちらかの場合でもチャットできるように、バリデーションに条件分岐を追加する。
上の画像ですでに記述しているが、
validates :content, presence: true, unless: :was_attached?

def was_attached?
　self.image.attached?
end
の部分がこの条件分岐にあたる。
文章に対して、unlessを追加し、画像が添付されているか確かめるメソッドを定義し
添付されていなければ(unlessがfalse)文章に対してのバリデーションが行われる。
これにより、画像がなければ文章のみ投稿され、文章がなければ画像が存在しなければならないという処理になる。

次回は、実際にチャット機能を動かしてみる。