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

# ActionText ことはじめ :new: 

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

# TL;DR :dash: 

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Action Text is coming to Rails 6! Rich text editing and display by virtue of the Trix editor. It&#39;s never been so easy to get all the pieces, complete with image galleries and uploads, working in a web app. <a href="https://t.co/BQqzFm7X64">https://t.co/BQqzFm7X64</a></p>&mdash; DHH (@dhh) <a href="https://twitter.com/dhh/status/1047647795056848896?ref_src=twsrc%5Etfw">2018年10月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

# ActionText とは　:question: 

https://github.com/rails/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を試す　:rocket:

ここでは新しく`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
- `<cloneした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`

```ruby
class Post < ApplicationRecord
  has_rich_text :content
end
```

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

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

- controllerの編集 `app/controllers/posts_controller.rb`

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

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

```erb
<p>
  <%= @post.content %>
</p>
```
これでActionTextによってpostsがかけるようになっているはずです :tada: 
`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` に次の行を追加しサーバーを再起動してみてください。

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

### sample project :pencil: 

https://github.com/vividmuimui-sandbox/actiontext-sample/

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

# ポイント :bulb: 

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

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

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

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

https://github.com/rails/actiontext/blob/master/app/models/action_text/rich_text.rb#L15


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

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

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

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

https://trix-editor.org/

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

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

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

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

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

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

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

# まとめ

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