【Rails6】Action Textの導入方法をサンプルコード付きで解説

Rails6の新機能「Action Text」の導入方法をサンプルコード付きで解説します。

当ポートフォリオサイトでもAction Textを導入しており、この記事もAction Textが生成したエディタを使って書いています。
1.png 139KB

これは先日投稿した記事の編集画面です。
見て分かる通り、編集画面の中で文字の大きさを変更したり画像を挿入したりしています。この点がAction Textの最大の特徴です。
このように、見たままのものを実際に作成出力することをWYSIWYGといいます。
WYSIWYGはタグやMarkdown記法を知らない人でも簡単にリッチな文章が書けるので、IT関係にあまり詳しくない人にとっては大変便利なものだと思います。

私事ですが、私はIT関係にあまり詳しくない人からブログ機能を持つWebサイト作成を依頼されたことがあります。
ちょうどそのときRails6がリリースされたばかりで、知り合いからAction Textのことを教えてもらい、これ幸いとばかりに導入したのでした。

前置きが長くなってしまいましたが、次の章からAction Textの導入方法を解説していきます。
なお、今回は以下のバージョンでアプリを作成しています。
  • Rails 6.0.1

導入

まずはいつもの通り新しいRailsアプリを作成するところからはじめましょう。
$ cd ~/Product/
$ rails new test_app
...
✨  Done in 164.40s.
Webpacker successfully installed 🎉 🍰
続いて、ScaffoldでArticle一式を作成します。
Articleはタイトルと本文を持ちますが、本文は後で追加するのでここではタイトルのみ作成しています。
マイグレートも忘れずに。
$ cd test_app
$ rails g scaffold Article title:string
...
$ rails db:migrate
この時点でいったんテストサーバーを起動し画面を表示してみます。
$ rails s
http://localhost:3000/articleにアクセス。
2.png 3.1KB

ちゃんと作成できてます。

ここからAction Textの導入です。
Action Textをインストールするには以下のコマンドを実行します。
$ rails action_text:install
...
✨  Done in 22.07s.
Adding trix to app/javascript/packs/application.js
      append  app/javascript/packs/application.js
Adding @rails/actiontext to app/javascript/packs/application.js
      append  app/javascript/packs/application.js
Copied migration 20191207184505_create_active_storage_tables.active_storage.rb from active_storage
Copied migration 20191207184506_create_action_text_tables.action_text.rb from action_text
マイグレーションファイルが作られたので以下を実行します。
$ rails db:migrate
次にモデルを変更していきます。
app/models/article.rbを以下のように変更します。
class Article < ApplicationRecord
  has_rich_text :content
end
Action TextのデータはArticleモデルにではなく、Articleモデルに関連付いた専用のテーブルに格納されます。
追加した一行はその関連付けを行っています。

続いてビューです。
新規投稿・編集のフォームに本文を追加します。
app/views/articles/_form.html.erbを以下のように変更します。
...
  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>

    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
...
同様に、個別ページにも本文を追加します。
app/views/articles/show.html.erbを以下のように変更します。
...
<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>

<p>
  <strong>Content:</strong>
  <%= @article.content %>
</p>
...
本文(content)を追加したので、コントローラーの必須パラメーターにも追加します。
app/controllers/articles_controller.rbを以下のように変更します。
...
    # Never trust parameters from the scary internet, only allow the white list through.
    def article_params
      params.require(:article).permit(:title, :content)
    end
end
たったのこれだけです。
Railsのすごいところは、少ないコマンドやコーディングであっという間にいろいろなことができてしまうことだと思います。

http://localhost:3000/articles/newにアクセスします。
3.png 14KB

タイトルの下に本文が追加されてますね。
4.png 320KB

画像を貼り付けて投稿してみます(画像でかすぎた…😱)。
ちなみに画像はツールバーのクリップマークのボタン、もしくはドラッグ&ドロップのどちらでも追加できます。
5.png 325KB

ちゃんと表示もできてますね!

まとめ

今回はRails6の新機能「Action Text」の導入方法をサンプルコード付きで解説しました。
以下の記事ではAction Textでアップロードする画像の保存先を、Amazon S3やGCSに変更する方法を解説しています。

【Rails6】Action Textでアップロードする画像の保存先をAmazon
https://www.autovice.jp/articles/37