更新日 2021.10.14

#1 jQueryプラグインを実装してみる

プラグインを読み込んで使う

jQueryプラグインとは「こんな機能があったら便利だなー」と思った誰かがweb上で配布しているものです。 便利な半面それらを使うにはいくつか注意点があります。

デメリット

① 複数のプラグインを使用している場合、競合(コンフリクト)して機能しない場合がある。
② 便利な半面、余計な機能がついていたりした場合、読み込みが重くなる。
③ 企業サイトの場合、いくら商用フリーだとしても、使わない事が多い。
以上の点から、簡単なサイトでアクセスが大量ではない場合には使っても良いですが、そうでない場合は使用しないほうが良いでしょう。

ライセンスについて

注意しないといけないのは「商用不可」の場合です。この場合は実験用以外には積極的に使わないほうが良いでしょう。 無料の場合は以下のような方法があります。
① MITライセンス
  かなり自由なライセンス。カスタマイズしたり自分のものにできます。
② GPLライセンス
  無料ですがライセンスの継承があるため、完全に自分のものにはできません。

ちなみにjQueryはMITライセンスです。

スライダー機能をjQueryプラグインで実装してみる

簡単な記述だけでスライダーが実装できる、slick を使って実装してみましょう。 以前、基礎#8で作ったレストランサイトのトップページをコーディングしたデータを使います。

slickのサイトが表示されたら、メニューのget it nowをクリックしDownload Nowをクリックしファイルをダウンロードします。 ダウンロードして解凍したフォルダ内のslickというフォルダ内にあるslick.cssとslick-theme.cssとslick.min.jsを使います。

次に、レストランサイトをコーディングしたときのフォルダ内に「js」というフォルダを作ります。 最後にslick.min.jsを先程作ったjsフォルダの中に格納します。slick.cssslick-theme.cssは既存のcssフォルダに格納します。

slickのリファレンスを参照し、htmlのheadに以下を追記します。

<link rel="stylesheet" href="./css/slick.css"/>
<link rel="stylesheet" href="./css/slick-theme.css"/>

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="./js/slick.min.js"></script>
クラス名news__listを探し、この部分をjQueryを使って「スライダー形式」にしてみましょう。

<ul class="news__list">
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news01.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news02.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news03.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news01.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news02.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="news__list-img">
        <img src="./img/news03.jpg" alt="">
      </div>
      <div class="news__list-txt">
        <dl>
          <dt>夏季休業のお知らせ</dt>
          <dd>Jul 18,2019</dd>
        </dl>
      </div>
    </a>
  </li>
</ul>
<div class="news__button">
  <a href="#">MORE</a>
</div>
以前作ったliタグは3つですが、わかりやすくするために6つに増やしてみましょう。
次に、slickフォルダ内のindex.htmlを参照し、styleとclassを追記します。
クラスnews_listに2つのslick用クラスを追記します。

<ul class="news_list regular slider">
headタグ内に記載

/*リファレンスを見ながら適宜変えてみましょう*/
<script>
$(document).on('ready', function() {
  $(".regular").slick({
    dots: true,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4
  });
});
</script>
CSSファイルに追記

.slider {
  width: 80%;
  margin: 100px auto;
}
.slick-slide {
  margin: 0px 20px;
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-slide img {
  width: 100%;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}
.slick-active {
  opacity: .5;
}
.slick-current {
  opacity: 1;
}
このような結果になります。

好きな機能をjQueryプラグインで実装してみよう

googleで「jQuery おすすめプラグイン」などで検索し、気に入ったプラグインを実装してみましょう。
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで! 誰でも無料でできます
cbc-study.slack.com