Rails7.1 | 動画学習アプリ作成 | 22 | アクションテキスト(ActionText) - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【21 | プロジェクトとタスクモデル】 << 【ホーム】 >> 【23 | コントローラー】

Ruby on Railsで利用できるAction Textを使えば、リッチテキストフィールドを簡単に統合できます。
Action Textを導入する手順を順を追って説明します。

Gemfileに「mini_magick」のgemを記述します。
「image_processing」も必要ですが、すでに入っているはずです。
これにより画像表示もできるようになります。

# action text
gem 'mini_magick', '~> 4.12'

ターミナルで以下のコマンドを実行して、Gemをインストールします。
コマンド
bundle

Action Textのインストールジェネレータを実行します。
ターミナルで以下のコマンドを実行します。
コマンド
rails action_text:install

このコマンドにより、Action Text用のマイグレーションファイルとJavascriptファイルが生成されます。

マイグレーションを実行して、データベースに必要なテーブルを作成します
コマンド
rails db:migrate

AmazonS3を導入していますので、リッチテキストの中に画像をアップロードためにAmazonS3のアクセス許可の設定をしなければなりません。
アクセス許可のタブの下部にある「Cross-Origin Resource Sharing (CORS)」の項目に以下の記述を追加して保存します。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

モデル

「app\models\project.rb」ファイルを以下の内容に更新します。
「has_rich_text」はaction textのカラム、「has_many_attached」はactive storageのカラムを定義しています。

１．6行目に以下の記述を追加します。

has_rich_text :description
has_many_attached :images

２．10行目に以下の記述を追加します。

validates :description, presence: true, length: { maximum: 500 }

記述追加　【app\models\project.rb】

class Project < ApplicationRecord

  belongs_to :user
  has_many :tasks

  has_rich_text :description
  has_many_attached :images
  
  validates :name, presence: true, length: { maximum: 50 }
  validates :description, presence: true, length: { maximum: 500 }
  validates :price, presence: true, numericality: { only_integer: true }
end

「app\models\task.rb」ファイルを以下の内容に更新します。

１．4行目に以下の記述を追加します。

has_rich_text :description

２．9行目に以下の記述を追加します。

validates :description, presence: true, length: { maximum: 500 }

app\models\task.rb

class Task < ApplicationRecord
  belongs_to :project

  has_rich_text :description

  validates :title, presence: true, length: { maximum: 50 }
  validates :video, presence: true
  validates :tag, presence: true
  validates :description, presence: true, length: { maximum: 500 }
  validates :project, presence: true
end

trestle

trestleでリッチテキストが使えるようにします。

記述追加　GemFile(86行目)

gem 'trestle-tinymce', '~> 0.3.1'

プロジェクト管理

trestleでプロジェクトの管理ができるようにします。
コマンド
rails g trestle:resource Project

プロジェクトテーブルに「有効化」「無効化」を格納するカラムを作成します。

コマンド
rails g migration AddActiveColumToProject active:boolean

記述追加　db\migrate\20200802102348_add_active_colum_to_project.rb
3行目に「, default: false」の記述を追加しています。

class AddActiveColumToProject < ActiveRecord::Migration[7.1]
  def change
    add_column :projects, :active, :boolean, default: false
  end
end

コマンド　マイグレーション適用
rails db:migrate

「app\admin\projects_admin.rb」ファイルを以下のように編集します。

記述編集　app\admin\projects_admin.rb

Trestle.resource(:projects) do

  menu do
    item :プロジェクト, icon: "fa fa-address-card"
  end

  table do
    column :name
    column :active
    column :user, -> (obj) { obj.user.full_name }
    column :price
    column :created_at, align: :center
    actions do |toolbar, instance, admin|
      toolbar.link '有効化', admin.path(:activate, id: instance.id), method: :post, class: 'bg-success'
      toolbar.link '無効化', admin.path(:deactivate, id: instance.id), method: :post, class: 'bg-danger'
    end
  end

  controller do
    def activate
      project = admin.find_instance(params)
      project.update(active: true)
      flash[:message] = "プロジェクトが有効化されました"
      redirect_to admin.path(:show, id: project)
    end

    def deactivate
      project = admin.find_instance(params)
      project.update(active: false)
      flash[:message] = "プロジェクトが無効化されました"
      redirect_to admin.path(:show, id: project)
    end
  end

  routes do
    post :activate, on: :member
    post :deactivate, on: :member
  end

  form do |project|
    select :user_id, User.where(active: true)
    text_field :name
    editor :description
    text_field :price
  end

  search do |query|
    if query
      Project.where("name ILIKE ?", "%#{query}%")
    else
      Project.all
    end
  end

end

ブラウザ確認
http://localhost:3000/admin/projects

プロジェクトの登録が出来るようになりました。

リッチテキストが使用できます。

画像のアップロードはできません。
「trestle-active_storage」がRails7.1で非対応になってしまったためです。

タスク管理

タスクの管理モデルを作成します。

コマンド
rails g trestle:resource Task

タスクモデルに「有効化」「無効化」を格納するカラムを作成します。

コマンド
rails g migration AddActiveToTask active:boolean

記述追加　db\migrate\20200802105846_add_active_to_task.rb
3行目に「, default: false」の記述を追加しています。

class AddActiveToTask < ActiveRecord::Migration[7.1]
  def change
    add_column :tasks, :active, :boolean, default: false
  end
end

コマンド　マイグレーション適用
rails db:migrate

「app\admin\tasks_admin.rb」ファイルを編集します。

記述編集　app\admin\tasks_admin.rb

Trestle.resource(:tasks) do

  menu do
    item :タスク, icon: "fa fa-star"
  end

  table do
    column :tag
    column :title
    column :active
    column :header
    column :video
    actions do |toolbar, instance, admin|
      toolbar.link '有効化', admin.path(:activate, id: instance.id), method: :post, class: 'bg-success'
      toolbar.link '無効化', admin.path(:deactivate, id: instance.id), method: :post, class: 'bg-danger'
    end
  end

  controller do
    def activate
      task = admin.find_instance(params)
      task.update(active: true)
      flash[:message] = "プロジェクトが有効化されました"
      redirect_to admin.path(:show, id: task)
    end

    def deactivate
      task = admin.find_instance(params)
      task.update(active: false)
      flash[:message] = "プロジェクトが無効化されました"
      redirect_to admin.path(:show, id: task)
    end
  end

  routes do
    post :activate, on: :member
    post :deactivate, on: :member
  end

  form do |task|
    check_box :header
    select :project_id, Project.where(active: true)
    text_field :tag
    text_field :title
    editor :description
    text_area :note
    text_field :video
  end

  search do |query|
    if query
      Task.where("title ILIKE ? OR note ILIKE ?", "%#{query}%", "%#{query}%")
    else
      Task.all
    end
  end
  
end

ブラウザ確認
http://localhost:3000/admin/tasks

タスクの新規登録が出来るようになりました。

ヘッダーを作成する場合は「header」にチェックを入れます。
タスクを登録するプロジェクトを選択できます。
tagに入れる数字はタスクをソートするときに使用します。
リッチテキストが使用できます。
videoのフィールドにはビデオのコードを入れます。
noteフィールドにはこの後実装するMarkdown関数の記述が入力できます。