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

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

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

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

【実行環境】

OS    ：CentOS 7.6 … Windows10上にOracle VM VirtualBoxを導入して実行
Ruby  ：2.6.3
Rails ：6.0.1

【実行環境】

OS ：CentOS 7.6 … Windows10上にOracle VM VirtualBoxを導入して実行

Ruby ：2.6.3

Rails ：6.0.1

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アプリのひな型を作るコマンド)で生成されたアプリをもとに
プログラムを実装していきます。

# CRUD機能追加(playground はモデル名です)
rails g scaffold playground

# action_textをインストール
rails action_text:install

# CRUD機能追加(playground はモデル名です)

rails g scaffold playground

# action_textをインストール

rails action_text:install

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

# libをインストール
yum install https://imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-libs-7.0.9-8.x86_64.rpm

# 本体をインストール
yum install https://imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-7.0.9-8.x86_64.rpm

# libをインストール

yum install https://imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-libs-7.0.9-8.x86_64.rpm

# 本体をインストール

yum install https://imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-7.0.9-8.x86_64.rpm

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

Gemfile

# 以下の行がコメントアウトされているので外して保存する。
gem 'image_processing', '~> 1.2'

1 2	# 以下の行がコメントアウトされているので外して保存する。 gem 'image_processing', '~> 1.2'

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

bundle install

1	bundle install

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

rake db:migrate

1	rake db:migrate

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

app/models/playground.rb

class Playground < ApplicationRecord
    has_rich_text :content
end

class Playground < ApplicationRecord

has_rich_text :content

end

app/controllers/playgrounds_controller.rb

def playground_params
  params.require(:playground).permit(:content)
end

def playground_params

params.require(:playground).permit(:content)

end

app/views/playgrounds/_form.html.erb

# 下記のコードがリッチテキストエリアになりますので、適切な場所に追加します。
<div class="field">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>

# 下記のコードがリッチテキストエリアになりますので、適切な場所に追加します。

<%= form.label :content %>

<%= form.rich_text_area :content %>

</div>

app/views/playgrounds/show.html.erb

# 下記のコードがcontent(=リッチテキスト)を表示する箇所になります。
<%= @playground.content %>

1 2	# 下記のコードがcontent(=リッチテキスト)を表示する箇所になります。 <%= @playground.content %>

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

※ 画像をクリックすると動きます。

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

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

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

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

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

app/assets/stylesheets/actiontext.scss

trix-editor {
  border: 5px outset #bbb;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url(bold.png); 
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url(italic.png); 
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url(strike.png); 
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url(link.png); 
}

trix-editor {

border: 5px outset #bbb;

}

trix-toolbar .trix-button--icon-bold::before {

}

trix-toolbar .trix-button--icon-italic::before {

}

trix-toolbar .trix-button--icon-strike::before {

}

trix-toolbar .trix-button--icon-link::before {

}

※ボタン画像はapp/assets/images 以下に保存しています。

試してみた結果がこちらです。
今回は入力欄の枠とボタンの画像を変更してみました。

まとめ

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

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