rails6.1でActionTextやってみた

# 1. 開発環境
大まかには以下の通りです。
* M1 Mac
* ruby 3.0
* rails 6.1.4.1

:::note warn
ActionTextはrails6から使えるらしい
:::

https://github.com/taiki-nd/action-text

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

https://qiita.com/taiki-nd/items/e436dd90700787cead1e

# 2. 実装開始

## 2.1 アプリの作成と初期設定
``rails _6.1.4.1_ new action-text -d mysql``
でアプリを作成。
``cd action-text``
で移動しておく。

```ruby: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の実装
いよいよメインのところ。

```ruby:app/model/post.rb
class Post < ApplicationRecord
  has_rich_text :content
end
```

```ruby:app/controller/post_controller.rb
def post_params
  params.require(:post).permit(:title, :content)
  # contentを追記
end
```

```erb: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 %>

```

```erb: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 %>
```

以上のように各々のファイルを編集していく。

# 3. 確認
``http://localhost:3000/posts``
![スクリーンショット 2021-11-14 17.16.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645779/d9a4e3c1-09a2-ad10-ccef-0fc07e5cc420.png)

``http://localhost:3000/posts/new``
![スクリーンショット 2021-11-14 17.32.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645779/bd0f8c3a-5b8d-d5d0-41b4-ad731e50f539.png)

``http://localhost:3000/posts/1``
![スクリーンショット 2021-11-14 17.34.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645779/54b90fcb-6088-728c-f00b-84f79b279faf.png)

``http://localhost:3000/posts``
![スクリーンショット 2021-11-14 17.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645779/7fbefe5c-80d7-ccc2-d2a4-a4b588823593.png)

記事が追加されActionTextの導入が完了する。

# 4. ActionTextの問題点

* 子タイトルまでで孫タイトルまで設定できない
* 画像にリンクの紐付けができない

今後自分自身のブログを持つ際に不便を感じるような気がする。

# 5. 参考文献
https://railsguides.jp/action_text_overview.html