画像投稿機能（ActiveStorageの導入）

内容

画像投稿も実装するため、再度新規投稿機能の見直しから

新規投稿機能の見直し

1. Googleマップを埋め込む

新規投稿の上部にGoogleマップの埋め込み機能を使用して、マップを表示
GoogleMapsAPIの導入も考えているが、余裕があれば追加実装で行う

新規投稿機能で画像アップロード機能を追加（まずは1枚のみ）

1. Active Storageの導入

まずはImageMagickをHomebrewからインストール
ターミナル

% brew install imagemagick

続いてGemをインストールし、ローカルサーバーを再起動 Gemfile

# Gemfileの一番下に記述する

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

ターミナル

% bundle install
% rails s

続いてActive Storageをインストール
ターミナル

% rails active_storage:install
% rails db:migrate

Sequel Proを確認し、DBが存在すればOK

2. postsテーブルに画像ファイルを紐付ける

postsテーブルとActive Storageのテーブルで管理された画像ファイルのアソシエーションを記述
app/models/post.rb

class Post < ApplicationRecord
  has_one_attached :image
end

この時、postsテーブルにカラムを追加する必要はない

3. 画像の保存を許可するストロングパラメーターにする

imageという名前でアクセスできるようになった画像ファイルの保存を許可する実装を行う
app/controllers/posts_controller.rb

private

def post_params
  params.require(:post).permit(~, :image).merge(user_id: current_user.id)
end

4. 画像アップロード機能を表示

ビュー、CSSを編集
app/views/posts/new.html.erb

<%= f.file_field :image %>

5. Postモデルの単体テストコード修正

ダミー画像を用意
「public」ディレクトリの中に「images」というディレクトリを作成し、ダウンロードした画像を、imagesディレクトリの中に配置
FactoryBotの編集
afterメソッドを用いて、生成するダミーデータに画像を添付
spec/factories/posts.rb

after(:build) do |post|
  post.image.attach(io: File.open('public/images/test_image.png'), filename: 'test_image.png')
end

テストコードを実装し、テストを実行
ターミナル

bundle exec rspec spec/models/post_spec.rb

stashしたブランチを元に戻し、投稿一覧表示機能の修正

1. ビュー、ファイルの修正

保存した画像を表示
image_tagメソッドを記述して、画像を表示させる
なお、投稿画像が存在しない場合は、no imageファイルを表示する
app/views/posts/index.html.erb

<%= image_tag post.image, class: 'post-image' if post.image.attached? %>
<%= image_tag 'noimage.png', class: 'post-image' unless post.image.attached? %>

no imageファイルを表示させようとしたが、最初下記エラーが出た
Sprockets::Rails::Helper::AssetNotFound
The asset "noimage.png" is not present in the asset pipeline.
これはasset配下に画像ファイルが存在しないため起こるエラーである
→テストコードの実装の時にpublic配下に画像を保存していたので、それでいけると思ってしまった
その他も投稿内容を一覧表示させるよう編集
ついでにヘッダー、フッターも少し編集

※検索機能、人気順表示、いいね機能等も実装予定だが、別のブランチで作業する

2. rubocop

次回

マイページを実装し、個人の投稿一覧表示ができるようにする