Rails 6 の Action Text を利用してみる

ども、@kimihom です。

f:id:cevid_cpp:20200219155348j:plain

前回の Rails 6 の記事では、フロントエンド Webpacker 周りの調査結果を報告した。さて今回はいよいよ私の Rails 6 にしたいメイン目的である Action Text についての調査を報告しようと思う。

Action Text の特徴

Action Text を使えば、"Microsoft Word - 文書作成ソフトウェア" のような、リッチなテキストエディタを Web 上で構築することができる。従来のテキストエディタでは、エディタ内でほとんどの人にとって、謎の記号(マークダウン) 使って文章の中に埋め込む必要があった。そうじゃなくて、まさに Microsoft Word のように、書いている文章をそのまま拡大したりフォントを変えたりできるようになるのが、Action Text の大きな特徴だ。今後のブラウザ上のテキストエリアは、ほぼ間違いなくこのような形式になるのが一般的になるであろう。

f:id:cevid_cpp:20200219153642p:plain

Action Text は HTML5 の ContentEditable の拡張

TrixではcontenteditableをI/Oデバイスとして扱うことで、こうしたブラウザ間の動作のぶれを回避しました。エディタに独自の方法で入力されると、Trixはその入力を内部のドキュメントモデル上での編集操作に変換してから、ドキュメントをエディタ上で再レンダリングします。

ContentEditable をどうやったら I/O デバイスとして扱えるようになるのか全く不明なのだけど、私があれだけ苦労した ContentEditable の課題を見事クリアしているようだ。確かに、ContentEditable を生でそのまま利用すると、確実にブラウザ依存の問題が出てきてしまって、各ブラウザ対応となると永遠にクリアできないほどの複雑な仕様である。さすがは Rails、そこの課題をクリアしているとのことだ。

現時点で、ここまで ContentEditable を美しく実現したライブラリは、おそらく存在しないだろう。ContentEditable をそのまま使えば、より拡張されたテキストエリアを実現できるけど、単に高機能テキストエディタを使いたいだけなら Action Text を利用するだけで十分なはずだ。

使い始める

実際に使い始める流れは他の色々なサイトで紹介されているので、さっと案内する。

$ rails action_text:install
# create  app/assets/stylesheets/actiontext.scss
# create  test/fixtures/action_text/rich_texts.yml
# create  app/views/active_storage/blobs/_blob.html.erb
# append  app/javascript/packs/application.js
# create db/migrate/20200219052604_create_active_storage_tables.active_storage.rb
# create db/migrate/20200219052605_create_action_text_tables.action_text.rb
#
# package.json
#  "@rails/actiontext": "^6.0.2-1",
#   "trix": "^1.0.0",

$ vim Gemfile
gem 'image_processing', '~> 1.2'

$ bundle install
$ bundle exec rails db:migrate

class Message < ApplicationRecord
  has_rich_text :content
end

# 登録
<%= form.rich_text_area :content %>

# 表示
<%= @message.content %>

これだけで、リッチテキストエディタを構築できる。データベースには action_text_rich_texts, active_storage_attachments, active_storage_blobs 3つのテーブルが自動で生成される。文章のなかに画像をアップロードすると、デフォルトでは blob 形式で active_storage_blobs へ保存されるようだ。ActiveStorage と組み合わせることで、保存先を S3など、他のストレージに変更することができる。きっと、S3 へダイレクトアップロードした後に Action Text でそれを表示するといったことも可能であろう。

Action Text の CSS は app/assets/stylesheets/actiontext.scss に書かれている。これを追記・編集することで独自のスタイルのテキストエリアを構築することができる。デフォルトでは画像はフル Width だけど、それらも CSS で好きなように調節できるから便利なものだ。