Rails6 のActionText 使い方メモ

最近始めたばかりの初心者です。
私の環境なのか、よく分かりませんが、複数サイトにまたがって参考にしなければうまくできなかったので備忘として。

#開発環境

• macOS Mojave 10.14.6
• Ruby 2.6.3
• Rails 6.0.0

#どんなものができるのか
画面は最後にあげるとして、イメージはブログのコメント欄
タイトルと内容が入力でき、その内容を管理（登録、編集、削除）できるもの
とっかかりとしてはだいぶやる気が出ます（私は）

#手順
#1. まず新規アプリ作成
1.1. アプリ作成

コンソール

$ rails new blogy --webpack

• 実行場所はenvironment
• blogy:アプリ名（任意）
• --webpack：webpack環境の構築

1.2. 実行確認

コンソール

$ rails s

これで下図が表示されればOK

私の環境の場合、今のままの設定だと下記のエラーが表示される
赤字で表示される。びっくりする。

エラー

Blocked host:「アドレス」
To allow requests to 「アドレス」, add the following to your environment configuration:
config.hosts << "「アドレス」"

エラー内容としては、「アドレス」へのリクエストがブロックされている
許可するには、以下を環境設定に追加する、とのこと
記載場所はおそらくどこでも良いと思われる。試してはないけど、
私は３行目に追記しておく

blogy/config/environments/development.rb

  config.hosts << "「アドレス」"

とりあえず雛形は完成。

#2. モデル作成

コンソール

$ cd blogy
$ rails g scaffold article title:string

• 実行場所はblogy(作成したアプリフォルダ）なのでcdで移動
• scaffold：記事の登録、編集、削除を作ってくれます
• article:モデル名
• 私の環境だけかは分かりませんが、実行後少し間があいてから、ログが流れます

#３. ACtion Text導入
Gemfileを編集する

blogy/Gemfile

## 2019/10/19 Del Action Text S
##gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
## 2019/10/19 Del Action Text S

## 2019/10/19 Add Action Text S
gem 'coffee-rails', '~> 5.0'
gem 'image_processing', '~> 1.9.3'
## 2019/10/19 Add Action Text E

• 「#」が１つでコメントアウト。２つの方が分かりが良いかと思って２つにした。（日付も同様）
• 忘れずに上書き保存

コンソール

$ bundle update
$ rails action_text:install
$ rails db:migrate

• コマンドは１行ずつ実行（念のため）

#4. モデル編集

blogy/app/models/article.rb

class Article < ApplicationRecord
  ## 2019/10/19 Add Action Text S
  has_rich_text :content
  ## 2019/10/19 Add Action Text E
end

• has_rich_text：Action Textの独自メソッド。
• 上記１行だけ追記

#5. コントローラ編集

blogy/app/controllers/articles_controller.rb

      ##2019/10/19 Mod :contentを追加 
      ##params.require(:article).permit(:title)
      params.require(:article).permit(:title, :content) 

• article_paramsで許可する値としてcontentを追記

#6. View編集

blogy/app/views/articles/_form.html.erb

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

  <!-- 2019/10/19 Add S -->
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
  <!-- 2019/10/19 Add E -->

• 「:title」：元々の自動作成された記述。ラベル名：titleのテキストフィールド。
• 「:content」：追記するコントロール？ ラベル名：contentのrich_text_area。Action Textのおそらくリッチテキスト。

#7. 実行の前にルーティングの変更
これ、わかんなかった。チュートリアル飛ばしたからだろうけど。
これもこれから勉強しよう。とりあえず下記のように追記すればOK

blogy/config/routes.rb

Rails.application.routes.draw do
  ##2019/10/19 Add S
  root 'articles#index'
  ##2019/10/19 Add E
  
  resources :articles
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

#8. 実行
実行してみると、できてる！はず！

「New Article」で下記の画面へ！

#参考

• ゼロから10分でブログが作れる！Rails 6の新機能「Action Text」を試してみた
• Rails 6.0.0 のAction Textを使ってみた(Herokuにデプロイするまで)