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日
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
- `/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の機能がマッチするアプリケーションではとても便利!
Author And Source
この問題について(Rails6が出る前にActionTextを試してみる), 我々は、より多くの情報をここで見つけました https://qiita.com/vivid_muimui/items/999dc9698138d73d47b1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .