簡単に使えるホームページに動きをつけるJavaScriptライブラリ

カテゴリー: Web制作

タグ: HTML; アニメーション; JavaScript; Swiper; Zooming; ライブラリ

Webクリエイター

2017.05.25

時間経過で画像が切り替わっていくスライドショーや、画像をクリックしたときに、ページ遷移なしで拡大画像をポップアップで表示するなど、動きのあるホームページが当たり前になっています。これらはJavaScriptによって実装されているので、自分のホームページでも使いたいと思うと、専門の知識や技術が必要になります。じゃあ、JavaScriptを修めた人しか使えないのか、というと、そのようなことはありません。「ライブラリ」と呼ばれる、有志の人が公開してくれているJavaScriptのプログラムを活用することで、手軽に実装可能です。ここでは、スライドショーのためのライブラリ『Swiper』、画像ポップアップのためのライブラリ『Zooming』、二つを紹介いたします。人の書き方を見ることで学べることもたくさんあります！ライブラリを使いながら、JavaScriptの知識を深めていきましょう！

1 スライドショーを実装するライブラリ『Swiper』
- 1.1 Swiperの実装・使い方
2 画像のポップアップを実装するライブラリ『Zooming』
- 2.1 Zoomingの実装・使い方
3 JavaScriptライブラリの定番！jQueryについて
- 3.1 jQueryとJavaScriptは違う？
- 3.2 jQueryは機能特化型のライブラリじゃない
4 まとめ

スライドショーを実装するライブラリ『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>

4. ルールに基づいて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を設定したことで、レイアウトが変わりました。

5.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を実行した際の挙動例

DEMOページ：https://xn--web-oi9du9bc8tgu2a.com/demos/library-javascript/sample-swiper/

6.補足情報

よく使うオプションの設定を一部抜粋してご紹介いたします。画像が切り替わる速度は2秒にしています。 【自動でスライドさせる】 DEMOページ：https://xn--web-oi9du9bc8tgu2a.com/demos/library-javascript/sample-swiper/demo2.html


  {'autoplay':2000, 'loop':true}

【画像が少しずつ変わっていくようにする(クロスフェード)】 DEMOページ：https://xn--web-oi9du9bc8tgu2a.com/demos/library-javascript/sample-swiper/demo3.html


  {'effect':'fade', 'autoplay':2000, 'loop':true}

上記オプション(パラメーター)を簡単に説明すると以下の通りです。

autoplay: 何秒ごとに画像を切り替えるか設定します。オプションにこのパラメーターが含まれていると、読み込まれたらスライドが始まるようになります。ms(ミリ秒)で設定します。例は2000なので、2000/1000で2秒ということになります。
loop: スライドを繰り返し再生するかどうかの設定です。trueなら繰り返すようになります。
effect: 画像の切り替わり方を変更します。'fade'を指定すると画像が徐々に変わっていくようになります。

Swiperにはオプションがいくつも用意されているので、すべてを覚えるのは簡単ではありません。詳細は公式のAPIをご確認ください。 URL：http://idangero.us/swiper/api/ 別の記事でもSwiperの使い方について紹介しておりますので、よければそちらもご覧ください。 →スライダープラグイン「Swiper」で前後の画像を表示する

画像のポップアップを実装するライブラリ『Zooming』

画像をクリックした際に、ページ移動などをせず、拡大版の表示をさせる表現です。通販サイトなどでよく使用されています。LightBox（ライトボックス）という名前のライブラリで一躍有名になり、派生版がいくつも出ています。この記事で紹介するZoomingも派生版ですが、手軽に使えるので本家ではなくこちらをご紹介いたします。

Zoomingの実装・使い方

1.公式からZoomingのファイルをダウンロードする。

類似のライブラリが多く、検索エンジンではなかなかヒットしないので次のリンクをご参照ください。 URL：http://desmonding.me/zooming/

公式サイト下部のSTART JOURNYをクリックすると『github』という外部サイトに遷移しますので、そのまま次の順にクリックしてください。

『Clone or download』をクリック。
『Download ZIP』をクリック

2. ダウンロードしたzipファイルを解凍(展開)し、本体のjsファイルをコピーする

※build フォルダの中に入っている、『zooming.js』もしくは『zooming.min.js』というファイルです。

3. htmlファイルにscriptタグを追加し、先ほどコピーしたjsファイルを読み込む


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Zooming</title>
  <script src="./zooming.min.js"></script>
</head>
<body>
<div>
  <ul>
    <li>
      <img src="./img/sample1.jpg" alt="Zooming実行デモ画像1">
    </li>
    <li>
      <img src="./img/sample2.jpg" alt="Zooming実行デモ画像2">
    </li>
    <li>
      <img src="./img/sample3.jpg" alt="Zooming実行デモ画像3">
    </li>
  </ul>
</div>
</body>
</html>

4. ルールに基づいてポップアップさせたいimg要素に属性を追加する。

jsファイルを読み込み、img要素にdata-action=”zoom”を指定します。画像が並んだページに追加します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Zooming</title>
  <script src="./zooming.min.js"></script>
</head>
<body>
<div>
  <ul>
    <li>
      <img src="./img/sample1.jpg" alt="Zooming実行デモ画像1" data-action=”zoom”>
    </li>
    <li>
      <img src="./img/sample2.jpg" alt="Zooming実行デモ画像2" data-action=”zoom”>
    </li>
    <li>
      <img src="./img/sample3.jpg" alt="Zooming実行デモ画像3" data-action=”zoom”>
    </li>
  </ul>
</div>
</body>
</html>

jsファイルを読み込み、data-action属性を追加しただけですが、動作するようになっています。

DEMOページ：https://xn--web-oi9du9bc8tgu2a.com/demos/library-javascript/sample-zooming/ オプションも用意されていますので、細かな調整が可能です。詳細は公式のAPIをご確認ください。 URL：http://desmonding.me/zooming/docs/index.html#options

JavaScriptライブラリの定番！jQueryについて

ライブラリを調べていると、『jQuery』という単語がついたものがたくさん出てくると思います。jQueryとはJavaScriptのライブラリの一つで、冗長になる記述を簡潔に書けるようにしてくれるものです。ライブラリのなかにはjQueryと併用することでしか動かないものも多いのでご注意ください。

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の利用は必須です。冒頭にも記載しましたが、他の人のスクリプトを見ることで勉強になることはたくさんあります。自分ルールになってしまうと、間違っていたり、もっと短く書けたりする部分にも気づけないままになる可能性があります。私は人が作ったものを使うことに対して、肯定的に考えられませんでしたが、時短や勉強のためと考えてからは抵抗感も薄れてきました。利用規約の問題もありますので、いつでも使えるわけではありませんが、使える場合には積極的に使わせていただきましょう！