Rails6.1ハンズオン(4)～6.0の機能を触る

# はじめに
[Rails6.1ハンズオン(3)](https://qiita.com/Hirororocky/items/f0640eabc3d9a862c27e)の続きです。


6.1ハンズオンと言いながら、実は6.0をまともに触っていない筆者。。。
ですので今回は6.0で追加された機能を触ってみます。
コードは[Github](https://github.com/hirorocky/Rails6.1_hands_on)にあげています。章ごとにコミットしてますので、参考にしていただければ幸いです。

# やること

個人的に気になった（面白そうor仕事で使いそう）機能をピックアップして、現在のRails_6.1_hands_onプロジェクトに追加してみます。

- Action Text
- Action Mailbox
- ActiveRecord::Relation#pick

参考：[Ruby on Rails 6の主要な新機能・機能追加・変更点 - Qiita](https://qiita.com/ryohashimoto/items/622c3bcfb3336cb9317e)

## 5-1. Action Text
### 5-1-1. Action Text, Active Storageの導入

参考：[Action Text の概要 - Railsガイド](https://railsguides.jp/action_text_overview.html)

まずはActiveStorageが必要なので、

```bash
rails active_storage:install
```

をしたが、

```bash
rails aborted!
Don't know how to build task 'active_storage:install' (See the list of available tasks with `rails --tasks`)
```

と出た。ActiveStorageのREADMEをみると、

[rails/rails](https://github.com/rails/rails/tree/main/activestorage)

> Run bin/rails active_storage:install to copy over active_storage migrations.
NOTE: If the task cannot be found, verify that require "active_storage/engine" is present in config/application.rb.

らしいので、config/application.rbをみると、

```ruby
require "rails"
# Pick the frameworks you want:
require "active_model/railtie"
require "active_job/railtie"
require "active_record/railtie"
# require "active_storage/engine"
require "action_controller/railtie"
# require "action_mailer/railtie"
# require "action_mailbox/engine"
# require "action_text/engine"
require "action_view/railtie"
require "action_cable/engine"
require "sprockets/railtie"
```

となっていた。rails new で色々無効にしていたのでコメントアウトされていたらしい。

`action_text/engine`も無効化されているのでこちらも有効にしておく。

そしてやっと、

```bash
rails active_storage:install
rails action_text:install
```

migrationファイルができているので、忘れずに`rails db:migrate`する。

config/storage.ymlを作る（最初からあるイメージだが、今回は無かった）

```yaml
local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>
```

config/environments/development.rb(test.rbも任意で、このハンズオンでテスト書くのかな...)に追加：

```ruby
config.active_storage.service = :local
```

### 5-1-2. ActionTextをモデルに適用する

![_2021-03-13_16.52.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/a28977b6-22bb-9b01-7e66-740c97d4f03b.png)


Commentのcontentがtextになっていたのを、Action Textに置き換える。

```bash
rails g migration RemoveContentInComment
```

```ruby
class RemoveContentInComment < ActiveRecord::Migration[6.1]
  def change
    remove_column :comments, :content, :text
  end
end
```

`rails db:migrate`して、

app/models/comment.rb

```ruby
class Comment < ApplicationRecord
  belongs_to :community
  has_rich_text :content
end
```

`has_rich_text`でcontentカラムを作ったかのように振る舞ってくれるようになる。

app/views/comments/new.html.haml（一部）

```haml
= form.label :content, class: 'form-label'
= form.rich_text_area :content, class: 'form-control mb-4'
```

app/views/communities/show.html.haml

```scss
= comment.content
```

simple_formatを外した。

すると以下のようになる。

![_2021-03-14_9.56.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/49b6769a-c9d5-b5ea-930d-c6c62562eb9f.png)


思ってたのと違う。cssが読み込まれていない。action_text:installしたときに新しく生成されたcssは、app/assets/stylesheets/actiontext.scss。内容がこちら

```scss
//
// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
// inclusion directly in any other asset bundle and remove this file.
//
//= require trix/dist/trix

// We need to override trix.css’s image gallery styles to accommodate the
// <action-text-attachment> element we wrap around attachments. Otherwise,
// images in galleries will be squished by the max-width: 33%; rule.
.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }
// （以下省略）
```

trix/dist/trixをrequireしていて、更に添付ファイルの表示に関するスタイルを上書きしているらしい。

app/views/layouts/application.html.hamlでは、

`= stylesheet_link_tag 'application'`を消して、`= stylesheet_pack_tag 'application'`に変えているので、上記ファイルは読み込まれない。

`= stylesheet_link_tag 'application'`を復活させれば動く（動作確認済み）。

だが、せっかくなので、webpackerに寄せる。

app/javascript/stylesheets/application.scss

```scss
@import "~@fortawesome/fontawesome-free/scss/fontawesome";

$primary: #9400d9;
@import "bootstrap";
@import "trix/dist/trix";
@import "actiontext.scss";
```

app/javascript/stylesheets/actiontext.scssではsprocket用のコードを外して記述。

```scss
// We need to override trix.css’s image gallery styles to accommodate the
// <action-text-attachment> element we wrap around attachments. Otherwise,
// images in galleries will be squished by the max-width: 33%; rule.
.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}
```

すると、

![_2021-03-14_10.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/7d7ba353-01ba-ca39-c484-011c9355846a.png)


できた。

![_2021-03-14_10.27.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/0c779866-8bda-488f-8e28-16b4aba7960c.png)

こんな感じで入力できる。

それで投稿すると

![_2021-03-14_10.27.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/32e97365-e9da-6f50-ab5a-0dd0c74fa077.png)


画像が表示されない。

chromeのconsoleを見ると、

```bash
GET http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--dce7eada98f7015981b311d8495658640b895ad9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJHa0NBQU09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--9a6414b9afa153c394bf23eb32d0e368370e8b60/Screenshot_20210304-220735.png 500 (Internal Server Error)
```

読み込めてない。500なので内部的なエラー。

したがってrailsのコンソールを見ると、

```bash
LoadError (Generating image variants require the image_processing gem. Please add `gem 'image_processing', '~> 1.2'` to your Gemfile.)
```

ちゃんと書いてあった。Gemfileに`gem 'image_processing', '~> 1.2'`を追加。bundle install。

![_2021-03-14_10.37.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/8936d52f-95c2-8220-6b5b-fa5e010c9b54.png)


表示されました。

## 5-2. Action Mailbox

私は勘違いしていました。
Railsには、Action MailerとAction Mailboxの２つがあるということを。
送信用と受信用で分かれているということを。

いつかメール受信機能を使うときのために名前だけ覚えておきます。
問い合わせフォームとか作れるみたいですね。
送信用のAction Mailerを試したかったので、ここは割愛します。

## 5-3. ActiveRecord::Relation#pick

> DB上のテーブルの絞り込み条件や並べ替えを指定した際に、最初のレコードの特定のカラムの値を取得する

らしいです。

掲示板のコミュニティの最新コメント投稿を表示してみます。

app/views/communities/index.html.haml（一部）

```ruby
author_name, created_at = community.comments.order(created_at: :desc).pick(:author_name, :created_at)
```
![_2021-03-18_16.49.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70400/4c44e3a6-b60e-5ca1-b24d-b7f67ef1d14c.png)
便利...なのか...？`.first.pluck(:hoge)`で良くない...？

以上です。
ついに次回、6.1の機能に触る編です！！