押さえておきたいWeb知識 
オススメのサービス!!
Ruby on Rails 6でWebアプリケーションを構築している時、Action Textによるリッチテキスト機能を実装したいと考えている方はいないでしょうか?
そんな方向けにAction Textを導入する手順を分かりやすく解説していきます。
リッチテキスト機能を実装したい人
リッチテキスト機能の実装手順を知っている人
Action TextはRuby on Rails 6から追加された機能で、エディターとデータベースを簡単に用意することができます。
目次
1.Action Textとは?
Action TextはRuby on Rails 6から追加された機能でエディターとデータベースを簡単に実装できます。
Action Textが提供する機能は以下の通りです。
- WYSIWYGエディター
- モデル
- ヘルパーメソッド
WYSIWYGエディターとは編集中の画面に表示されるものと同じものが、最終結果として得られるようなアプリケーションのことです。
2.Action Textの実装手順
それでは簡単なアプリケーションを作成しながら、Action Textの実装手順を解説していきます。
1.アプリケーション作成
「sample_app」という名前のアプリケーションを作成して、「sample_app」のディレクトリに移動しましょう。
|
1 2 3 |
rails new sample_app cd sample_app |
2.scaffoldを使用してTweetモデル作成
scaffoldを使用してtitleというカラム（stirng型）とcontentというカラム（text型）を持つTweetモデルを作成しましょう。
|
1 2 3 |
rails g scaffold Tweet title:string content:text rails db:migrate |
3.Action Textをインストール
Action Textをインストールするコマンドを実行します。
Action Textをインストールすると、migrationファイルが生成されるので、「rails db:migrate」というコマンドを実行しましょう。
|
1 2 3 |
rails action_text:install rails db:migrate |
4.画像変換処理で必要なライブラリをインストール
画像変換処理で必要なライブラリをインストールしていきましょう。
Gemfile内の「gem ‘image_processing’, ‘~> 1.2’」がコメントアウトされているので外して保存しましょう。
|
1 2 3 |
#以下の行がコメントアウトを外す。 gem 'image_processing', '~> 1.2' |
次にbundle installをします。
|
1 |
bundle install |
次にimagemagickをインストールしましょう。
|
1 2 3 4 5 6 7 8 |
・Macの場合 brew install imagemagick ・Ubuntuの場合 sudo apt-get install imagemagick ・CentOSの場合 sudo yum install imagemagick |
5.モデルの編集
リッチテキストを追加できるように「tweet.rb」に「has_rich_text:content」と追記しましょう。
|
1 2 3 |
class Tweet < ApplicationRecord has_rich_text :content end |
6.ビューの編集
リッチテキストが表示されるようにビューを編集しましょう。
「text_area」を「rich_text_area」と編集しています。
|
1 2 3 4 |
<div class="field"> <%= form.label :content %> <%= form.rich_text_area :content %> </div> |
7.コントローラーの編集
コントローラーのストロングパラメーターを修正しましょう。
|
1 2 3 |
def tweet_params params.require(:tweet).permit(:title, :content) end |
8.Action Textが利用できるか確認
サーバーを起動し、「tweets/new」にアクセスすると以下のようにしっかりと表示されました。
3.オススメの参考書一覧
Ruby on Rails 6 実践ガイド impress top gearシリーズ
Ruby on Rails 6 実践ガイド[機能拡張編]
パーフェクト Ruby on Rails 【増補改訂版】
SAMURAI ENGINEER Plus+
リクナビ NEXT
