【Ruby on Rails 6】Action Textでリッチテキストエディタを導入してみよう

Action Textとは?

Action Textの実装手順

1.アプリケーション作成

「sample_app」という名前のアプリケーションを作成して、「sample_app」のディレクトリに移動しましょう。

rails new sample_app

cd sample_app

2.scaffoldを使用してTweetモデル作成

scaffoldを使用してtitleというカラム（stirng型）とcontentというカラム（text型）を持つTweetモデルを作成しましょう。

rails g scaffold Tweet title:string content:text

rails db:migrate

3.Action Textをインストール

Action Textをインストールするコマンドを実行します。

Action Textをインストールすると、migrationファイルが生成されるので、「rails db:migrate」というコマンドを実行しましょう。

rails action_text:install

rails db:migrate

4.画像変換処理で必要なライブラリをインストール

画像変換処理で必要なライブラリをインストールしていきましょう。

Gemfile内の「gem ‘image_processing’, ‘~> 1.2’」がコメントアウトされているので外して保存しましょう。

#以下の行がコメントアウトを外す。

gem 'image_processing', '~> 1.2'

次にbundle installをします。

bundle install

次にimagemagickをインストールしましょう。

・Macの場合
brew install imagemagick

・Ubuntuの場合
sudo apt-get install imagemagick

・CentOSの場合
sudo yum install imagemagick

5.モデルの編集

リッチテキストを追加できるように「tweet.rb」に「has_rich_text:content」と追記しましょう。

class Tweet < ApplicationRecord
    has_rich_text :content
end

6.ビューの編集

リッチテキストが表示されるようにビューを編集しましょう。

「text_area」を「rich_text_area」と編集しています。

<div class="field">
　<%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>

7.コントローラーの編集

コントローラーのストロングパラメーターを修正しましょう。

def tweet_params
　params.require(:tweet).permit(:title, :content)
end

8.Action Textが利用できるか確認

サーバーを起動し、「tweets/new」にアクセスすると以下のようにしっかりと表示されました。

オススメの参考書一覧

Ruby on Rails 6 実践ガイド impress top gearシリーズ

Ruby on Rails 6 実践ガイド[機能拡張編]

パーフェクト Ruby on Rails　【増補改訂版】

まとめ