ProtoSpace実装で苦戦したところ2

前回から3回に分けて、発展編の実装課題であるProtoSpace実装の際に自分が詰まったところについてアウトプットしています。内容については以下の通りです。

[目次] 

  1. MVCを実行する一連の流れ
  2. 画像投稿機能
  3. Herokuでのデプロイ

 

今回は、2. 画像投稿機能について書いていこうと思います。

画像投稿機能実装に関しては、Active Storageというツールを用いました。

詳細な内容はテキストの内容と重複するので、記述は避けますが、僕が頭の中で整理されていないと行けないと考える実装の流れを以下のようにまとめました。

 

・ツールの導入

以下のa)およびb)を導入。

a) 画像アップロード機能

・Active Storage(Gem

b) 画像加工ツール

ImageMagickHomebrewからインストール) 

・MiniMagick(Gem

ImageMagickGem) 

 

・画像の保存機能実装

a) 画像の添付

・ has_one_attachedメソッド(モデルファイルに以下のように記述)

f:id:takuya_karatsu:20201114181552j:plain

has_one_attachedメソッド使用例

 b)  画像の保存を許可するストロングパラメータの設定

→permit(:content, :image)...のようにhas_one_attachedメソッドで定義したファイル名の保存を許可する

 

・保存した画像の表示

・image_tagメソッド

ファイル名がimageの場合、以下のように記述

<%= image_tag モデル名.image %>

 

以上、3つの流れをきちんと理解していることが、Active Storageを用いた実装の上では大事だと感じました。(ちなみに、僕は実装時点で全く整理できておらず、苦労しました...)

次回は、最後の"3. Herokuでのデプロイ"について書いていこうと思います。