Rails6のAction Textを試してみる

このエントリーは、GMOアドマーケティング Advent Calendar 2018の 12/22 の記事です。
GMOアドマーケティングとしては初のAdvent Calendar参戦です。

GMOアドマーケティングのエンジニアS.Yです。
来年の2019年にRails6がリリースされる予定ですが、新機能のAction Textを試してみたので、紹介したいと思います。
Action Textとは、ブログなどで使われているリッチなテキストエディタ機能を簡単に実装できるものとなっています。

それでは試していきましょう!


動作環境

  • macOS High Sierra
  • Ruby 2.5.3
  • Ruby on Rails 6.0.0.alpha

環境構築

Rails6はRubyのバージョン2.4.1以降が必須なので、
Rubyのバージョンが古い場合はrbenvなどで新しいバージョンをインストールします。
新しくインストールした場合はruby versionをlocalかglobalにセットし、bundlerをインストールします。

次に必要なライブラリをインストールします。

2018年12月現在、gem installする際にrails -v=6.0.0.alphaを指定できないので、edge版を使う事になります。
DHHの動画の手順通りrailsブランチをgit cloneしてきてもwebpackerのインストールがうまく動作しなかったため、別の方法を紹介します。

rails6用のディレクトリを作成し、移動

以下を記述したGemfileを作成します。

 


Rails6プロジェクト作成

bundle installし、プロジェクトを作成します。紹介動画と同じくblogを作成します。

Gemfileに以下追記

bundle install後にaction_textをインストールします。

以下のファイルが作成されます。
app/assets/stylesheets/actiontext.scss
test/fixtures/action_text/rich_texts.yml
app/views/active_storage/blobs/_blob.html.erb
20181219153252_create_active_storage_tables.active_storage.rb
20181219153253_create_action_text_tables.action_text.rb

scaffoldで記事を投稿するモデルの雛形を作成します。
ここではtitleカラムのみ作成します。


動作確認

Rails serverを起動し、動作するか確認します。

http://localhost:3000/posts


ActionView::Template::Error (couldn’t find file ‘trix/dist/trix’ with type ‘text/css’

上記のようなエラーが出てしまいました。
trixのcssが読み込めてないようです。config/initializers/assets.rbに以下追記してサーバーを再起動します。

config/initializers/assets.rb

無事起動しましたが、scaffoldで指定した通り、入力項目はtitleしかありません。
ここからリッチテキストエディタを使えるようにそれぞれのファイルに追記していきます。


リッチテキストエディタの追加

リッチテキストエディタを表示するために以下4つのファイルに追記します。

まずはモデルにhas_rich_textを追記します。
これを記述することにより、contentがアクセサとして使えるようになります。
app/models/post.rb

次に登録・表示画面のためにviewに追記します。

form_with内に追記
app/views/posts/_form.html.erb

 

app/views/posts/show.html.erb

登録するときにcontentパラメータを信頼するようcontrollerに追記します。

app/controllers/posts_controller.rb

ここで、先ほどの記事作成画面を見てみると・・・
http://localhost:3000/posts/new
リッチテキストエディタが表示されました。


D&Dで画像を追加することもできます。


記事を編集して

Create Postボタンで登録。


投稿できました。
画像も一緒に投稿できましたが、DBはどうなっているのでしょうか?


DB

postsテーブルにはtitleしか入っていません。

追加したcontentはaction_text_rich_textsテーブルにpolymorphic関連として格納されています。

アップロードした画像はactive_storage_blobsに書き込まれ、saveした時にactive_storage_attachmentsにAction Textとの関連情報が保存されます。


まとめ

Rails6のalpha版でAction Textを試してみましたが、初期設定後は簡単なステップでリッチテキストエディタが使えるようになりました。
実際にリッチテキストエディタを作ろうと思うとwysiwygエディタとの連携や、画像やDB管理などで複雑になってしまいますが、フレームワークの機能として提供されることで、考えることが少なくなるため、メリットは大きいと思います。
alpha版ということで初期設定が複雑でしたが、本リリース後は簡単に動かせるようになると思いますし、詳細なカスタマイズもできるようになっていくと思うので、今後に期待です。

次回はRails6の新機能第二弾として、Action Mailboxを紹介したいと思います。


参考

参照年月日: 2018/12/18

参考情報入手先

■Ruby on Rails | introducing-action-text-for-rails-6
https://weblog.rubyonrails.org/2018/10/3/introducing-action-text-for-rails-6/

■Alpha preview: Action Text for Rails 6
https://youtu.be/HJZ9TnKrt7Q

明日は、mizkichの「Google Kubernetes EngineでIngressのSSLポリシー設定をTLS1.2以上に制限する」についてのお話です。
お楽しみに。

クリスマスまで続くGMOアドマーケティング Advent Calendar 2018
ぜひ今後も投稿をウォッチしてください!

■エンジニアによるTechblog公開中!
https://techblog.gmo-ap.jp/
■Wantedlyページ ~ブログや求人を公開中!~
https://www.wantedly.com/projects/199431
■エンジニア採用ページ ~福利厚生や各種制度のご案内はこちら~
https://www.gmo-ap.jp/engineer/
■エンジニア学生インターン募集中! ~有償型インターンで開発現場を体験しよう~
https://hrmos.co/pages/gmo-ap/jobs/0000027