画像投稿

私が作成しているアプリケーション「Yamashiru」を受けて気になった点や復習した方が今後の役に立つと思って作成しています。

さらにエンジニア初心者の方に向けて タメになる情報をお届けします。

今回は、、、

画像投稿について

SNS等でよく使用される画像投稿について、今回はActive Storageというアップロードツールを使用して紹介します。

Active Storageとは

ファイルアップロード機能を簡単に実装できるGemです。指定のコマンドを実行するだけで簡単に導入が出来ます。

画像加工ツールの導入

Active Storageでファイルをアップロードして保存した後、画像を加工してから（サイズや色など）表示できるようにします。

ImageMagick

% brew install imagemagick

MiniMagick

Gemfile

gem 'mini_magick'

ImageProcessing

Gemfile

gem 'image_processing', '~> 1.2'

上記が入力終えたら

% bundle install

Active Storage

% rails active_storage:install

% rails db:migrate

画像の保存

先ほど作成したActive Storageのテーブルに、画像を保存するための実装を行います。

has_one_attached

各レコードとファイルを1対1の関係で紐づけるメソッド。

使い方イメージ

class モデル < ApplicationRecord
  has_one_attached :ファイル名
end

Tweetsテーブルで投稿する場合

class Tweet < ApplicationRecord
  belongs_to :user
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to :theme
  belongs_to :prefecture
  belongs_to :mountain_name
  belongs_to :climbing_time
  belongs_to :mountain_view
  belongs_to :stamina
  belongs_to :danger


  has_one_attached :image

  validates :title, :image, presence: true
  with_options numericality: { other_than: 1, message: "can't be blank"} do
  validates :theme_id
  validates :prefecture_id
  end
end

アソシエーションが組めた後は画像の保存を許可するストロングパラメーターをcontrollerに記述

  private

  def tweet_params
    params.require(:tweet).permit(:title, :image, :theme_id, :prefecture_id, :mountain_name_id, :climbing_time_id, :mountain_view_id, :stamina_id, :danger_id).merge(user_id: current_user.id)
  end

画像の表示

保存した画像をブラウザ上で表示させるために今回はRailsのヘルパーメソッドであるimage_tagを使用して、簡単に画像を参照します。

image_tag

img要素を生成するRailsのヘルパーメソッドです。

使い方イメージ

# ファイルをモデルから指定する場合
<%= image_tag モデル.画像ファイル %>
<%= image_tag user.avatar %>

# app/assets/ディレクトリ下の画像ファイルパスでも指定できる
<%= image_tag 画像ファイルのパス %>
<%= image_tag "avatar.png" %>

いかがでしたでしょうか？ 1個ずつ落ち着いて実施出来れば簡単な操作になりますので是非ご活用下さい！