Rails 6 の新機能 Action Text を試す

Rails 6 では Action Text と呼ばれるライブラリが使えるようになるとの発表がありました。どんなライブラリかというと、リッチなテキストエリアを簡単に実装できるライブラリです。こういうやつ。

f:id:alea12:20181004115400p:plain

edge rails を使えば手元でも試すことができるようなので、試してみました。まだ α プレビューなので破壊的な仕様変更があるかもしれませんが、練習として。

rails new

GitHub から rails/rails を clone してきた状態で試すのが確実なようです。

$ ./rails/railties/exe/rails new blog --edge

走らせると rails 関連ファイルの生成に続いて webpacker のセットアップが行われ、 yarn コマンド経由で JS ライブラリもインストールされます。

Action Text のインストール

2018-10-04 時点では Action Text は Rails 6 に同梱されていないので、 Gemfile に追記が必要です。このあたりの作業は Rails 6 リリースまでには不要になるでしょう。

gem 'actiontext', github: 'rails/actiontext', require: 'action_text'
gem 'image_processing', '~> 1.2'

終わったら $ bundle install しましょう。上記 gem を追加すると、action_text 系のコマンドが使えるようになります。

$ ./bin/rails action_text:install

上記コマンドで以下が生成されます。

  • app/assets/stylesheets/actiontext.scss
  • test/fixtures/action_text/rich_texts.yml
  • app/views/active_storage/blobs/_blob.html.erb
  • db/migrate/20181004020408_create_active_storage_tables.active_storage.rb
  • db/migrate/20181004020409_create_action_text_tables.action_text.rb
  • yarn add https://github.com/rails/actiontext も走る

Action Text では「リッチテキストエリアを使って編集するデータ」を所属するテーブルではなく、action_text_rich_texts という専用のテーブルに切り出して格納します。ここで生成されているマイグレーションファイルは当該テーブルを作成するためのものです。このあたり Active Storage に考え方が似ていますね。DB を作成し、マイグレーションを流しておきましょう。

$ ./bin/rails db:create db:migrate

scaffold

例として、タイトル及び本文からなるブログの記事を管理する Post というModel と、関連する Controller / View を生成します。

$ ./bin/rails g scaffold post title:string
$ ./bin/rails db:migrate

ここで注意したいのは、本文を管理する content のようなカラムは必要ないということです。先述の通りリッチテキストは action_text_rich_texts に格納されることになります。マイグレーションまで済んだら、一度 $ ./bin/rails s/posts が動くか確認してみましょう。この段階ではタイトルしか表示 / 編集できないはずです。

f:id:alea12:20181004112058p:plain

Action Text の適用

app/models/post.rb を下記のように編集します。has_rich_textAction Text をインストールすると使えるようになるクラスメソッドです。

class Post < ApplicationRecord
  has_rich_text :content
end

post.content を扱えるように Controller / View に以下のような追記を行います。

  • app/controllers/posts_controller.rb
def post_params
  params.require(:post).permit(:title, :content)
end
  • app/views/posts/_form.html.erb
<div class="field">
  <%= form.rich_text_area :title %>
</div>
  • app/views/posts/show.html.erb
<%= @post.content %>

ここまで進んだ状態で http://localhost:3000/posts/new にアクセスすると、リッチテキストエディタが表示されます。長い行の文字列を入力すると、自動的にテキストエリアが広がります。

f:id:alea12:20181004113431p:plain

Active Storage との連携で、Drag & Drop で画像を配置することもできます。

f:id:alea12:20181004114849g:plain

感想

  • 一瞬でリッチテキストエリアが実装できるのはうれしい。 Active Storage との連携も良い感じ
  • 便利だが、これが Rails に同梱されることの必然性に欠ける気もする
  • スマホでの表示が気になる(試してない)
  • ネーミングが気になる。Action Text というワードからリッチなテキストエリアを連想できる人がいるのか…?

参考

weblog.rubyonrails.org trix-editor.org