MyFirstRails

ActionTextを試す！

概要

Railsに初めて触れる方を対象にしたチュートリアルです

Rails6から追加されるActionTextを使用するチュートリアルです

チュートリアル

Rails6のインストール

まず、Rails6をインストールします

Rails6はRuby2.5以上でないとインストールできません 2.5より古いバージョンである場合、先にRubyのバージョンを上げておいてください

gem install rails -v '6.0.0beta3'を実行します

gem install rails -v '6.0.0beta3' --webpack=stimulus

インストールできていればOKです

Railsのひな型アプリを作る

まずはrails newを実行し、Railsアプリのひな型を作成します

rails _6.0.0beta3_ new action_text --webpack=

その後、action_textへと移動します

cd action_text

SQLite3のバージョンを修正

先ほどのrails newでsqlite3のインストールがエラーになっている場合は、以下のようにバージョンを修正します

gem 'sqlite3', git: "https://github.com/larskanis/sqlite3-ruby", branch: "add-gemspec"

その後、bundle installを実行します

bundle install

これでOKです！

ScaffoldでCRUDを作成

rails g scaffoldを使い、CRUDのひな型を作ります

rails g scaffold post title:string content:text

その後、rails db:migrateでマイグレーションを行います

rails db:migrate

最後に、config/routes.rbに以下のようにrootを設定します

Rails.application.routes.draw do
  root 'posts#index'
  resources :posts
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

あとはrails sを実行して、localhost:3000にアクセスできればOKです

ActionTextの導入

まず、bundle exec rails action_text:installを実行します

bundle exec rails action_text:install

その後、rails db:migrateを実行します

rails db:migrate

その後、app/models/post.rbにリレーションを追加します

class Post < ApplicationRecord
    has_rich_text :content
end

次に、app/views/posts/_form.html.erbのcontentにrich_text_areaを使用します

<%= form_with(model: post, local: true) 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.full_messages.each do |message| %>
        <li><%= 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 %>

最後に、Gemfileにgem 'image_processing', '~> 1.2'を追加し、

gem 'image_processing', '~> 1.2'

bundle installを実行します

bundle install

後は、rails sでローカルサーバを起動します

rails s

あとは、実際にlocalhost:3000/posts/newでテキストを入力してみてください また画像をドラッグ＆ドロップで貼り付けることもできます

これでActionTextの導入は完了です！

This site is open source. Improve this page.