Active Storageを用いた画像投稿機能

Active Storageとは

Active Storageとは画像投稿機能を実装できるGemです。
写真を投稿して一覧表示するアプリ作成にActive　Storageを使ったので、実装方法をまとめました。

またその他にも画像加工のために色々と導入が必要になります。

・ImageMagick・・・画像の作成やサイズ変更、保存形式の変更ができるソフトウェア
　※gemでは無いのでHomebrewからインストールします
・Minimagick・・・ImageMagickの機能をRubyで扱えるようにしてくれるgemです
・ImageProcessing・・・画像サイズを調整するためのgemです

Active Storageの導入

・brew install imagemagickを行い、imagemagickをインストール

・gemを導入してbundle installを行う

qiita.rb

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

・rails active_storage:installを行い、Active Storageのインストール
・続けてrails db:migrateを行う

これでデータベースに保存する準備ができました。

画像投稿の機能

投稿機能を実装するために、以下の２つが必要です

①ActiveStorageのテーブルと関連するテーブルのアソシエーションを定義
②該当するcontroller.rbにて、imageカラムの保存を許可

まずはアソシエーションから。

qiita.rb

has_one_attached :image

続いてコントローラーで画像を保存できるようにします。

qiita.rb

  def meal_params
    params.require(:meal).permit(:date,:image).merge(user_id: current_user.id)
  end

簡単にですが、ここまでで投稿機能を作る事ができました。

投稿した画像の表示

ビューファイルは改善の余地がありますが、これで仮置きしました。

qiita.rb

<ul class='meal-list'>
  <% @meals.each do |meal| %>
    <li class='list'>
      <div class='meal-lists p-3 m-3'>
        <div class='item-img-content '>
          <%= image_tag meal.image, class: "item-img" %>
        </div>
        <h3 class='item-date'>
          <%= meal.date %>
        </h3>
        <div class="meal-description-box">
          <span><%= meal.description %></span>
        </div>
      </div>
    </li>
  <% end %>
</ul>

表示された画像はこんな形で表示されました。

まとめ

ActiveStorageを使えば簡単に画像投稿機能を作る事ができます！！