Ruby on Rails 6.0のAction Textを触ってみた。

これは 😺TECHSCORE Advent Calendar 2019😺の19日目の記事です。

今年の8月にRuby on Rails(以下Rails)の最新バージョンとなる 6.0 がリリースされました。
RailsはTECHSCOREブログで何度か取り上げているフレームワークです。

いくつか新機能が追加されていますが、
その中で Action Text という機能が面白そうだったため触ってみました。

 

Action Text とは

Action Text はリッチテキストを簡単に作成、編集、表示することができるフレームワークを提供します。

(公式ブログの内容を意訳)
https://weblog.rubyonrails.org/2018/10/3/introducing-action-text-for-rails-6/

すなわち「HTMLやCSSの知識がなくても文章の修飾や画像の挿入などができるエディタ」
が提供されるということになります。

リッチテキストエディタ自体は、もともとgem(Rubyのライブラリ)で提供されていたようですが、
今回のバージョンアップで本体に組み込まれるようになりました。
 

Action Text を使ってみる。

それでは、実際にAction Text を使ってみます。

Railsのインストール方法などは、公式ガイドにお任せしますので、
rails new(Railsアプリのひな型を作るコマンド)で生成されたアプリをもとに
プログラムを実装していきます。

 

画像を扱うために ImageMagick をOS側にインストールします。
参考:https://imagemagick.org/script/download.php

 

次にRailsでImageMagickを利用するための設定を行います。

Gemfile

上記保存後、bundle installをします。

 

データベースのマイグレーションをします。

 

基本的な設定はできたので、モデルやコントローラ、ビューに設定を書き加えていきます。

app/models/playground.rb

app/controllers/playgrounds_controller.rb

app/views/playgrounds/_form.html.erb

app/views/playgrounds/show.html.erb

 
 
ここまで実施すれば基本的な設定は完了です。
rails s などのコマンドでサーバを立ち上げて確かめてみましょう。


action_textの検証
※ 画像をクリックすると動きます。


このような感じで、複雑な設定を行わずにリッチテキストを扱うことができました。
 

エディタをちょっといじってみる。

Action Text で提供されるリッチテキストエディタは Trix と呼ばれるものが利用されています。
公式によると見た目をカスタマイズできるらしいので試してみます。



 
action_textをインストールした際 app/assets/stylesheets フォルダ以下に
actiontext.scss ファイルが生成されていますので、こちらを編集していきます。

trixのCSSをもとに作成しています。

app/assets/stylesheets/actiontext.scss

※ボタン画像はapp/assets/images 以下に保存しています。
 
試してみた結果がこちらです。
今回は入力欄の枠とボタンの画像を変更してみました。



 

まとめ

今回はRails 6.0 の新機能である Action Text の基本的なところについて触れました。
公式から提供されているだけあって簡単に導入でき、様々な応用が利きそうな機能だと感じました。

ただし今回触れたものはあくまでも基本だけですので、
実務でAction Text を使うためには、さらに理解を深める必要がありそうです。

Comments are closed, but you can leave a trackback: Trackback URL.