スライドショー

jQueryで実践!本格的なWebコンテンツを作るためのプラグイン活用法


jQueryを活用した実践的なプログラムがなかなか書けない
即戦力になる効率の良いプラグインを知りたい
本格的なWebコンテンツを作ってみたい

jQueryである程度プログラムが書けるようになっても、いざ何か成果物としてWebコンテンツを作ろうとしたら上手くいかない…と悩む人も少なくありません。

このような場合にはjQueryのエコシステムを利用するのが一番でしょう。つまり、さまざまな用途で提供されている優秀なプラグインを活用することです。

しかし、一体どんなプラグインを使っていけば良いのでしょうか。

そこで、この記事では初心者でも今日からjQueryで実践的な開発ができるプラグイン活用法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がjQueryの不安を解消できれば幸いです。

スライダーの実装

この章では、Webページでよく使うスライダーを簡単に構築できるプラグインについて見ていきましょう。基本的な導入から使い方まで詳しく学んでいきます。

導入方法

それでは、スライダー機能を簡単に組み込めるjQueryプラグインとしてSlickを使ってみましょう。

【Slick】

slickを使うとオブジェクト形式でオプションを記述するだけでスライダー機能を組み込むことが可能です。レスポンシブにも対応しているので、さまざまなWebサイトで有効活用できるでしょう。

導入方法としては、専用に提供されているCSS・JSをファイルをHTMLから読み込みます。






これらのファイルは以下のようにCDN経由でも配信されています。

https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css
https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js

ファイルをダウンロードするのが面倒な場合は、上記のURLを利用して読み込んでも良いでしょう。

あとは、スライダーとして表示したいコンテンツを配置するだけです。例えば、複数の画像をスライドさせたい場合は次のように記述します。

この例では、3枚の画像をスライドショーとしてスライドさせながら閲覧できるようにします。

スライダーの作り方

Slickの使い方としては、先ほど配置したdiv要素をセレクタとしてslick()を実行するだけです。

$('#slide').slick();

これだけでスライダーとして機能するので大変便利ですね。

しかし、Slickのユニークな点は豊富なカスタマイズにあります。例えば、以下のようなオプションが提供されています。

オプション概要設定値初期値
autoplay自動でスライドさせるtrue / falsefalse
autoplaySpeed自動スライドの切り替え時間数値3000
centerMode画像を中央に配置true / falsefalse
centerPadding画像を中央に配置した時の左右の余白数値50px
dotsスライドのインジケーター(ドット)表示true / falsefalse
draggableドラッグの可否true / falsetrue
fadeフェードイン設定true / falsefalse
initialSlide最初のスライド指定数値0
slidesToScroll一度にスライドする個数数値1
slidesToShow一度に表示するスライドの個数数値1

※その他、オプションの詳細についてはこちらで確認できます。

これらのオプションはslick()の引数として簡単に指定することができます。例えば、自動再生・インジケーター・フェードインを設定してみましょう。

$('#slide').slick({

    autoplay: true,
    dots: true,
    fade: true

});

このようにオブジェクト形式で簡単に指定することができます。

実際の挙動を確認するために、以下のサンプルデモをぜひチェックしてみてください!

See the Pen slick-sample by sato ken (@s_masato) on CodePen.0

フォームバリデーションの実装

この章では、フォームの入力に誤りがないかを検証するためのバリデーション機能について見ていきましょう。プラグインの導入から実際の検証方法について学んでいきます。

導入方法

ユーザーがこちらの意図したとおりにフォームへ入力したかを検証するため、バリデーション機能を実装する簡単な方法としてValidationプラグインが提供されています。

【 jQuery Validation Plugin 】

ゼロから実装しようとするとプログラムが膨大な量になりがちなバリデーションですが、こちらのプラグインを利用すれば非常にコンパクトに収まります。

導入方法としては、scriptタグでプラグインのファイルを読み込むだけなので簡単です。


CDN経由で利用することも可能なので、以下のURLをscriptタグに指定すれば同じように利用することができます。

https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js

あとはフォームを用意するだけなのですが、今回はサンプルとして以下のような簡単なフォームを配置してみます。

名前:

この例では、文字列を入力するボックスと送信ボタンだけの単純なものです。これを利用してどのようにバリデーションを組み立てていくのかを学んでいきましょう。

バリデーションルールの作り方

それでは、バリデーションの実装をしていきましょう!

基本的な作成方法としては、対象となるフォームをセレクタとして指定してvalidate()メソッドを実行します。

$("#myform").validate({
    rules: {

        //ここにルールを記述する 

    }
});

validate()の引数にオブジェクト形式でバリデーションルールを設定することができます。例えば、入力ボックスを必須項目とし、3〜8文字以内で入力するというルールを作ってみましょう。

$("#myform").validate({
  rules: {
      mytxt: {
          required: true,
          minlength: 3,
          maxlength: 8
      }
  }
});

【mytxt】はinput要素のname属性値になります。これを対象として、3つのルールを設定しているというわけです。これだけの記述で、すでにバリデーションが機能しているので誤った入力をするとエラーメッセージが表示されます。

しかし、デフォルト状態だとメッセージが英語なので、これを日本語に変換しておくと良いでしょう。

日本語にするのは簡単で、messagesプロパティに先ほど設定したルールと同じプロパティに日本語を指定するだけです。

messages: {
    mytxt: {
        required: ' これは必須項目です',
        minlength: '3文字以上で入力してください',
        maxlength: '8文字以内で入力してください'
    }
}

これでメッセージが日本語で表示されるようになります。

これまでのサンプルデモをぜひチェックして、動作確認をしておくとさらに理解が深まるでしょう。

See the Pen jQuery-validation-sample by sato ken (@s_masato) on CodePen.0

スクロールエフェクトの実装

この章では、画面スクロールをスムーズなアニメーションで実現できるプラグインについて見ていきましょう。主に、プラグインの導入からスクロールの実装方法について学んでいきます。

導入方法

画面のスクロールを簡単にアニメーションさせることができるプラグインとして、Scrollifyを利用したプログラミングが簡単なので試してみましょう!

【Scrollify】

Scrollifyを利用すると、特定のHTML要素を指定するだけですぐにでもスクロールアニメーションを実装することができます。

導入方法はプラグイン用のJSファイルをscriptタグから読み込むだけです。


もちろん、CDN経由で以下のURLをscriptタグで読み込んでも同様に利用することができます。

https://cdn.jsdelivr.net/gh/lukehaas/Scrollify/jquery.scrollify.js

あとは、画面をスクロールさせるHTML要素を用意するだけです。今回は、3つのセクションを以下のように用意しておきました。

1ページ
2ページ
3ページ

それぞれのdiv要素にピッタリと画面がスクロールするようにアニメーションさせてみましょう!

スクロールエフェクトの作り方

先ほど作成したHTMLのdiv要素には、Class属性値として【page】を指定しましたね。

実は、Scrollifyはこのような属性値を目印にして自動的にスクロールアニメーションを生成してくれます。

そのため、以下のように目印となるセレクタを指定することで簡単に実行することができます。

$.scrollify({

    section : ".page"

});

このように引数でオプションとして、sectionプロパティにセレクタを指定するだけです。

他にもオプションとして以下のような設定も可能です。

オプション概要設定値
sectionスクロールの目印となるセレクタ文字列(セレクタ)
easingスクロールアニメーションのパターン文字列(イージングタイプ)
scrollSpeedスクロールする速度数値
offsetスクロール終点の初期位置の設定数値
touchScrollタッチ操作の可否true / false

※その他、オプションの詳細についてはこちらで確認できます。

例えば、スクロールのスピード・タッチスクロール・オフセットをそれぞれ設定する場合は次のようになります。

$.scrollify({

    section: ".page",
    scrollSpeed: 2000,
    touchScroll: false,
    offset: 10

});

実際の挙動を以下のサンプルデモからぜひ確認してみてください!
(キーボードの矢印キーにも対応しています)

See the Pen scrollify-sample by sato ken (@s_masato) on CodePen.0

まとめ

今回は、jQueryで実践的なWebコンテンツを手軽に開発できるプラグインについて学習しました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • スライダー系のプラグインはSlickを使う
  • フォームのバリデーション機能の実装にはValidationプラグインを使う
  • スクロールアニメーションを実装するにはScrollifyを使う

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。