開発環境

Rails6.0.0
ruby2.6.0
webpacker4.0.7

ActionText × Active-admin

Rails6によってActionTextが導入されましたが、この影響は非常に強いです。
なぜなら、actionTextはその使いやすさから、これまでのtext_areaを完全に代替するものであり、これからとても使われていくことが予想されるからです。

しかし問題となってくるのが、

ActionTextはデフォルトでWebpackerを使わなければならない

ということでしょう。

これまでのアプリケーションはasset pipelineを用いたものが多かったのですが、これからはWebPackerとの共存を余儀なくされるでしょう。

今回僕が実装しようとしたのは、Active-AdminにおいてActionTextを実装することでした。しかし、Asset pipelineとWebpackerのズレが発生したので、そこを修正しつつ実装しました。

#実装

実装手順

そもそもActive-AdminはどこでCSS,JSを読み込んでいるかを知る
WebpackerのJSを読み込ませる方法を知る
Active-AdmindeWebpackerでBundleしたJSを読み込ませる方法を知る

1. そもそもActive-AdminはどこでCSS,JSを読み込んでいるか

これは、config/initializers/active_admin.rbの、

config/initializers/active_admin.rb

  # To load a stylesheet:
  # config.register_stylesheet 'hgoehoge.css'
  #
  # You can provide an options hash for more control, which is passed along to stylesheet_link_tag():
  # config.register_stylesheet 'my_print_stylesheet.css', media: :print
  #
  # To load a javascript file:
  # config.register_javascript 'hogehoge.js'

という部分です。
ここで、config.register_(stylesheet, javascript)によって、Css,Jsを読み込んでおります。

しかし、あくまでこれはActive-admin全体でのJSの読み込みなので、一部でしか使わないActionTextのJSのために全体でJSを読み込ませるのも問題だと思い、ここではJSは特に追加しませんでした。

ちなみに、ここを学んでいる時に、Active-Adminが自動生成するcss,jsが自分達のcss,Jsを汚染してるという記事をたくさん見かけたので、その対策もしました。

詳しくはこちら

2. WebpackerのJSを読み込ませる方法

では、WebpackerのJSを読み込ませるにはどうすればよいのでしょうか？

簡単で、htmlファイルで、

<%= javascript_pack_tag 'application' %>

とするだけです。これで、app/javascript/pack上のapplication.jsというjsが読み込まれます。

3. Active-AdminでWebpackerでBundleしたJSを読み込ませる方法

では、Active-adminでそのようにjavascriptを読み込ませるにはどうすれば良いのか。

今回は、ActionTextのJSを読み込ませることが目的であり、actiontextを用いるformに対してのみjsが適応されれば良いので、

admin/model_name.rb

ActiveAdmin.register ModelName do
  # ...その他設定を記入

  form partial: 'form' #この一行を追加
end

として、formを自分でカスタマイズする方法を用いました。この'form'というのは、app/views/admin/model_name/_form.html.erbと繋がっている(partialを用いていて_がついていることに注意。拡張子は何でも良し)ので、

app/views/admin/model_name/_form.html.erbを新規作成して、

app/views/admin/model_name/_form.html.erb

<%= javascript_pack_tag 'application' %>

を追加しました。

しかし、更に悲しいことに、railsのwebpacker派rails-ujsを使い、active-adminではjquery_ujsを用いていたので、衝突が起きてしまっていたので、active-adminように、action-text用のjsのみをimportしたadmin.jsというものを作成して、

app/views/admin/model_name/_form.html.erb

<%= javascript_pack_tag 'admin' %>

としました。

これで、正常にActiontextのJSが読み込まれて、active-admin内でJsをincludeすることに成功しました。

他にも、Active-AdminのComponentクラスにJSの読み込みをOverrideする方法も会ったのですが、今回は使い方が局所的だったので、Pageをカスタマイズするようにしました。