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

2017/05/25 20:33

web

時間経過で画像が切り替わっていくスライドショーや、画像をクリックしたときに、ページ遷移なしで拡大画像をポップアップで表示するなど、動きのあるホームページが当たり前になっています。

これらはJavaScriptによって実装されているので、自分のホームページでも使いたいと思うと、専門の知識や技術が必要になります。

では、JavaScriptを修めた人しか使えないのか、というと、そのようなことはありません。

「ライブラリ」と呼ばれる、有志の人が公開してくれているJavaScriptのプログラムを活用することで、手軽に実装可能です。

ここでは、スライドショーのためのライブラリ『Swiper』、画像ポップアップのためのライブラリ『Zooming』、二つを紹介いたします。

人の書き方を見ることで学べることもたくさんあります！ライブラリを使いながら、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を実行した際の挙動例

DEMOページ

7．補足情報

よく使うオプションの設定を一部抜粋してご紹介いたします。画像が切り替わる速度は2秒にしています。

自動でスライドさせる

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

DEMOページ

画像が少しずつ変わっていくようにする(クロスフェード)

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

DEMOページ

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

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

Swiperにはオプションがいくつも用意されているので、すべてを覚えるのは簡単ではありません。詳細は公式のAPIをご確認ください。

URL：http://idangero.us/swiper/api/

別の記事でもSwiperの使い方について紹介しておりますので、よければそちらもご覧ください。

スライダープラグイン「Swiper」で前後の画像を表示する

jQueryなしで動作し、動作が軽量。また膨大なオプションが用意されており、非常にカスタマイズ性に優れています。

画像のポップアップを実装するライブラリ『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ページ