RailsでのActionTextとTrix（WYSIWYG）の使用方法

Ruby on Railsは、開発者にとって非常に強力で柔軟なフレームワークです。その中でも、ActionTextはリッチテキストを扱うための素晴らしい機能を提供しています。この記事では、ActionTextとTrixエディタを使用して、リッチテキストを簡単に管理する方法について詳しく説明します。

ActionTextとは？

ActionTextは、Rails 6で導入された機能で、リッチテキストコンテンツを簡単に作成、保存、表示するためのものです。これにより、開発者はHTMLを直接書くことなく、ユーザーがリッチなコンテンツを作成できるようになります。

ActionTextの主な特徴

リッチテキストの作成と編集が簡単
画像や動画などのメディアを簡単に挿入可能
コンテンツのバージョン管理が可能
ActionCableを使用したリアルタイムの更新

Trixエディタとは？

Trixは、Basecampによって開発されたオープンソースのWYSIWYGエディタです。ActionTextと組み合わせることで、ユーザーは直感的にリッチテキストを作成できます。

Trixの主な特徴

シンプルで使いやすいインターフェース
キーボードショートカットのサポート
画像やファイルのドラッグ＆ドロップが可能
カスタマイズ可能なツールバー

ActionTextとTrixのセットアップ

それでは、RailsアプリケーションにActionTextとTrixをセットアップする手順を見ていきましょう。

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

まず、Railsアプリケーションを作成します。以下のコマンドを実行してください。

rails new myapp --skip-javascript
cd myapp

2. ActionTextのインストール

次に、ActionTextをインストールします。以下のコマンドを実行してください。

rails action_text:install

これにより、必要なマイグレーションファイルが生成されます。次に、データベースをマイグレーションします。

rails db:migrate

3. Trixのインストール

Trixを使用するために、Gemfileに以下の行を追加します。

gem 'trix'

その後、以下のコマンドを実行してGemをインストールします。

bundle install

4. TrixのJavaScriptとCSSを追加

次に、TrixのJavaScriptとCSSをアプリケーションに追加します。app/javascript/packs/application.jsに以下の行を追加します。

import "trix"
import "@rails/actiontext"

また、app/assets/stylesheets/application.scssに以下の行を追加します。

@import "trix";

5. モデルの作成

次に、リッチテキストを保存するためのモデルを作成します。以下のコマンドを実行してください。

rails generate model Article title:string body:text

生成されたマイグレーションファイルを編集して、ActionTextのリッチテキストを追加します。

class CreateArticles < ActiveRecord::Migration[6.0]
  def change
    create_table :articles do |t|
      t.string :title
      t.text :body

      t.timestamps
    end
  end
end

次に、マイグレーションを実行します。

rails db:migrate

6. コントローラーの作成

次に、Articlesコントローラーを作成します。以下のコマンドを実行してください。

rails generate controller Articles

生成されたコントローラーに、以下のアクションを追加します。

class ArticlesController < ApplicationController
  def new
    @article = Article.new
  end

  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to @article
    else
      render :new
    end
  end

  private

  def article_params
    params.require(:article).permit(:title, :body)
  end
end

7. ビューの作成

次に、ビューを作成します。app/views/articles/new.html.erbに以下のコードを追加します。

<%= form_with model: @article do |form| %>
  
    <%= form.label :title %>
    <%= form.text_field :title %>
  

  
    <%= form.label :body %>
    <%= form.rich_text_area :body %>
  

  
    <%= form.submit %>
  
<% end %>

8. ルーティングの設定

最後に、config/routes.rbにルーティングを追加します。

Rails.application.routes.draw do
  resources :articles
  root "articles#new"
end

アプリケーションの実行

すべての設定が完了したら、アプリケーションを実行してみましょう。以下のコマンドを実行します。

rails server

ブラウザでhttp://localhost:3000にアクセスすると、リッチテキストエディタが表示されるはずです。タイトルと本文を入力し、送信ボタンをクリックすると、リッチテキストが保存されます。

まとめ

この記事では、RailsでActionTextとTrixを使用してリッチテキストを管理する方法について説明しました。ActionTextは、リッチテキストの作成、保存、表示を簡単に行える強力なツールです。Trixエディタと組み合わせることで、ユーザーは直感的にコンテンツを作成できます。

これで、あなたのRailsアプリケーションにリッチテキスト機能を追加する準備が整いました。ぜひ、実際に試してみてください！