Shopify テーマにカルーセル用ライブラリ「Glide.js」を導入する

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

Gaji-Labo では Shopify というEコマース用プラットフォームのテーマ開発を行っています。

Shopify のテーマを開発する中で、 Glide.js というJSライブラリを使用したカルーセルを実装する機会があったため、その方法についてまとめたいと思います。

また、今回の記事は、Shopify デフォルトテーマである「Debut」テーマを基にカスタマイズしていくという形で実装しているのを前提に書かれています。

Debut テーマをカスタマイズしてサイトを実装していく方法についてはこちらをご覧ください。

Debut テーマの実装について

Debut テーマには初期状態で slick という jQuery のカルーセル用ライブラリが既に導入されています。

しかし、ここで導入されているのはオリジナルの slick ではなく、Debut テーマに初期状態で入っている「スライドショー」というコンポーネント用にコードが書き換えられたものです。

新たにカルーセルのコンポーネントを追加したいとなった際に、「スライドショー」用に最適化されているコードを使い回すのは難しく、リファクタリングしづらいコードになってしまったりバグが発生する危険性もあります。

そのため、 slick ではなく Glide.js というカルーセル用ライブラリを新たに実装し、導入することにしました。

Glide.js について

Glide.js は、jQuery 非依存のカルーセル用ライブラリです。npm やCDNで公開されており、ローカルにダウンロードして導入することも勿論可能です。

Glide.js を採用した理由には、以下のようなものがあります。

jQuery 不要

slick は jQuery に依存していますが、 Glide.js は jQuery 非依存で書かれているため、ライブラリの JS ファイルと CSS ファイルを導入するだけで導入が可能です。

カルーセルに必要な機能を取り揃えている

カルーセルの実装に必要な機能は網羅しています。アニメーションの切り替え速度やブレークポイントごとの設定は勿論のこと、スライド間のマージン変更や左右スライドの見切れ表示などもライブラリ単体で対応することが可能です。

高いカスタマイズ性

カルーセルの発火時に関数を渡すことで、コンポーネントの挙動を拡張することができます。

var Example = function (Glide, Components, Events) {
  ...
}

new Glide('#glide', {
  ...
}).mount({ Example })

Glide.js の導入方法について

Glide.js は npm で導入可能ですが、今回は直接テーマファイルに JS を追加し、コンパイルする形で追加しました。

詳しくはこちらの記事もお読みいただけると幸いです。

まとめ

今回は、Shopify テーマでのカルーセルを実装する上で、Glide.js を採用した理由までをまとめました。

次回の記事で、実際にカルーセルを実装する方法までをご紹介できればと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。