More than 1 year has passed since last update.

rails6.1でActionTextやってみた

Last updated at 2021-11-15Posted at 2021-11-14

1. 開発環境

大まかには以下の通りです。

M1 Mac
ruby 3.0
rails 6.1.4.1

ActionTextはrails6から使えるらしい

比較のためmarkdownを利用したアプリのリンクを貼っておきます。

2. 実装開始

2.1 アプリの作成と初期設定

rails _6.1.4.1_ new action-text -d mysql
でアプリを作成。
cd action-text
で移動しておく。

config/database.yml

default: &default
  adapter: mysql2
  # encoding: utf8mb4
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

rails db:create
でデータベースの作成。

2.2 ActionTextの導入

gemfile

gem 'actiontext'
gem 'image_processing', '~> 1.2'

これらを追記する。
bundle install
bundle exec bin/rails action_text:install
を実行する。そうすると以下のような出力があります。

       rails  app:binstub:yarn
   identical  bin/yarn
Installing JavaScript dependencies
         run  /Users/taiki.nd/.rbenv/versions/3.0.1/bin/ruby bin/yarn add trix@^1.2.0 @rails/actiontext@^6.1.4-1 from "."
Adding trix to app/javascript/packs/application.js
      append  app/javascript/packs/application.js
Adding @rails/actiontext to app/javascript/packs/application.js
      append  app/javascript/packs/application.js
      create  app/assets/stylesheets/actiontext.scss
      create  app/views/active_storage/blobs/_blob.html.erb
       rails  railties:install:migrations FROM=active_storage,action_text
Copied migration 20211114012159_create_active_storage_tables.active_storage.rb from active_storage
Copied migration 20211114012160_create_action_text_tables.action_text.rb from action_text
      invoke  test_unit
      create    test/fixtures/action_text/rich_texts.yml

さらに以下をターミナルで実行していきます。
bundle exec bin/rails g scaffold post title:string
bundle exec bin/rails db:create db:migrate

ここまでくると、postモデルにテーブルが３つできているかと思います。

2.3 model, controller, viewの実装

いよいよメインのところ。

app/model/post.rb

class Post < ApplicationRecord
  has_rich_text :content
end

app/controller/post_controller.rb

def post_params
  params.require(:post).permit(:title, :content)
  # contentを追記
end

app/views/posts/_form_html.erb

<%= form_with(model: post) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :content %>
    <!-- 追記 -->
    <%= form.rich_text_area :content %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

app/views/posts/_form_html.erb

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<!-- 追記　-->
<%= @post.content %>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>