開発環境
- 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の、
# 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が適応されれば良いので、
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を新規作成して、
<%= javascript_pack_tag 'application' %>
を追加しました。
しかし、更に悲しいことに、railsのwebpacker派rails-ujsを使い、active-adminではjquery_ujsを用いていたので、衝突が起きてしまっていたので、active-adminように、action-text用のjsのみをimportしたadmin.jsというものを作成して、
<%= javascript_pack_tag 'admin' %>
としました。
これで、正常にActiontextのJSが読み込まれて、active-admin内でJsをincludeすることに成功しました。
他にも、Active-AdminのComponentクラスにJSの読み込みをOverrideする方法も会ったのですが、今回は使い方が局所的だったので、Pageをカスタマイズするようにしました。