LiBz Tech Blog

LiBの開発者ブログ

ゼロから10分でブログが作れる!Rails 6の新機能「Action Text」を試してみた

はじめに

株式会社LiBの19卒内定者のエディです!

最近は漫画『王様達のヴァイキング』にハマっています📖

前回はRailsアプリに二段階認証を導入するという記事を書きました(4ヶ月前)

tech.libinc.co.jp

さてさて、今回のテーマは2019年の4月にリリース予定のRails6です!

DHH氏も日々ツイートしていますが、つい先日にはベータ2版がリリースされました。

今回は来たるRails6の中でも注目のAction Textについて触れていきたいと思います!

Rails 6から追加される機能

Action Textを試してみる前に、Rails6ではどんな変更があるのでしょうか? 現在公開されている情報の中でも影響度が高いものをピックアップしてみます。

  • Action Mailbox
    • Railsアプリケーション内でメールの受信や表示、転送や破棄などのライフサイクル追跡などの処理を行うフレームワーク。
    • 受信されたメールの内容(from:など)を元にルーティングが生成される。
    • 各メールはActionMailbox::InboundEmailというモデルとして取り扱われ、アプリケーションでの表示や処理が可能になります。
    • Active Storageを利用して、Amazon S3などのクラウドストレージに保存することも可能です。
  • 複数データベース
    • Active Recordの機能拡張とアプリケーションの設定項目、Rakeタスクの追加により、複数のデータベースを利用することができるように。
  • 並列テスト
    • デフォルトで並列でテストが可能に。
    • 並列にするワーカーの数は以下のようにカスタマイズすることができ、それぞれ別の一時的なデータベースを使用。  
    • プロセスで実行するか、スレッドで実行するかを設定することができる。
  • MySQLでutf8mb4文字セットがデフォルトに
    • 絵文字などをサポートするために、MySQLのデータベースで使用する標準の文字セットがutf8からutf8mb4に変更。
    • MySQL 5.7.9、MariaDB 10.2.2以上をサポートするバージョンに変更。
  • Action Text
    • テキストに関して何か提供してくれそう?

参考:Ruby on Rails 6の主要な新機能・機能追加・変更点

今回扱うAction Textとは?

Action TextはRailsでリッチテキストコンテンツを編集する機能を提供するフレームワークです。 フォーマットやリンク、引用符、リスト、埋め込み画像、ギャラリーなどを扱うことができるTrixエディタが含まれています。

組み込まれているTrixエディタはBasecampが開発しているオープンソースのWYSIWYGエディタです

trix-editor.org

Railsのデフォルト機能として追加されるため、Rails 6以降はプロジェクトに新規でWYSIWYGエディタを導入したいと思ったら、JSのライブラリやRailsのGemの選定をしなくても良いのです。

半年ほど前にgemのredcarpetを使ってWYSIWYGエディタの制作をしましたが、それに比べて実装が圧倒的に簡単にできそう、、! github.com

その前にWYSIWYGって何ですか?

question

WYSIWYG = What You See Is What You Get

つまり、「見ているものと得られるものが同じになる=(入力時のUIから出力時のUIが想像できる)」ということ。 WordやGoogleドキュメントなどのように文字の大きさや色、表組などを入力しながら確認できる機能などが該当します。

google_document
例:Googleドキュメント

HTMLやマークダウンに関する知識がなくてもWebページの装飾やレイアウトが簡単にできちゃうんですね。

早速アプリを作ってみる

ちなみに、Railsの6系から追加される機能ですが、既存のRails5.2でも導入は可能です。

$ rails new blogy --webpack

これで準備完了!

articleモデル作成

scaffoldで記事の投稿・表示・編集・削除をさくっと一括で作ってしまいます。

$ rails g scaffold article title:string

Action Textを導入

今回の目玉であるaction textを導入します。Gemfileに下記の記述を追加します。

gem 'actiontext', github: 'kobaltz/actiontext', branch: 'archive', require: 'action_text'
gem 'image_processing'
$ bundle install

Gemのインストールが出来たら、下記コマンドを実行します。

$ rails action_text:install

$ rails db:migrate

ここで2つのMigrationファイルが生成されたので、中身を確認します。

class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
  def change
    create_table :active_storage_blobs do |t|
      t.string   :key,        null: false
      t.string   :filename,   null: false
      t.string   :content_type
      t.text     :metadata
      t.bigint   :byte_size,  null: false
      t.string   :checksum,   null: false
      t.datetime :created_at, null: false

      t.index [ :key ], unique: true
    end

    create_table :active_storage_attachments do |t|
      t.string     :name,     null: false
      t.references :record,   null: false, polymorphic: true, index: false
      t.references :blob,     null: false

      t.datetime :created_at, null: false

      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
      t.foreign_key :active_storage_blobs, column: :blob_id
    end
  end
end

こちらはActive Storageに関わるファイルですね。

class CreateActionTextTables < ActiveRecord::Migration[5.2]
  def change
    create_table :action_text_rich_texts do |t|
      t.string     :name, null: false
      t.text       :body, limit: 16777215
      t.references :record, null: false, polymorphic: true, index: false

      t.datetime :created_at, null: false
      t.datetime :updated_at, null: false

      t.index [ :record_type, :record_id, :name ], name: "index_action_text_rich_texts_uniqueness", unique: true
    end
  end
end

さらにapp/views/layouts/application.html.erbにも変更を加えます

これでAction Textの導入の前工程は完了!

モデルを編集

ここからはAction Textの独自メソッドが登場してきますが、まずはモデルから。

has_rich_textが独自メソッドです。 シンプルすぎる記述の奥にリッチテキストエディタの存在を感じます|壁|ω・)チラッ

app/models/article.rb

class Article < ApplicationRecord
  has_rich_text :content
end

モデル側の記述はたったこれだけですw

コントローラーを編集

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

app/controllers/articles_controller.rb

View編集

scaffoldで自動生成されたビューファイルに追記したのが下記の状態です。 :titleと:contentに注目してください。titleは元々の自動生成された記述のままですが、contentにはrich_text_areaという初めてみるメソッドを用いています。 これもAction Textで追加されたメソッドになります|壁|ω・)チラッ

app/views/articles/_form.html.erb

ここまでで一旦動かしてみる

なんかそれっぽいものが出来ている(ゴゴゴゴ...)

article 注)太字、斜体、下線、リストなどについてココまで一切触れてないやん...と思ったアナタ、正解です。全く触れていません。気づいたらそこにあったんです。

画像投稿も試してみる

Image from Gyazo

というわけで、ここまで冗談抜きで10分で出来ましたww(恐ろしい)

デフォルトでドラッグ&ドロップによるアップロードができちゃうんですね。

丁寧に画像のサイズまで表示してくれています。

補足:データはどのように扱われているか?

f:id:edenden:20190227234445p:plain
action_text_rich_textsテーブルに格納されている

f:id:edenden:20190227235403p:plain
articlesテーブルにはタイトルのみ格納されている

Articleモデルに追加したcontentはaction_text_rich_textsテーブルにpolymorphic関連として格納されています。 単一プロジェクト内で複数のリッチテキストエディタを実装する具体的なユースケースがあるのかパッと思い浮かばいないですが、同一のインターフェースであれば、他のモデルでもAction Textを導入することが非常に容易になります。

f:id:edenden:20190228001733p:plain
action_text_rich_textsテーブルのbodyの画像データの様子

小さくて見づらいですが、画像URLはactive_storage/blobs配下にあります。 確認してみます。

f:id:edenden:20190228003331p:plain

画像が複数枚格納されているのは、Articleモデルのインスタンスの保存に関わらず、非同期で画像のアップロード→保存が実行されているためです(テスト用に何回かアップロードしては消すを繰り返した結果です)

おわりに

エディターがサクッと作れすぎて逆にびっくりしましたw

一番のポイントは画像アップロード用にエンドポイントを作る必要がなかったところで、これは他のライブラリやGemにもなかった点かなと思います。 Active Storageを用いているからこその実装方法かなと。

自前でリッチテキストエディタを実装したときは、carrierwaveを用いて画像をアップロードする際にエンドポイントを追加しました。

自分でブログを作りたい人や、Rails初心者だけど「これオレが作ったんだぜ!ドヤ!」と言いたい人にとっては良いかもしれないです☺

採用もやってます🍣

中途・新卒問わずエンジニア採用やっています!

www.wantedly.com