概要
みなさんこんにちはcandleです。今回はgemでvendorを作成し、それをrailsアプリケーション側で読み込ませる為の方法を紹介します。
よく、gemをインストールすると「app/assets/javascripts/application.js」に
//= resuqire hoge/init
を記述してください。
みたいなのを見ると思います。cssでも同様です。
今回はこれを自作したgemで実装します。
前提
前回以降のgemの記事を読んでいる
Rails pluginを使ったgemの作り方[1]（基本設定編）
Rails pluginを使ったgemの作り方[2]（rails組み込み編）
Rails pluginを使ったgemの作り方[3]（vendor/assets 読み込み編）
Rails pluginを使ったgemの作り方[4]（controller helper編）
railsがある程度使える
vendor/assetsの使いどころ
ところで、gem側でvendor/assetsを作成し、ユーザーにjavascriptないしcssを読み込ませる利点はなんでしょうか。これはわざわざ、ユーザーがそのgemで使用するjavascriptやcssを自分のrailsアプリケーション内に用意しなくても簡単な記述だけで使用できるところにあると思います。
例えば、gemのjavascriptを全て、ユーザーのrailsアプリケーションのapp/assets/javascriptsに置いてしまうと、そのgemを使わなくなった場合、ファイルの削除が大変になりますが、もしもapp/assets/javascripts/application.jsに一文書き加えるだけで、javascriptが使えれば便利ですよね。
ただ、１つ注意点があります。それはそのgemを使っているrailsアプリケーションの開発者がjavascriptまたはcssをカスタマイズしたい場合です。
作成しているgemのjavascriptが機能面で閉じられていて、カスタマイズする必要がない場合は上の方法に向いています。
一方、gemのjavascriptを変更したり、機能を追加させたい場合はこの方法はよろしくありません。というのも、開発者にgemのvender以下にあるjavascriptを変更させるのはあまりに不便だからです。railsアプリケーションの開発者にjavascriptを改変させてあげたい場合は、次回以降紹介するgeneratorの方法を使用しましょう。
今回はvendor/assetsを試します。
vendor/assetsフォルダを作成する
前回からgood_item gemを作成しています。good_item gemは下の様になっています。
gemのフォルダの中にjavascript用のフォルダとcss用のフォルダを作ります。
自作しているgemフォルダの中で、まずはvendorフォルダ、その下にassetsフォルダを作成します。
cd ~/railsgems/good_item/ mkdir -p vendor/assets
次にjavascriptsフォルダとstylesheetsフォルダを作成します。
cd assets mkdir javascripts stylesheets
流儀なのですが、一般にjavascriptsフォルダ、stylesheetsフォルダの中にそのgemの名前のフォルダを作ります。その中にそれぞれのファイルを置いていく方針を取ります。
恐らく、javascriptsフォルダに直接ファイルを置いてしまうとrailsアプリケーション側のjavascriptsと競合してまう可能性があるからでしょう。
下の図が分かり易いと思います。
ということで、ファイルの競合を防ぐことも含めて、javascriptsフォルダとstylesheetsフォルダにそれぞれgem名のフォルダを作成します。このチュートリアル通りやっている人はgood_itemフォルダを作ります。
mkdir javascripts/good_item stylesheets/good_item
作成したフォルダの中に、チュートリアルなので、２つ以上ファイルを作ります。
touch javascripts/good_item/index.js javascripts/good_item/sub.js touch stylesheets/good_item/style.css stylesheets/good_item/design.css
中身はひとまず書かずに、railsアプリケーション側で読み込みが出来るか試します。
rails アプリケーションでgemのvendorを読み込む
rails側で自作したgemのvendorのjavascriptないしstylesheetを呼び出す記法は殆ど変わらないので、javascriptの方で説明して行きます。
自作したgemを読み込んでいるrailsアプリケーションの「app/assets/javascripts/application.js」を開きます。
そこに以下の一行を加えます。
//= require good_item
これだけで、自作したgemの「vendor/assets/javascripts/good_item/index.js」が呼び出されます。
構造で示すと下の図になります。
つまりapplication.jsで記述している「good_item」というのはvendorの中のフォルダを指しているという事ですね。
ブラウザでアクセスすると、読み込まれているのが分かります。
続いて、index.jsではなくて、作成したsub.jsを読み込みたい時はapplication.jsに以下を加えます。
//= require good_item/sub
ブラウザで読み込むと、index.jsの代わりにsub.jsが呼ばれています。
gemのvendorのjavascriptsのgood_itemをまとめて呼びたい時は一工夫必要です。
例えば、gemのindex.jsとsub.jsを呼び出したい場合は、index.jsに以下を加えます。
//= require ./sub
その上でrailsアプリケーションの「app/assets/javascripts/application.js」に以下を加えてindex.jsを呼びます。
ブラウザで確認しますと、しっかりindex.jsとsub.jsが呼ばれています。
もしも、jsのファイルを増やしたなら、その分、index.jsでrequireして上げれば良いわけです。
ここではstylesheetのほうの読み込み方は解説しませんが、同じ記述方式で呼び出せます。
まとめ
gemのassetsの呼び出しを理解できたでしょうか？私はなかなかこれが上手くいかなくて、頭が痛くなったのですが、分かってしまえば簡単ですね。
