読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

Rails:Colorboxの使い方を確認してみました

Rails

RailsでjQueryライブラリなどはどうやって使えばいいのかなということで、Colorboxを対象に試行錯誤してみました。


サードパーティ製ライブラリはvendorディレクトリで使うということなので、vendorディクレクトリのjavascripts / stylesheetsディレクトリにJSファイルとCSSファイルをそれぞれ入れます。
f:id:tyoshikawa1106:20150814205339p:plain


colorbox.cssを見てみると『images/overlay.png』というようなパスの指定があります。Railsで使う場合、『images/』の部分は不要なので全て除外します。
f:id:tyoshikawa1106:20150814205525p:plain


除外した結果です。
f:id:tyoshikawa1106:20150814205548p:plain


colorboxで使用される画像は『app/assets/images』ディレクトリに格納します。
f:id:tyoshikawa1106:20150814205901p:plain


colorboxで必要なJS処理は『app/assets/javascripts/custom.js』に記載しました。
f:id:tyoshikawa1106:20150814210051p:plain


viewはこんな感じです。
f:id:tyoshikawa1106:20150814210822p:plain

f:id:tyoshikawa1106:20150814210226p:plain


※表示する画像は外部から持ってきました。実際はimagesディレクトリに入れて使う感じだと思います。


これでリンククリック時にcolorboxをつかった画像表示がうまくいきました。
f:id:tyoshikawa1106:20150814210424p:plain


ひとまずこれで動くことを確認できたので、ファイル構成をもう少し綺麗にしていきたいと思います。vendorのJSとCSSファイルがフォルダ内にあっても大丈夫か確認してみました。
f:id:tyoshikawa1106:20150814211104p:plain


application.html.erbのJSとCSS読み込みのところに「/colorbox」を追加します。
f:id:tyoshikawa1106:20150814211255p:plain


Imagesに入れておいた画像も同じようにcoloboxディレクトリにまとめてあげます。
f:id:tyoshikawa1106:20150814211941p:plain


これでも動くかなと確認してみたところ問題なく読み込みできていました。
f:id:tyoshikawa1106:20150814211500p:plain


ここでちょっとびっくりしたのですが、cssをcolorboxディレクトリに入れたところ、画像ファイル参照パスに自動で「colorbox/」というのが追加されました。なのでCSS内の画像パスに「colorbox/」というのを追加する必要がありませんでした。
f:id:tyoshikawa1106:20150814212326p:plain


JSとCSSは同じフォルダ名にいれるとセットと判定してくれるのかな・・・

追記

ローカルで動いたので安心したのですが、Herokuに上げるとエラーがでました。CSSやJSが読み込めないエラーで何処が間違っているのかなと検索していたところ、Qiitaに解決方法が投稿されていました。


設定出来てなかったのがこの部分...
f:id:tyoshikawa1106:20150815005458p:plain


これでHeroku上でもCSSやJSの読み込みができるようになりました。


Rails & jQuery のサンプルコードです。github.com