jQueryプラグインの使い方について解説してほしい
本格的なWebコンテンツを作ってみたい
JavaScript / jQueryで制作したWebサイトに、もっとユーザー目を引くような演出を加えたり、便利な機能を実装したいと考えていませんか？
jQueryには、色々な拡張機能を備えたプラグインが使えきれないほどにあります。さらにjQueryプラグインは自作することもできるので、その可能性は無限に広がっています。
そこで今回の記事では、おすすめのjQueryプラグインを機能別に15個まで紹介しているので、役に立ちそうなプラグインがあれば、ぜひ活用してみてください。また、数あるjQueryプラグインうち「Slick」「Validation」「Scrollify」については、使い方も解説しているので、まだ実装していないという方は、ぜひ導入してみましょう。
jQueryのプラグインとは？
「jQuery」とは、JavaScript（プログラミング言語）用のライブラリのことであり、よく使用される複数のプログラムを部品のようにして集めたものです。例えば、JavaScriptで数行になるソースコードが、jQueryを利用するとたったの1行で記述できるようになります。
そして、「プラグイン」は機能を拡張するためのソフトウェアのこと。jQueryの拡張機能を担う「プラグイン」には、スライドショーの設置やアニメーションも実装できたりと種類が豊富にあります。
次のセクションでは、おすすめの「jQueryプラグイン」を紹介しますので、探している方は参考にしてください。
jQueryで人気のおすすめプラグイン15選【機能別に紹介】
ここからは、jQueryプラグインを機能別で紹介していきますので、興味のあるものはぜひお試しください。
スライドショーを設置するjQueryプラグイン
Webサイトにスライドショーを設置する「スライダー系」のプラグインをいくつか紹介します。
slick
slickは、わりと簡単に使用できる「スライダー系」のjQueryプラグインです。完全レスポンシブ対応となっており、デバイスに応じて見せ方を変更できます。また、スマートフォンのスワイプ動作をオン・オフで切り替える設定も可能なので、機能は多彩といえるでしょう。
「slick」については、後ほど詳しい使い方も解説しているので、そちらも参考にしてください。
Owl Carousel 2
Owl Carousel 2は、タッチ、スワイプ、マウスホイールにも対応しているカスタマイズ性の高いjQueryプラグインです。オプション設定の項目は60以上もあるので、自分好みのスライドショーを設定できます。
また、Owl Carousel 2では、使用しない機能を切り離すこともできるので、軽量化も自在に行えます。
One Page Scroll
One Page Scrollは、「1ページずつ流れるようにスクロールできるスライドショー」を実装できる画期的なjQueryプラグインです。そこまでの機能を実装するならサイトが重くなるのでは？と思われそうですが、こちらのプラグインはむしろ軽量な設計になっています。
また、One Page Scrollの詳しい使い方についてはこちらの記事で解説されているので、興味のある方はご覧になってください。
サイトにおしゃれな動きを実装するjQueryプラグイン
こちらではサイトでおしゃれな動きを見せてくれるjQueryプラグインを紹介します。
Material Design Hierarchical Display
ちょっとプラグイン名が長いですが、Material Design Hierarchical Displayは、マテリアルデザインから発想されたjQueryプラグインです。タイル状に分割されたブロックの上にコンテンツが表示される、といった表現をしてくれます。
言葉で説明するよりもデモを見たほうが伝わるので上のリンクからご覧になってください。おしゃれでカッコいい動きをします。
jQuery Knob
jQuery Knobは、円形のダイヤルをグルグル回して数値を調整できるjQueryプラグインです。数値の非表示、色やスキンの変更などカスタマイズ性も高いですね。
公式サイトでデモが公開されているので、色々といじって体験してみてください。
Calendar.js
Calendar.jsは、おしゃれなカレンダーを実装できるjQueryプラグインになります。記念日や祝日などをカスタマイズして設定できるのは便利ですね。汎用性があるので使いやすいプラグインです。
アニメーションが実装できるjQueryプラグイン
サイトを魅力的に見せるアニメーションを実装できるjQueryプラグインを紹介しますのでご覧ください。
Caption Hover Effects
Caption Hover Effectsは、画像にマウスオーバーすると縮小したり、斜め前に飛び出たりするアニメーションを実装できます。
こちらの記事では、Caption Hover Effectsの使い方やデモが公開されているので、興味のある方は参考にすると良いでしょう。実装の手順もそんなに難しくないので、ぜひお試しくだい。
CSShake
ダウンロードページ（デモあり）
CSShakeは、指定した要素にぶるぶると振るえるアニメーションが実装できます。アニメーションの種類も、「ゆっくり動く」「激しく動く」「回るように動く」など10種類以上あります。
「ボタンのクリック率を上げたい」などの目的で使うと効果的なのではないでしょうか。
Skrollr
Skrollrは、「パララックス」という視差効果を利用したアニメーションが実装できるプラグインです。大きいものは早く、小さいものは遅く動かすことで、立体的なアニメーションをサイトで実現できます。
スクロールするごとに画面を徐々に暗くしたりなど、他にも多彩なアニメーションが可能になっています。
スクロールバーをカスタマイズできるjQueryプラグイン
スクロールバーのデザインをカスタマイズできるjQueryプラグインを紹介します。
custom content scroller
custom content scrollerは、ブラウザのスクロールバーを自分好みのデザインにカスタマイズできるjQueryプラグインになります。設定できる項目が非常に豊富なことが、このプラグインの特徴なので、逆にどんなデザインにしようか悩んでしまうくらいです。こだわりの強い方にはおすすめですね。
slimScroll
slimScrollも、スクロールバーのデザインをカスタマイズできるjQueryプラグインになりますね。バーの幅、位置、高さ、カラー、透明度など一通りは調整可能です。初心者の方は、slimScrollの解説記事を参考に実装してみてください。
tableにスクロールバーを表示するjQueryプラグイン
table（テーブル）にスクロールバーを表示するためのjQueryプラグインを紹介します。
Scroll Table
Scroll Tableを使えば、行数が多いテーブルにスクロールバーをつけられるので、見やすく改善することができます。機能的にはシンプルですが、手軽に実装できるので覚えておいて損はありません。
fixedTblHdrLftCol
名称が読みづらいプラグインですが、機能のイメージとしてはExcelの「ウィンドウ枠の固定」に近いです。テーブルのヘッダー部分と左カラムを固定してスクロールできるようにするjQueryプラグインになります。
スクロール時にフェードイン・アウトさせるjQueryプラグイン
最後は、スクロールのタイミングに合わせてフェードイン・アウトといったカッコいい演出ができるjQueryプラグインを紹介します。
FadeThis
FadeThisは、スクロールしたタイミングでスライドさせながらフェードイン・アウトができるjQueryプラグインです。オプションでスライドのスピードを調整したり、フェードイン・アウトするのを繰り返さないように設定することもできます。
inview.js
inview.jsは「ふわっ」とした動きのフェードインを実装するプラグインになります。このjQueryプラグインについては、こちらの記事で使い方やイメージしやすいデモが公開されているのでご覧ください。
初心者でも分かるjQueryプラグインの使い方
このセクションからは、Slick、Validation、ScrollifyのjQueryプラグインについて初心者の方でも分かりやすいように、使い方を解説していきます。サンプルデモも参考にしてくださいね。
スライダーの実装
この章では、Webページでよく使うスライダーを簡単に構築できるプラグインについて見ていきましょう。基本的な導入から使い方まで詳しく学んでいきます。
導入方法
それでは、スライダー機能を簡単に組み込めるjQueryプラグインとしてSlickを使ってみましょう。
【Slick】
slickを使うとオブジェクト形式でオプションを記述するだけでスライダー機能を組み込むことが可能です。レスポンシブにも対応しているので、さまざまなWebサイトで有効活用できるでしょう。
導入方法としては、専用に提供されているCSS・JSをファイルをHTMLから読み込みます。
これらのファイルは以下のようにCDN経由でも配信されています。
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.min.js https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
ファイルをダウンロードするのが面倒な場合は、上記のURLを利用して読み込んでも良いでしょう。
あとは、スライダーとして表示したいコンテンツを配置するだけです。例えば、複数の画像をスライドさせたい場合は次のように記述します。
この例では、3枚の画像をスライドショーとしてスライドさせながら閲覧できるようにします。
スライダーの作り方
Slickの使い方としては、先ほど配置したdiv要素をセレクタとしてslick()を実行するだけです。
$('#slide').slick();
これだけでスライダーとして機能するので大変便利ですね。
しかし、Slickのユニークな点は豊富なカスタマイズにあります。例えば、以下のようなオプションが提供されています。
| オプション | 概要 | 設定値 | 初期値 |
|---|---|---|---|
| autoplay | 自動でスライドさせる | true / false | false |
| autoplaySpeed | 自動スライドの切り替え時間 | 数値 | 3000 |
| centerMode | 画像を中央に配置 | true / false | false |
| centerPadding | 画像を中央に配置した時の左右の余白 | 数値 | 50px |
| dots | スライドのインジケーター（ドット）表示 | true / false | false |
| draggable | ドラッグの可否 | true / false | true |
| fade | フェードイン設定 | true / false | false |
| 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.
フォームバリデーションの実装
この章では、フォームの入力に誤りがないかを検証するためのバリデーション機能について見ていきましょう。プラグインの導入から実際の検証方法について学んでいきます。
導入方法
ユーザーがこちらの意図したとおりにフォームへ入力したかを検証するため、バリデーション機能を実装する簡単な方法としてValidationプラグインが提供されています。
【 jQuery Validation Plugin 】
ゼロから実装しようとするとプログラムが膨大な量になりがちなバリデーションですが、こちらのプラグインを利用すれば非常にコンパクトに収まります。導入方法としては、scriptタグでプラグインのファイルを読み込むだけなので簡単です。
CDN経由で利用することも可能なので、以下のURLをscriptタグに指定すれば同じように利用することができます。
https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/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.
スクロールエフェクトの実装
この章では、画面スクロールをスムーズなアニメーションで実現できるプラグインについて見ていきましょう。主に、プラグインの導入からスクロールの実装方法について学んでいきます。
導入方法
画面のスクロールを簡単にアニメーションさせることができるプラグインとして、Scrollifyを利用したプログラミングが簡単なので試してみましょう！
【Scrollify】
Scrollifyを利用すると、特定のHTML要素を指定するだけですぐにでもスクロールアニメーションを実装できます。導入方法は、プラグイン用のJSファイルをscriptタグから読み込むだけです。
もちろん、CDN経由で以下のURLをscriptタグで読み込んでも同様に利用することができます。
https://cdn.jsdelivr.net/gh/lukehaas/Scrollify/jquery.scrollify.js
あとは、画面をスクロールさせるHTML要素を用意するだけです。今回は、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.
まとめ
今回は、サイトで様々な演出を可能にしてくれるjQueryプラグインを機能別に紹介しました。
それぞれの詳しい使い方について知りたい時は、プラグイン名などで検索すると解説してくれているサイトがありますので、そちらを参考にしてください。jQueryプラグインは他にもたくさんあるので、時間のある方は探してみると新たな発見があるのではないでしょうか。
また、
- スライダー系のプラグイン「Slick」
- フォームのバリデーション機能を実装するプラグイン「Validation」
- スクロールアニメーションを実装するプラグイン「Scrollify」
上記のプラグインについては、記事内で詳しい使い方を解説しているので、他に紹介したプラグインも含めて是非サイトに実装して色々なエフェクトや機能を楽しんでみましょう。
