簡単に使えるホームページに動きをつけるJavaScriptライブラリ
時間経過で画像が切り替わっていくスライドショーや、画像をクリックしたときに、ページ遷移なしで拡大画像をポップアップで表示するなど、動きのあるホームページが当たり前になっています。
これらはJavaScriptによって実装されているので、自分のホームページでも使いたいと思うと、専門の知識や技術が必要になります。
では、JavaScriptを修めた人しか使えないのか、というと、そのようなことはありません。
「ライブラリ」と呼ばれる、有志の人が公開してくれているJavaScriptのプログラムを活用することで、手軽に実装可能です。
ここでは、スライドショーのためのライブラリ『Swiper』を紹介いたします。
人の書き方を見ることで学べることもたくさんあります！ライブラリを使いながら、JavaScriptの知識を深めていきましょう！
- 目次
スライドショーを実装するライブラリ『Swiper』
ホームページにスライドショーを実装するなら『Swiper』がおすすめです！
JavaScriptでスライドショーを実装しようとすると、後述の『jQuery』を併用するライブラリが多いのですが、Swiperは単体で動くため、無駄な読み込みがありません。
さらにレスポンシブに対応していて、動作感が軽量な点も特徴的です。
スライドショーとは、表示する画像やテキストを切り替えながら順番に表示していくもので、横、もしくは縦にスライドさせたり、クロスフェードさせたりする表現です。
同じような意味で「スライダー」、「カルーセル」という言葉も使われます。
ホームページのトップで使用されることが多く、個人サイト、企業サイト問わず、幅広く使用されています。
Swiperの実装・使い方
1. 公式サイトを開く
Googleで『Swiper』と検索し、『Swiper – Most Modern Mobile Touch Slider…』というタイトルのページを開く。
※次のリンクからでも可：http://idangero.us/swiper/
2. DownloadボタンをクリックしてSwiperのファイルをダウンロードする
例：Firefoxのダウンロード画面
3. ダウンロードしたzipファイルを解凍(展開)し、本体のjsファイルとcssファイルをコピーする
- Swiper-3.4.2 > dist > js フォルダの中に入っている、「swiper.min.js」
- Swiper-3.4.2 > dist > css フォルダの中に入っている、「swiper.min.css」
※3.4.2はバージョン番号なので、ダウンロードしたタイミングによっては数値が違っている可能性があります。
※わかりやすさを優先して、htmlファイルと同じフォルダに置いていますが、読み込めれば、どこに置いていても問題ありません。
4. Swiperを組み込みたいページにjs、cssを読み込む
例：画像が並んだページにSwiperを読み込みます。
例：上記ページのソースコードにJavaScriptファイル、CSSファイルを読み込むタグを追加
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Swiper</title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./swiper.min.js"></script>
</head>
<body>
<div>
<ul>
<li>
<img src="./img/sample1.jpg" alt="Swiper実行デモ画像1">
</li>
<li>
<img src="./img/sample2.jpg" alt="Swiper実行デモ画像2">
</li>
<li>
<img src="./img/sample3.jpg" alt="Swiper実行デモ画像3">
</li>
</ul>
</div>
</body>
</html>5. ルールに基づいてclassを設定する
例では以下のように設定しています。
- Swiperを適用したいブロック：.swiper-container
- スライドさせたい要素をまとめた要素：.swiper-wrapper
- スライドさせたい要素：.swiper-slide
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Swiper</title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="./img/sample1.jpg" alt="Swiper実行デモ画像1">
</li>
<li class="swiper-slide">
<img src="./img/sample2.jpg" alt="Swiper実行デモ画像2">
</li>
<li class="swiper-slide">
<img src="./img/sample3.jpg" alt="Swiper実行デモ画像3">
</li>
</ul>
</div>
</body>
</html>
classを設定したことで、レイアウトが変わりました。
6. HTMLにSwiperを起動させるスクリプトを追加する
Swiperを起動させるための次のようなスクリプトを追加してください。
<script>
new Swiper([Swiperを適用したいブロック],[オプション（省略可）]);
</script>Swiperを適用したいブロック
Swiperを適用したい範囲のブロックに設定したclass属性値を指定すれば動作します。上記例のとおりだと、.swiper-containerです。
オプション（省略可）
オプションを設定することで、動作の内容を変更できます。次のようなフォーマットに倣い、オプションを設定します。
{
オプションの名称1:オプションの値1,
オプションの名称2:オプションの値2,
・
・
・
} <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Swiper</title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="./img/sample1.jpg" alt="Swiper実行デモ画像1">
</li>
<li class="swiper-slide">
<img src="./img/sample2.jpg" alt="Swiper実行デモ画像2">
</li>
<li class="swiper-slide">
<img src="./img/sample3.jpg" alt="Swiper実行デモ画像3">
</li>
</ul>
</div>
<script>
!function(){
new Swiper('.swiper-container');
}();
</script>
</body>
</html>オプションを付けずにSwiperを実行した際の挙動例
7. 補足情報
よく使うオプションの設定を一部抜粋してご紹介いたします。画像が切り替わる速度は2秒にしています。
自動でスライドさせる
{'autoplay':2000, 'loop':true}画像が少しずつ変わっていくようにする(クロスフェード)
{'effect':'fade', 'autoplay':2000, 'loop':true}上記オプション(パラメーター)を簡単に説明すると以下の通りです。
autoplay
何秒ごとに画像を切り替えるか設定します。オプションにこのパラメーターが含まれていると、読み込まれたらスライドが始まるようになります。ms(ミリ秒)で設定します。例は2000なので、2000/1000で2秒ということになります。
loop
スライドを繰り返し再生するかどうかの設定です。trueなら繰り返すようになります。
effect
画像の切り替わり方を変更します。’fade’を指定すると画像が徐々に変わっていくようになります。
Swiperにはオプションがいくつも用意されているので、すべてを覚えるのは簡単ではありません。詳細は公式のAPIをご確認ください。
jQueryとJavaScriptは違う？
jQueryとは、JavaScript簡潔に書けるようにするための関数を定義し、独自の形で使えるようにしたもの。内容を見ると全てJavaScriptで書かれています。
別物ではないのですが、100%同じではありません。
そもそも、JavaScriptはプログラミング言語で、jQueryはそのライブラリという位置づけなので、比較できるものではないのです。
上手く言えませんが、jQueryはJavaScriptだけど、JavaScriptはjQueryではない。そのようなイメージです。
同じものと考えてしまうと、思い込みが理解の邪魔をしてしまうかもしれませんので、初めは別物と考えておいておいた方が学習しやすいと思います。
理解を深めた後であれば正しく認識できるようになるはずです。
jQueryは機能特化型のライブラリじゃない
SwiperやZoomingもJavaScriptのライブラリですが、jQueryのように「JavaScriptとどう違う？」という疑問は浮かばないと思います。
おそらくですが、前述の二つのライブラリは、それぞれ、特化した機能があり使い方が明確なためでしょう。
jQueryは特定の機能に秀でているわけではありません。
ホームページに機能を持たせるためではなく、JavaScriptそのものを容易に扱えるようにするためのライブラリで、目指している方向が違うのです。
他のライブラリと立ち位置が大きく違う点も、初学者を苦しめる原因になっているように思います。私も苦しめられました…。
ただ、アニメーションに関する関数も用意されています。
それを使うことで、ホームページに動きを実装可能です。
詳細は割愛しますが、オリジナルの表現を実装したいと考えたときはJavaScriptをそのまま書くより、jQueryを使った方が楽に作成できるはずです。
まとめ
上記以外に、いくつもライブラリがありますので、実装したい要件で検索すると便利なライブラリが出てくるかもしれません。ただし、jQueryを併用しないと動かないライブラリもある点は注意が必要です。
ホームページに動きをつけたいのであれば、基本的にはJavaScriptとCSSを組み合わせて実装します。特に、クリックやスクロールなど、閲覧者の動作に応じて動きをつけたいと考えた場合はJavaScriptの利用は必須です。
冒頭にも記載しましたが、他の人のスクリプトを見ることで勉強になることはたくさんあります。
自分ルールになってしまうと、間違っていたり、もっと短く書けたりする部分にも気づけないままになる可能性があります。
私は人が作ったものを使うことに対して、肯定的に考えられませんでしたが、時短や勉強のためと考えてからは抵抗感も薄れてきました。
利用規約の問題もありますので、いつでも使えるわけではありませんが、使える場合には積極的に使わせていただきましょう！
