【Ralis】slick.jsをインストールして使ったらアセットパイプラインの理解が深まった話

プログラミング初心者の勉強ブログ #107

jQueryライブラリの一つであるslick.js。簡単に整ったスライドショーを実装でき、初心者から大企業のHPまで、多岐にわたって利用されているのを見かけたことがあるライブラリ。今回はslick.jsをCDNではなくRailsアプリにインストールして利用する際に、アセットパイプラインに関する学びがあったのでまとめようと思う。

 

目次

[toc]

 

slick.js

slick.jsホーム

slick – the last carousel you’ll ever need

 

サイトURLからアクセスすると使い方が載っておりわかりやすいが、Railsアプリでインストールして使っていく場合、ダウンロードしたファイルのうち何が必要で何が必要でないか、ファイルの置き場所をどこにするかについて少し迷った。slick.jsについてGoogleで検索すると、どのファイルが必要かはすぐわかるものの、ファイル配置はそれでも曖昧なままであった。Railsのアセットパイプラインはややこしい。今回はslick.jsのファイル配置について、どのようにパスが生成されているかに着目し、Railsのアセットパイプラインの理解が深まる検証をしていく。

 

slick.jsを使うのに必要なファイル

サイト(slick – the last carousel you’ll ever need)へアクセスし、「get it now」を押せばダウンロードボタンが表れるので、とりあえずダウンロードする。

2019. 3. 28時点で中身は、

ダウンロード中身

まあこんな感じ。色々入っている。

とりあえず必ず必要なのは

  • slick.css
  • slick-theme.css
  • slick.js

であり、「slick.css」はslick.scssでもslick.lessでも良く(slick-theme.cssも同様)、「slick.js」はslick.min.jsでも良い。環境に合わせて使いたい方を選ぶ。

プラスアルファで必要になってくるものは、

  • slick.woff
  • slick.ttf
  • slick.svg
  • slick.eot
  • ajax-loader.gif

である。上4つは「fonts」ディレクトリ内にあり、slickで表示されるスライドを切り替える矢印ボタンや、下に表示され現在スライドを示す黒い点の並びなどのフォントが入っている。「ajax-loader.gif」はブラウザがスライドを表示させるまでのプレローダー画像になる。

今回僕が使ったslickは、

  • slick.scss
  • slick-theme.scss
  • slick.min.js
  • slick.woff
  • slick.ttf
  • slick.svg
  • slick.eot
  • ajax-loader.gif

これらさえあればRailsアプリ上で正常に機能する。

 

どこに置けばいい?

  • slick.scss
  • slick-theme.scss

この2つはapp/assets/stylesheets下に、

 

  • slick.min.js

これはapp/assets/javascripts下に置く。

 

  • ajax-loader.gif

gifはapp/assets/images下に置く。

 

残りのフォントファイルであるが、

  • slick.woff
  • slick.ttf
  • slick.svg
  • slick.eot

これら4つはapp/assets/fontsを作成し、その中に置く。

Railsでは画像はapp/assets/images下に置くことで、css上で「image-url」を用いてダイジェストを付与したパスを自動で生成してくれる。フォントも同様に、app/assets/fonts下に置き「font-url」を用いることでダイジェストを付けてくれる。

 

ここで、slick.jsの「slick-theme.scss」を見てみる。

slick-theme.scss 抜粋

// 変数の定義
$slick-font-path: "./fonts/" !default;


// slick-font-url関数を定義
@function slick-font-url($url) {
    @if function-exists(font-url) {
        @return font-url($url);
    }
    @else {
        @return url($slick-font-path + $url);
    }
}

// slick-font-url関数でパスが決まる
@if $slick-font-family == "slick" {
    @font-face {
        font-family: "slick";
        src: slick-font-url("slick.eot");
        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
        font-weight: normal;
        font-style: normal;
    }
}

フォントについて、このように独自関数が定義され上手いことパスを出してくれる設計になっている。「font-url」関数の有無で条件分岐されている。プレローダ画像にしても同じく、

$slick-loader-path: "./" !default;

@function slick-image-url($url) {
    @if function-exists(image-url) {
        @return image-url($url);
    }
    @else {
        @return url($slick-loader-path + $url);
    }
}

.slick-list {
    .slick-loading & {
        background: #fff image-url("ajax-loader.gif") center center no-repeat;
    }
}

「image-url」が使える環境か否かで条件分岐されている。

 

試しにフォントの方の分岐条件を逆にしてみた。

$slick-font-path: "./fonts/" !default;

// slick-font-url関数を定義
@function slick-font-url($url) {
    @if function-exists(font-url) {
        @return url($slick-font-path + $url);  // 逆にする
    }
    @else {
        @return font-url($url);
    }
}

 

実際にどのようなパスが生成されるかをディベロッパーツールで確かめると、

404エラー

Rails開発環境(127.0.0.1:3000)の直下、つまりアプリディレクトリ直下から「/fonts/slick.woff」と参照される。もちろんダイジェストはついていない。ファイルは見つからず、404が出る。

このことから、知らず知らずslick.jsはRailsに合わせてパスを処理してくれていたことがわかる。

 

まとめ

今回はjQueryライブラリからRailsのパスを学ぶことに成功しました。ライブラリは便利だけどややこしく、一旦エラーが出ると「うわーどうしよ感」が強いです。色々ライブラリを使っていく中で、ライブラリのコードが自分のやりたい実装の過程でちょいちょい邪魔してきます。js系のライブラリをRailsで使用する際には、余裕があればただコピペで終わらせず、少しは偉大な開発者が書いたコードを読んでみるのもありかもしれません。なんかそれっぽいことが言えた気がします。以上ありがとうございました。

 

返信を残す

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

CAPTCHA