📝 ActionText って何？
Rails でリッチテキストを扱うのに便利な ActionText という機能を試してみました。
ActionText を使うと、太字・画像・リンク付きの文章を簡単に入力・保存・表示できる らしく、学ぶ機会があったため、実際に動かしてみました。
例えば、ブログの記事やコメント機能で「装飾付きのテキストを書きたいなあ」ってときにすごく便利です。
実装できた時は、エクセルやワードを思い出しました。
Rails 標準機能の Trixエディタ を自動で組み込んでくれるので、特別な設定は不要なようです。
アウトプットのために、残しておきます。
🔧 ActionText をインストールする
1. ActionText のインストール
まずは、Rails アプリのルートディレクトリで以下のコマンドを実行します。
bundle exec rails action_text:install
これで、
-
db/migrate/xxxxxx_create_action_text_tables.rbというマイグレーションファイルが作成される -
app/javascriptに Trix エディタが追加される -
app/assets/stylesheets/actiontext.scssが作成される
…といった準備が自動で進むはず。
2. SCSS にスタイルを追加（重要！）
私は、そのままだとなぜか Trix エディタが正しく動かなかったので、以下のコードを app/assets/stylesheets/application.scss に追記。
@import 'actiontext';
@import 'trix/dist/trix.css';
もしエディタがうまく表示されない場合は、これを試してみてください。（参考程度に）
3. マイグレーションを実行
次に、作成されたマイグレーションファイルを適用します。
bundle exec rails db:migrate
これで、リッチテキスト用のデータを保存する action_text_rich_texts テーブルが作成される。
🏗 実際に使ってみる
1. モデルに ActionText を追加
リッチテキストを使いたいモデルに has_rich_text を追加します。
class Article < ApplicationRecord
has_rich_text :content
end
これで、content というリッチテキストのフィールドが使えるようになりました。
（普通はテーブルに content カラムを追加するけど、ActionText を使うと action_text_rich_texts テーブルに自動で保存されるので、カラム追加は不要！）
2. フォームにリッチテキストエディタを追加
記事を作成するときのフォームにリッチテキストエディタを追加します。
<%= form_with model: @article, local: true do |f| %>
<div>
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div>
<%= f.label :content %>
<%= f.rich_text_area :content %>
</div>
<%= f.submit "投稿する" %>
<% end %>
rich_text_area を使うだけで、Trixエディタが使えるようになルはず。
3. 記事を表示する
作成した記事を表示するときは、普通に @article.content を出力。
<h1><%= @article.title %></h1>
<div>
<%= @article.content %>
</div>
これだけでリッチテキストが反映されました。
🗑 ActionText を削除するには？
「やっぱり普通のテキストに戻したい…」ってときのために、ActionText の削除方法もメモしておきます。
1. モデルから削除
まず、has_rich_text の行を削除します。
class Article < ApplicationRecord
# has_rich_text :content （この行を削除！）
end
2. データベースの変更を元に戻す
以下のコマンドを実行して、action_text_rich_texts テーブルを削除します。
bundle exec rails db:rollback STEP=1
または、マイグレーションファイルを削除した後に、
bundle exec rails db:migrate
を実行してもよい。
3. 関連ファイルの削除
ActionText のインストール時に追加されたファイルを削除します。
rm -rf app/javascript/trix
rm -rf app/assets/stylesheets/actiontext.scss
また、config/importmap.rb に pin "trix" などの記述がある場合は削除。
📌 まとめ
✅ ActionText を使うと リッチテキスト（画像・装飾つきテキスト）を簡単に扱える。
✅ has_rich_text :content を追加するだけで データベースのカラム追加は不要。
✅ Trixエディタ が自動で使えるので、設定いらず。
✅ SCSS に @import を追加すると、エディタが正常に動作する可能性あり。
✅ 不要になったら簡単に削除できる。
🔗 参考リンク
以上、超初学者が ActionText をインストールしてみた記録でした。
引き続き、学習を続けます。