[Rails]Action Textでリッチテキストを作ろう！

はじめに

Rails6で追加されたActionTextにリッチテキストコンテンツと編集機能を導入出来ます。
今までは自分で実装していたので、便利な機能だと思い、使い方を調べてみました！

使用方法

1.ActionTextのセットアップを行い、rails db:migrateを実行する。

$ rails action_text:install

$ rails db:migrate

2.埋め込み画像や他の添付ファイルを扱うため、ActiveStorageのセットアップを行う。

[参考]

3.使用するモデルにリッチテキストのフィールドを追加する。

app/models/message.rb

class Message < ApplicationRecord
  has_rich_text :content
end

4.ビュー側でヘルパーメソッドを使用する。

<%= form_with(model: message) do |form| %>
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
<% end %>

5.リッチテキストを保存するためにコントローラーを設定する。

app/controllers/messages_controller.rb

class MessagesController < ApplicationController
  def create
    message = Message.create!(message_params)
    redirect_to message
  end

  private

  def message_params
    params.require(:message).permit(:content)
  end
end

利用時の注意点

N+1問題における注意

ActionTextは、ActionText::RichTextというモデルで管理されています。そのため、このリッチテキストが別テーブルで管理されていることを意識しないとN+1問題に遭遇します。
解決策として、専用のeager_load用メソッドがあり下記の2つです。
※「name」には、has_rich_textに渡した引数が入ります。

• with_rich_text_#{name}
• with_rich_text_#{name}_and_embeds

app/controllers/messages_controller.rb

class MessagesController < ApplicationController
  ...
  def index
    @messages = Message.with_rich_text_content
  end
end

カスタマイズにおける注意

セットアップ時に、app/assets/stylesheets/actiontext.scssが生成されています。デザインを編集したい場合は、このファイルを修正するか、別のファイルを作成しましょう。
また、添付された画像のビューは、app/views/active_storage/blobs/_blob.html.erbで定義されています。このファイルを編集することで画像の見た目を整えられます。

終わりに

簡単な手順ではありますが、リッチテキストを導入できました！
正しい手順を踏めば誰でも導入可能だと思うので、ぜひお試しあれ！

参考

[Action Text の概要]
(https://railsguides.jp/action_text_overview.html)