Rails6が出る前にActionTextを試してみる

ActionText ことはじめ

この記事は、2019年にリリースされる(らしい)Rails6に新しく導入されるActionTextをRails6が出る前に触ってみようという記事です。
正式リリースまでにいろんなものが変わると思いますので、2018/11/13時点で正しく動く状態を確認していますが、そのうち動かなくなるかもしれません。ご注意ください。

TL;DR

Action Text is coming to Rails 6! Rich text editing and display by virtue of the Trix editor. It's never been so easy to get all the pieces, complete with image galleries and uploads, working in a web app. https://t.co/BQqzFm7X64

— DHH (@dhh) 2018年10月4日

DHHのyoutube見ると一通りわかります。
(youtubeには字幕機能と字幕の自動翻訳機能もついているので、英語が苦手な方でも十分見れると思います。)

ActionTextのGitHub: https://github.com/rails/actiontext
TrixのGitHub: https://github.com/basecamp/trix
Trix: https://trix-editor.org/

ActionText とは　

https://weblog.rubyonrails.org/2018/10/3/introducing-action-text-for-rails-6/
2018年10月初めに発表されたRailsの新しいフレームワークです。Railsの時期メジャーバージョンのRails6で導入されます。

ActionTextによってWYSIWYGがRailsに簡単に導入できます。
ActionTextは、WYSIWYGエディタであるTrixと、画像アップローダであるActiveStorageを使うようになっています。

Trix とは

https://trix-editor.org/
https://github.com/basecamp/trix/

Trix自体はRailsとは全く関係なく、WYSIWYGエディタのJSのライブラリです。
Railsとは関係ないですが、RailsとおなじくBasecampで開発され使われています。
リポジトリを見れば分かる通り数年前からあるライブラリです。

ActionText + ActiveStorage

Trixでは画像のdrag&dropにも対応していて、ActionTextではその画像のアップロードにActiveStorageを採用しています。
現状のActionTextの実装をぱっと見る限りでは、Shrineなどの別の画像アップロードライブラリに差し替えるのは難しそうです。

ActionTextを試す　

ここでは新しくrails newをしたアプリでActionTextを試してみます。
基本的にはDHHのYoutubeにある通りにやればできます。

rails new

一番注意しなければ行けないのがここです。
GitHubのmasterブランチをcloneしてきてrails newを実行してください。
gem install railsで入るrailsのバージョン(現在は5.2.1)ではうまくいかないです。

• GitHubからrailsをclone
  • https://github.com/rails/rails
• `/railties/exe/rails new blog --edge

rubygemsにあるrailsだとうまくいかないのは、webpackerやActiveStorage周りの設定がないためです。

これ以降は基本的には https://github.com/rails/actiontext#installing にあるとおりです。

ActionTextのinstall

• Gemfile gem "actiontext", github: "rails/actiontext", require: "action_text" gem "image_processing", "~> 1.2"
• rails action_text:install
• rails db:migrate

scaffold + ActionTextの導入

Post というモデルをscaffoldで作ってそこのにActionTextを使えるようにします。

• rails g scaffold post title:string
• rails db:migrate
• modelの編集 app/models/post.rb

class Post < ApplicationRecord
  has_rich_text :content
end

• formの編集 app/views/posts/_form.html.erb

<div class="field">
  <%= form.rich_text_area :content %>
</div>

• controllerの編集 app/controllers/posts_controller.rb

def post_params
  params.require(:post).permit(:title, :content)
end

• showページの編集 app/views/posts/show.html.erb

<p>
  <%= @post.content %>
</p>

これでActionTextによってpostsがかけるようになっているはずです
rails s でサーバーを起動し localhost:3000/postsにアクセスしてみてください。

Sprockets::FileNotFound in Posts#index
Showing /Users/vivid_muimui/project/tmp/actiontext-sample/app/views/layouts/application.html.erb where line #8 raised:

couldn't find file 'trix/dist/trix' with type 'text/css'
Checked in these paths: 
  /Users/vivid_muimui/project/tmp/actiontext-sample/app/assets/config
  /Users/vivid_muimui/project/tmp/actiontext-sample/app/assets/images
  /Users/vivid_muimui/project/tmp/actiontext-sample/app/assets/stylesheets

もし上記のエラーが出る場合、 config/initializers/assets.rb に次の行を追加しサーバーを再起動してみてください。

Rails.application.config.assets.paths << Rails.root.join('node_modules')

sample project

一通りやったものがありますのでうまく動かなかったりした場合に参考にして見てください。

ポイント

ActionText, Trixを導入する上で論点になりそうなポイントを紹介します。
(実際本番環境で運用したことはないので、漏れがあったり的外れなことがあったらすみません。)

railsアプリであれば導入が圧倒的に簡単・早い

これまでに見てきた手順で動くので、とりあえず試してみるには圧倒的に便利です。
ただ、webpacker・ActiveStorageの環境が用意されている必要はあります。

画像アップロードがActiveStorageにべったり

Post has_one ActionText::RichText
ActionText::RichText has_many ActiveStorageのattachments

という関係なので、ActionText(Trix)経由の画像アップロードを別のライブラリに差し替えるのは大変です。大変というより、ActionTextは使わずに参考にして、新規に実装したほうが良い気がします。

画像アップロードライブラリが決まっていない・まだ使っていないのであればActiveStorageを使ってしまうのが良いでしょう。

WYSIWYGの機能はとてもベーシック

trixを触ってみてもらえればわかると思いますが、とてもベーシックな機能だけが実装されています。
一般の方が記事を投稿するようなサイトには十分マッチする可能性はあると思います。機能が豊富すぎても複雑で使われない・イタズラされて見た目が酷い記事が投稿されてしまう、などがあるので。
ですが、CMSやredmineなどのようなサイトにとっては機能が全然足りず、追加の実装が必要になるでしょう。

スマホでの画像アップロードのUIがない

PCではdrag&dropで画像がアップロードできますが、スマホではdrag&dropはできないので実装が必要になります。
みたいなアイコンを用意し、タップしたらスマホのギャラリーが開くといった実装になると思います。

Basecampで使われていたものなので安心感が高い

実績があるというのはやっぱりなんだかんだ安心しますよね!

正式リリースがされるまでどうなるかわからない

今でも十分動くとは思いますが、そうはいっても正式リリースはされていないので油断はできません。

まとめ

WYSIWYGの機能がマッチするアプリケーションではとても便利！