2020年12月7日

プログラミング

ActionTextとrails5系でも使えるWYSIWYGエディターgemをいろいろ試してみた

目次

  1. はじめに
  2. 導入
  3. ActionText
  4. trix
  5. froala
  6. summernote
  7. ActionTextをRails5.2に導入する
  8. まとめ

はじめに

今日はRails6.0から導入されたActionTextのようなWYSIWYGエディターをRails5系でも使いたかったので、Rails5系で使えるWYSIWYGエディターgemをActionTextの機能とも比較しながら紹介していこうと思います!

導入

ActionTextとは?

ActionTextはRailsにリッチテキストコンテンツと編集機能を導入できる、Rails6.0からの新機能です。いわゆる WYSIWYGエディターを簡単に自分のアプリケーションに導入することができます。

WYSIWYGエディターって?

「What You See Is What You Get」の頭文字をとったもので、自分が見ているまま編集画面の状態でHTMLなどに出力できるエディターのことです。書式設定やリンク、画像埋め込みなどを簡単に扱うことができます。

Rails5系では使えないの?

実はActionTextをRails5系に導入する方法もあるのですが(後述)、
WYSIWYGを簡単に導入できるgemがいくつかあります!

使用できるgem

  • trix
  • froala
  • summernote

今回はActionTextと上記のgemで導入できるエディターの導入方法と基本的な機能を紹介していこうと思います。

実際に使ってみる

今回試した環境は以下になります。

Rails6環境(ActionText)

  • Ruby: 2.6.6
  • Rails: 6.0.3
  • MySQL: 5.7
  • Docker

Rails5環境(trix、froala、summernote)

  • Ruby: 2.5.3
  • Rails: 5.2.2
  • MySQL: 5.7
  • Docker

ActionText

RailsガイドのActionTextDHHのYoutubeを参考にしつつActionTextを導入していきます。

ステップ1

Gemfileに以下を追記してbundle install。

gem 'actiontext'
gem 'image_processing', '~> 1.2'
ステップ2

適当なモデルを作成し、以下を実行します。

rails action_text:install
rails g scaffold post title:string
rails db:migrate

ステップ3

エディターを利用したいModelファイルに以下を追加。
※contentは適当な名前でOK

has_rich_text :content

contollerのStrongParamerterにも追加。

params.require(:post).permit(:title, :content)
ステップ4

_form.html.erbファイルに以下を追加。

<%= form.rich_text_field :content >
見た目や機能など

actiontext_rails6.gif (23.7 MB)

機能自体はシンプルですが最低限の機能は備わっており、ファイルのアップロードもActiveStrageをそのまま使用できるのでrailsアプリへの導入がとても楽だと感じました。また、独自のデザインでのカスタマイズも可能です。

rails action_text:install後にmigrateを行うとで本文を保存するテーブルとファイルを保存するテーブルが作成されるので、最初から画像だけ取り出すことができるのもとても良いなと感じました。
デフォルトの機能だと画像のリサイズがエディター内でできないのですが、/app/views/active_storage/blobs/_blob.html.erbを編集することでリサイズするサイズを設定できます。

trix

trixはRuby onRailsを作成したBasecampが開発しているエディターです。
trixは画像を保存する場合はshrineも一緒に入れてあげる必要があります。
shrineの設定後、アップロード用のjsを作成する必要があります。

ステップ1

Gemfileに以下を追記してbundle install

gem 'trix'
ステップ2

適当なモデルを作成し、以下を実行します。

rails g scaffold post title:string content:text
rails db:migrate
ステップ3

app/assets/javascripts/application.jsに以下の行を追加

//= require trix
ステップ4

app/assets/stylesheets/application.cssに以下の行を追加

*= require trix
ステップ5

_form.html.erbファイルを編集する。

<div class="field">
<%= form.label :content %>
<%= form.text_area :content, id: :post_content %>
<trix-editor input="post_content"></trix-editor></div>
ステップ6

showにはサニタイズしたcontentを渡すか、show.html.erbでサニタイズして表示させる。

<%= sanitize @post.content >

上記サニタイズを行う場合、本番環境では許可する要素と属性を明示的に指定するなどの点に気をつけてください!

見た目や機能など

trix_rails5.gif (14.6 MB)

見た目や機能はほとんどActionTextと同じですが、画像のリサイズがエディター内でできるのがとても良いです!
上記のようにhidden_fieldの箇所をtextareaにすることで、コードを確認しながら編集できるのも良いです。
画像のアップロードをする場合はJSでエンドポイントを作成しなくてはならないので、本番環境にも導入する場合などはセキュリティ面などを気をつける必要がありそうだな、と感じました。

froala

froalaは高性能なエディターで、pluginの数もとても豊富です。日本語化なども容易にできる優れものです。

froalaは有料のeditorのため、無課金のまま本番環境で使用するとfroalaのクレジットが入ります。クレジットの表示を削除したい場合は有料登録が必要になります。

ステップ1

Gemfileに以下を追記してbundle install。

gem 'wysiwyg-rails'
gem 'font-awesome-rails', '~&gt; 4.7', '&gt;= 4.7.0.5'
gem "jquery-rails"
ステップ2

適当なモデルを作成し、以下を実行します。

rails g scaffold post title:string content:text
rails db:migrate
ステップ3

app/assets/javascripts/application.jsに以下の行を追加。

//= require rails-ujs
//= require jquery
//= require activestorage
//= require turbolinks
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js
//= require languages/ja.js
//= require_tree .
ステップ4

app/assets/css/application.cssに以下の行を追加。

*= require froala_editor.min.css
*= require froala_style.min.css
*= require font-awesome
*= require plugins/char_counter.min.css
*= require plugins/code_view.min.css
*= require plugins/colors.min.css
*= require plugins/emoticons.min.css
*= require plugins/file.min.css
*= require plugins/fullscreen.min.css
*= require plugins/image_manager.min.css
*= require plugins/image.min.css
*= require plugins/line_breaker.min.css
*= require plugins/quick_insert.min.css
*= require plugins/table.min.css
*= require plugins/video.min.css
ステップ5

_form.html.erbの下部に以下を追加。


<li class="c-article-step__item">
ステップ6

showにはサニタイズしたcontentを渡す。またはshow.html.erbでサニタイズして表示させる。

&lt;%= sanitize @post.content &gt;
見た目や機能など

floala_rails5.gif (27.7 MB)

有料なのもあり、かなり機能が豊富!UIも直感的でわかりやすく使いやすかったです!
こちらも画像のアップロードをする場合はJSでエンドポイントを作成が必要になります。

summernote

summernoteはbootstrapを使用したWYSIWYGエディターです。
gemはこちら

ステップ1

Gemfileに以下を追記してbundle install

gem 'jquery-rails'
gem 'bootstrap'
gem 'simple_form'
gem 'summernote-rails', '~&gt; 0.8.10.0'
gem 'autoprefixer-rails'
ステップ2

適当なモデルを作成し、以下を実行します。

rails g scaffold post title:string content:text
rails db:migrate
ステップ3

app/assets/javascripts/application.jsに以下の行を追加

//= require jquery
//= require rails-ujs
//= require popper
//= require bootstrap
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require activestorage
//= require turbolinks
//= require_tree .
ステップ4

app/assets/javascripts/summernote-init.coffeeを作成し、以下を記入。

$(document).on 'turbolinks:load', -&gt;
$('[data-provider="summernote"]').each -&gt;
$(this).summernote
height: 300
ステップ5

_form.html.erbファイルに以下を追加。

<div class="field">
  <%= form.label :content %>
<%= form.text_area :content , 'data-provider': :summernote %></div>
見た目や機能など

summetnote_rails5.gif (5.8 MB)

全て無料なのにfroalaエディター並に機能が豊富で、個人的な使用感ではかなり気に入りました!
こちらも画像のアップロードをする場合はJSでエンドポイントを作成が必要になります。
また、デフォルトだと画像もtextの一部として保存されるので、切り離したい場合はcarriewaveなどを使って他modelのカラムとして切り離して保存してあげる必要があります。手順はこちら
また、コードビュー機能も便利そうでした。
スクリーンショット 2020-12-07 2.13.52.png (171.7 kB)

ActionTextをRails5.2に導入する

最後に、Rails5.2にActionTextを導入する方法を紹介します!
詳細は以下の動画をチェックしてみてください。

POINT!!

webpacker・ActiveStorageの環境が用意されている必要があります。

ステップ1

Gemfileに以下を追記してbundle install。

gem 'mini_magick', '~&gt; 4.8'
gem "actiontext", github: "rails/actiontext", require: "action_text"
gem "image_processing", "~&gt; 1.2"
ステップ2

適当なモデルを作成し、以下を実行。

rails action_text:install
rails g scaffold post title:string
rails db:migrate

ステップ3

layouts/application.html.erbに以下を追加。

&lt;%= javascript_pack_tag 'application' %&gt;

webpackのエラーが起きた場合、app/javascript/packs/application.jsに以下を追加する。

Rails.application.config.assets.paths &lt; Rails.root.join('node_modules')
ステップ4

views/active_storage/blobs/_blob.html.erbの以下の記述を修正する。

# 修正前
&lt;%= image_tag blob.representation(resize_to_fit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %&gt;

# 修正後
&lt;%= image_tag blob.representation(resize: local_assigns[:in_gallery] ? "800x600" : "1024x768") %&gt;
見た目や機能などについて

actiontext_rails5.gif (26.6 MB)

rails6のActionTextと同様シンプルな機能&画像のリサイズなどはエディター上ではデフォルトでは出来ないですが、Active storageでのアップロードがそのまま使えるのでエンドポイントを自分で用意しなくていいのはとても良いなと感じました!
ただ、他の画像アップロード系のgemとは併用できないようなので、現状でcarriewaveなどのを使用している場合などはgemの切り替えなどが必要になってきそうです。

まとめ

本日はrails6のActionTextと、rails5系で使えるWYSIWYGエディターgemを紹介してきました。

いろんなエディターを試す機会はなかなかないのでとても楽しく比較調査ができました!
どのエディターも大体10分くらいで導入できたのと、機能面や使用感でも一長一短あり悩ましいですが、個人的にはsummernoteの使いやすさがお気に入りでした!

今回あまり触れられなかった、各エディターからのS3へのファイルのアップロードなどは今後も引き続き調査していきます!
また、gemを自作出来たらとても面白そうだな、とも思ったのでまずは各gemのソースを読んでみようと思います!
最後まで読んでいただきありがとうございます。

Ruby on Railsのお仕事に関するご相談

Bageleeの運営会社、palanではRuby on Railsに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

0

AUTHOR

suzuki

suzuki

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

きうち

きうち

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP