Rails6 Action Text と Active Storageの実装 Cloudenaryにアップロード リッチテキスト 複数画像投稿

環境

$ rails -v
Rails 6.1.4.4

$ ruby -v
ruby 3.0.2

macOS Monterey
version　12.3

デモ

参考記事

アプリの作成

$ rails new text_strage_app
$ rails g scaffold Post title:string
$ rails db:migrate

Active Strageで画像投稿できるようにする

Active Strageのインストール

$ rails active_storage:install
$ rails db:migrate

モデルに追加

post.rb

has_many_attached :images

ストロングパラメータを追加

posts_controller.rb

def post_params
  params.require(:post).permit(:title, images:[])
end

投稿フィールドを追加

posts/_form.html.erb

<%= form.file_field :images, multiple: true %>

画像を表示

posts/show.html.erb

<% @post.images.each do |image| %>
  <%= image_tag image %>
<% end %>

ストレージの設定

config/storage.yml

cloudinary:      
  service: Cloudinary

保存先を指定

config/environments/development.rb

config.active_storage.service = :cloudinary

gemのインストール

Gemfile

gem 'cloudinary'
gem 'image_processing', '~> 1.2'

$ bundle install

APIキーの設定
Macの場合

$ EDITOR="code -w" bin/rails credentials:edit

windowsの場合

$ set EDITOR="code -w"
$ rails credentials:edit

済んだら保存、VScodeを閉じると設定が反映される

credentials.yml.enc

# aws:
#   access_key_id: 123
#   secret_access_key: 345
# ↓追記ここから
cloudinary:
  cloud_name: *********
  api_key: **************
  api_secret: ******************
# ↑追記ここまで
# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: 96dd81......　#ここは元の記述から変更しない

*****の値はCloudinaryのマイページから取得した値に変更

ちゃんと保存できているか、確認

$ rails c
irb(main):001:0> Rails.application.credentials.cloudinary[:cloud_name]
=> "abcdaiueo"
irb(main):002:0> Rails.application.credentials.cloudinary[:api_key]
=> 123456789
irb(main):003:0> Rails.application.credentials.cloudinary[:api_secret]
=> "a1b2c3d4e5f6g7h8i9"

自分が入力した値が出てくれば成功

新しいファイルを作成

config/cloudinary.yml

development:
  cloud_name: <%= Rails.application.credentials.cloudinary[:cloud_name] %>
  api_key: <%= Rails.application.credentials.cloudinary[:api_key] %>
  api_secret: <%= Rails.application.credentials.cloudinary[:api_secret] %>
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: <%= Rails.application.credentials.cloudinary[:cloud_name] %>
  api_key: <%= Rails.application.credentials.cloudinary[:api_key] %>
  api_secret: <%= Rails.application.credentials.cloudinary[:api_secret] %>
  enhance_image_tag: true
  static_file_support: false
test:
  cloud_name: <%= Rails.application.credentials.cloudinary[:cloud_name] %>
  api_key: <%= Rails.application.credentials.cloudinary[:api_key] %>
  api_secret: <%= Rails.application.credentials.cloudinary[:api_secret] %>
  enhance_image_tag: true
  static_file_support: false

以上で複数の画像投稿は完了
ちゃんと投稿できるか検証

rails s

Action Textの実装

インストール

$ rails action_text:install
$ rails db:migrate

モデルに追加

post.rb

has_rich_text :content

ストロングパラメータの追加
※permitの引数の順番に注意

posts_controller.rb

    def post_params
      params.require(:post).permit(:title, :content, images:[])
    end

記入フォームの追加

posts/_form.html.erb

  <%= form.label :content %>
  <%= form.rich_text_area :content %>

showで表示

posts/show.html.erb

<%= @post.content %>

※ここからはMac用デバッグ

画像が表示されなくて、
MiniMagick::Error (You must have ImageMagick or GraphicsMagick installed):
とログに書いてあったので、インストール

brew install imagemagick

するとこちらもエラー

Error: The following directories are not writable by your user:
/usr/local/share/man/man8

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/share/man/man8

And make sure that your user has write permission.
  chmod u+w /usr/local/share/man/man8

ログ通りに

sudo chown -R $(whoami) /usr/local/share/man/man8

を実行して、
再度試す

brew install imagemagick

うまく表示された。

※Windowsの場合はご自分でImageMagickをインストールしてください！

インストール後コマンドプロンプトとサーバーを立て直せばうまく表示されるはずです。

デプロイに関して

デプロイする際は、master.keyを本番環境に登録する必要があります。
それぞれのデプロイ先の設定に反映させてください。
herokuの場合は以下の通りです。

 heroku config:set RAILS_MASTER_KEY="config/master.keyに記述してある文字列"

また、設定も変更します。

config/storage.yml

# 以下を追加
cloudinary:
  service: Cloudinary
  cloud_name: <%= Rails.application.credentials.cloudinary[:cloud_name] %>
  api_key: <%= Rails.application.credentials.cloudinary[:api_key] %>
  api_secret: <%= Rails.application.credentials.cloudinary[:api_secret] %>

config/environments/production.rb

#　41行目付近を変更
config.active_storage.service = :cloudinary

後書き

dotenvとcarrierwaveからの卒業