「押さえておきたいWeb知識」で検索お願いします!

[Ruby on Rails 6] Action Textでリッチテキスト機能を導入してみよう!

Ruby on Rails 6でWebアプリケーションを構築している時、Action Textによるリッチテキスト機能を実装したいと考えている方はいないでしょうか?

そんな方向けにAction Textを導入する手順を分かりやすく解説していきます。

リッチテキスト機能を実装したい人

Action Textによるリッチテキスト機能を実装したいな!
Action Textによるリッチテキスト機能の実装手順を解説するね!

リッチテキスト機能の実装手順を知っている人

Action TextはRuby on Rails 6から追加された機能で、エディターとデータベースを簡単に用意することができます。

1.Action Textとは?

Action TextはRuby on Rails 6から追加された機能でエディターとデータベースを簡単に実装できます。

Action Textが提供する機能は以下の通りです。

  • WYSIWYGエディター
  • モデル
  • ヘルパーメソッド
WYSIWYGエディターとは?

WYSIWYGエディターとは編集中の画面に表示されるものと同じものが、最終結果として得られるようなアプリケーションのことです。




2.Action Textの実装手順

それでは簡単なアプリケーションを作成しながら、Action Textの実装手順を解説していきます。

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

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

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

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

3.Action Textをインストール

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

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

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

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

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

次にbundle installをします。

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

5.モデルの編集

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

6.ビューの編集

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

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

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

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

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

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

3.オススメの参考書一覧

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です