joppot

コピペで絶対動く。説明を妥協しない

プログラミング

Rails pluginを使ったgemの作り方[3](vendor/assets 読み込み編)

投稿日:2015年4月29日 更新日:

Pocket

fjeoiof

概要

みなさんこんにちは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が使えれば便利ですよね。

ただ、1つ注意点があります。それはそのgemを使っているrailsアプリケーションの開発者がjavascriptまたはcssをカスタマイズしたい場合です。

作成しているgemのjavascriptが機能面で閉じられていて、カスタマイズする必要がない場合は上の方法に向いています。

一方、gemのjavascriptを変更したり、機能を追加させたい場合はこの方法はよろしくありません。というのも、開発者にgemのvender以下にあるjavascriptを変更させるのはあまりに不便だからです。railsアプリケーションの開発者にjavascriptを改変させてあげたい場合は、次回以降紹介するgeneratorの方法を使用しましょう。

今回はvendor/assetsを試します。

vendor/assetsフォルダを作成する

前回からgood_item gemを作成しています。good_item gemは下の様になっています。

railsgemsf

gemのフォルダの中にjavascript用のフォルダとcss用のフォルダを作ります。

自作しているgemフォルダの中で、まずはvendorフォルダ、その下にassetsフォルダを作成します。

cd ~/railsgems/good_item/
mkdir -p vendor/assets

vendorss

次にjavascriptsフォルダとstylesheetsフォルダを作成します。

cd assets
mkdir javascripts stylesheets

jscss

流儀なのですが、一般にjavascriptsフォルダ、stylesheetsフォルダの中にそのgemの名前のフォルダを作ります。その中にそれぞれのファイルを置いていく方針を取ります。
恐らく、javascriptsフォルダに直接ファイルを置いてしまうとrailsアプリケーション側のjavascriptsと競合してまう可能性があるからでしょう。
下の図が分かり易いと思います。

confrectsources

ということで、ファイルの競合を防ぐことも含めて、javascriptsフォルダとstylesheetsフォルダにそれぞれgem名のフォルダを作成します。このチュートリアル通りやっている人はgood_itemフォルダを作ります。

mkdir javascripts/good_item stylesheets/good_item

creatggg

作成したフォルダの中に、チュートリアルなので、2つ以上ファイルを作ります。

touch javascripts/good_item/index.js  javascripts/good_item/sub.js
touch stylesheets/good_item/style.css stylesheets/good_item/design.css

treejscss

中身はひとまず書かずに、railsアプリケーション側で読み込みが出来るか試します。


rails アプリケーションでgemのvendorを読み込む

rails側で自作したgemのvendorのjavascriptないしstylesheetを呼び出す記法は殆ど変わらないので、javascriptの方で説明して行きます。

自作したgemを読み込んでいるrailsアプリケーションの「app/assets/javascripts/application.js」を開きます。

そこに以下の一行を加えます。

//= require good_item

javascriptimport

これだけで、自作したgemの「vendor/assets/javascripts/good_item/index.js」が呼び出されます。
構造で示すと下の図になります。

ppp

つまりapplication.jsで記述している「good_item」というのはvendorの中のフォルダを指しているという事ですね。

ブラウザでアクセスすると、読み込まれているのが分かります。

good-1

続いて、index.jsではなくて、作成したsub.jsを読み込みたい時はapplication.jsに以下を加えます。

//= require good_item/sub

gsub

ブラウザで読み込むと、index.jsの代わりにsub.jsが呼ばれています。

subjjj

gemのvendorのjavascriptsのgood_itemをまとめて呼びたい時は一工夫必要です。

例えば、gemのindex.jsとsub.jsを呼び出したい場合は、index.jsに以下を加えます。

//= require ./sub

requiresub

その上でrailsアプリケーションの「app/assets/javascripts/application.js」に以下を加えてindex.jsを呼びます。

muteindex-1

ブラウザで確認しますと、しっかりindex.jsとsub.jsが呼ばれています。

okitrequire

もしも、jsのファイルを増やしたなら、その分、index.jsでrequireして上げれば良いわけです。

ここではstylesheetのほうの読み込み方は解説しませんが、同じ記述方式で呼び出せます。

まとめ

gemのassetsの呼び出しを理解できたでしょうか?私はなかなかこれが上手くいかなくて、頭が痛くなったのですが、分かってしまえば簡単ですね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ruby on railsで出力されるlog(ログ)のフォーマットを変更する

概要 みなさんこんにちはcandleです。今回はrailsのログに関する記事です。railsは決まった記述でログを出力します。 webアプリケーションを実行中におかしな挙動が合った場合はこのログをもと …

React NativeでGoogle Chrome上でのデバッグ時に動作が遅くなる場合の対処

English 日本語 概要 みなさんこんにちはcandleです。 今回はReact NativeのデバッグでChromeを使うと シミュレーターの動作が遅くなってしまう問題を対処します。 とは言って …

emacsでplantUMLをplantuml-modeを使って作成する

Autumn leaves on wood table 概要 みなさんこんにちはcandleです。今回はplantUMLをサポートするemacsのplantuml-modeを導入して使ってみましょう。 …

railsでsvgをviewに表示する

概要 みなさんこんにちはcandleです。 今回はrailsでsvgを出力します。 レスポンシブウェブデザインから始まり、最近ではwebでもsvgの使用が増えてきたような気がします。 手こずらずにsv …

railsのform_forとstrong parametersを使用して画像をアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリに画像をアップロードしてみましょう。 form_forは基本的にデ …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ