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

# 環境
```
$ rails -v
Rails 6.1.4.4

$ ruby -v
ruby 3.0.2

macOS Monterey
version　12.3
```

デモ
![名称未設定.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/76d47081-5093-39a4-5c91-556302a2835a.gif)



# 参考記事
https://railsguides.jp/active_storage_overview.html

https://railsguides.jp/action_text_overview.html

https://cloudinary.com/documentation/rails_activestorage

https://devcenter.heroku.com/ja/articles/active-storage-on-heroku

# アプリの作成

```
$ 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のインストール
```ruby: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
```
モデルに追加
```ruby: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をインストールしてください！

http://www.imagemagick.org/script/download.php#windows

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

# デプロイに関して
デプロイする際は、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からの卒業