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

ishigaki

こんにちは、 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 を採用した理由までをまとめました。

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

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。