0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

rails6.1でActionTextやってみた

Last updated at Posted 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モデルにテーブルが3つできているかと思います。

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 %>

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

3. 確認

http://localhost:3000/posts
スクリーンショット 2021-11-14 17.16.43.png

http://localhost:3000/posts/new
スクリーンショット 2021-11-14 17.32.37.png

http://localhost:3000/posts/1
スクリーンショット 2021-11-14 17.34.17.png

http://localhost:3000/posts
スクリーンショット 2021-11-14 17.35.38.png

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

4. ActionTextの問題点

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

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

5. 参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?