このエントリーは、GMOアドマーケティング Advent Calendar 2018の 12/22 の記事です。
GMOアドマーケティングとしては初のAdvent Calendar参戦です。
GMOアドマーケティングのエンジニアS.Yです。
来年の2019年にRails6がリリースされる予定ですが、新機能のAction Textを試してみたので、紹介したいと思います。
Action Textとは、ブログなどで使われているリッチなテキストエディタ機能を簡単に実装できるものとなっています。
それでは試していきましょう!
動作環境
- macOS High Sierra
- Ruby 2.5.3
- Ruby on Rails 6.0.0.alpha
環境構築
Rails6はRubyのバージョン2.4.1以降が必須なので、
Rubyのバージョンが古い場合はrbenvなどで新しいバージョンをインストールします。
新しくインストールした場合はruby versionをlocalかglobalにセットし、bundlerをインストールします。
|
1 2 3 |
rbenv install 2.5.3 rbenv global 2.5.3 gem install bundler |
次に必要なライブラリをインストールします。
|
1 2 3 |
brew install yarn brew install imagemagick brew install sqlite3 |
2018年12月現在、gem installする際にrails -v=6.0.0.alphaを指定できないので、edge版を使う事になります。
DHHの動画の手順通りrailsブランチをgit cloneしてきてもwebpackerのインストールがうまく動作しなかったため、別の方法を紹介します。
rails6用のディレクトリを作成し、移動
|
1 2 |
mkdir rails6 && cd rails6 vi Gemfile |
以下を記述したGemfileを作成します。
|
1 2 |
source 'https://rubygems.org' gem 'rails', git: 'https://github.com/rails/rails.git' |
Rails6プロジェクト作成
bundle installし、プロジェクトを作成します。紹介動画と同じくblogを作成します。
|
1 2 3 4 |
bundle install bundle exec rails new blog --edge cd blog bundle exec rails webpacker:install |
Gemfileに以下追記
|
1 2 |
gem 'actiontext', github: 'rails/actiontext', require: 'action_text' gem 'image_processing', '~> 1.2' |
bundle install後にaction_textをインストールします。
|
1 2 |
bundle install bundle exec rails action_text:install |
以下のファイルが作成されます。
app/assets/stylesheets/actiontext.scss
test/fixtures/action_text/rich_texts.yml
app/views/active_storage/blobs/_blob.html.erb
20181219153252_create_active_storage_tables.active_storage.rb
20181219153253_create_action_text_tables.action_text.rb
scaffoldで記事を投稿するモデルの雛形を作成します。
ここではtitleカラムのみ作成します。
|
1 2 3 |
bundle exec rails g scaffold post title:string bundle exec rails db:create bundle exec rails db:migrate |
動作確認
Rails serverを起動し、動作するか確認します。
|
1 |
bundle exec rails s |
http://localhost:3000/posts
ActionView::Template::Error (couldn’t find file ‘trix/dist/trix’ with type ‘text/css’
上記のようなエラーが出てしまいました。
trixのcssが読み込めてないようです。config/initializers/assets.rbに以下追記してサーバーを再起動します。
config/initializers/assets.rb
|
1 |
Rails.application.config.assets.paths << Rails.root.join('node_modules') |
無事起動しましたが、scaffoldで指定した通り、入力項目はtitleしかありません。
ここからリッチテキストエディタを使えるようにそれぞれのファイルに追記していきます。
リッチテキストエディタの追加
リッチテキストエディタを表示するために以下4つのファイルに追記します。
まずはモデルにhas_rich_textを追記します。
これを記述することにより、contentがアクセサとして使えるようになります。
app/models/post.rb
|
1 2 3 |
class Post < ApplicationRecord has_rich_text :content end |
次に登録・表示画面のためにviewに追記します。
form_with内に追記
app/views/posts/_form.html.erb
|
1 2 3 |
<div class="field"> <%= form.rich_text_area :content %> </div> |
app/views/posts/show.html.erb
|
1 |
<%= @post.content %> |
登録するときにcontentパラメータを信頼するようcontrollerに追記します。
app/controllers/posts_controller.rb
|
1 2 3 |
def post_params params.require(:post).permit(:title, :content) end |
ここで、先ほどの記事作成画面を見てみると・・・
http://localhost:3000/posts/new
リッチテキストエディタが表示されました。
D&Dで画像を追加することもできます。
記事を編集して
Create Postボタンで登録。
投稿できました。
画像も一緒に投稿できましたが、DBはどうなっているのでしょうか？
DB
postsテーブルにはtitleしか入っていません。
追加したcontentはaction_text_rich_textsテーブルにpolymorphic関連として格納されています。
アップロードした画像はactive_storage_blobsに書き込まれ、saveした時にactive_storage_attachmentsにAction Textとの関連情報が保存されます。
まとめ
Rails6のalpha版でAction Textを試してみましたが、初期設定後は簡単なステップでリッチテキストエディタが使えるようになりました。
実際にリッチテキストエディタを作ろうと思うとwysiwygエディタとの連携や、画像やDB管理などで複雑になってしまいますが、フレームワークの機能として提供されることで、考えることが少なくなるため、メリットは大きいと思います。
alpha版ということで初期設定が複雑でしたが、本リリース後は簡単に動かせるようになると思いますし、詳細なカスタマイズもできるようになっていくと思うので、今後に期待です。
次回はRails6の新機能第二弾として、Action Mailboxを紹介したいと思います。
参考
参照年月日: 2018/12/18
参考情報入手先
■Ruby on Rails | introducing-action-text-for-rails-6
https://weblog.rubyonrails.org/2018/10/3/introducing-action-text-for-rails-6/
■Alpha preview: Action Text for Rails 6
https://youtu.be/HJZ9TnKrt7Q
明日は、mizkichの「Google Kubernetes EngineでIngressのSSLポリシー設定をTLS1.2以上に制限する」についてのお話です。
お楽しみに。
クリスマスまで続くGMOアドマーケティング Advent Calendar 2018
ぜひ今後も投稿をウォッチしてください！
■エンジニアによるTechblog公開中！
https://techblog.gmo-ap.jp/
■Wantedlyページ ～ブログや求人を公開中！～
https://www.wantedly.com/projects/199431
■エンジニア採用ページ ～福利厚生や各種制度のご案内はこちら～
https://www.gmo-ap.jp/engineer/
■エンジニア学生インターン募集中！ ～有償型インターンで開発現場を体験しよう～
https://hrmos.co/pages/gmo-ap/jobs/0000027
