ホームページにダイナミックな動きや便利な機能を実装する時に役立つのが、jQueryプラグインです。

jQueryプラグインは、数行のコードを差し込むだけでいいほど実装が簡単で、HTMLCSSだけではできないような複雑な動きを表現することができます。
しかし、そんなjQueryプラグインも、たくさんあってどれがいいかわかりません。

そこで今回は、2017年最初にチェックしたいjQueryプラグインを紹介していきます。

言葉だけで説明するのは難しいので、デモサイトへのリンクもご用意しました。
ぜひデモも合わせてご覧ください。
  

2017年最初にチェックしたいjQueryプラグイン10選

1. DateBox

datebox.png
ダウンロード / デモ

DateBoxは、ブラウザやデバイスにかかわらず、テキストボックスに同じように表示することができるカレンダーや時間のプルダウンを実装することができるjQueryプラグインです。
スマートフォンなどで時間を指定する時に上下にスライドするだけで指定できるフリップボックスを、パソコンで表示することも可能です。
BootstrapやjQuery Mobile、jQuery UIなどと互換性があり、デザインをカスタマイズすることもできます。
  

2. Round Slider

roundslider.jpeg
ダウンロード / デモ

Round Sliderは、その名のとおり円形のスライダーを実装することができるjQueryプラグインです。
円形だけではなく、半円や扇型のスライダーを作ることも可能です。CSSを指定すると色や線の太さなどの見た目部分も変更することができます。
  

3. Material Design Hierarchical Display

hieralchical.jpeg
ダウンロード / デモ

Material Design Hierarchical Displayは、マテリアルデザインから着想を得たタイル状のブロックの上にコンテンツを映し出すことができるjQueryプラグインです。
親要素にjQueryを設定すると、その中にある子要素は、ブロックのように分割されて表示されます。
  

4. Tabslet

tabslet.jpeg
ダウンロード / デモ

Tabsletは軽量でクロスブラウザ対応、手軽に扱うことができるタブを実装できるjQueryプラグインです。
数行のコードを書くだけでタブを設置できるだけではなく、アニメーションやタブの切り替え機能なども簡単に実装することができます。
  

5. Readable

readable.jpeg
ダウンロード / デモ

Readableは、デバイスやウィンドウのサイズごとに最適なサイズで段落を表示してくれるjQueryプラグインです。
1つの段落の1行の文字数は45文字、もしくは75文字が良いとされており、デバイスサイズに応じて自動的に45文字や75文字にして、文字サイズも自動でリサイズされます。
わずか1KBと非常に軽量なプラグインとなっています。
  

6. Tooltipster

tooltipstar.jpeg
ダウンロード / デモ

Tooltipsterはモダンでカッコいいツールチップを実装することができるjQueryプラグインです。
シンプルなツールチップであれば短いコードで実装することができますが、オプションとして操作できる機能も豊富にあります。
タップ機能を有効にすることで、スマートフォンでツールチップを表示させることも可能です。
  

7. Unslider

unslider.jpeg
ダウンロード / デモ

Unsliderはシンプルでスタイリッシュなスライダー(カルーセル)を簡単に実装することができるjQueryプラグインです。
短いコードで実装可能ですが、オプションとして設定されている引数もたくさん用意されています。
もちろんモバイル対応しており、スライダー上でスワイプすることでタブを切り替えることができます。
  

8. jQuery Knob

jqueryknob.jpeg
ダウンロード / デモ

jQuery Knobは、円形のダイヤル式スライダーを実装することができるjQueryプラグインです。
先ほど紹介したRound Sliderと機能は似ていますが、こちらは範囲を指定したり、マウスホイールで数値を変えたりすることができます。
CSSを使うことで見た目を変更することも可能です。
  

9. Calendar.js

calendar.png
ダウンロード / デモ

Calendar.jsは、カスタマイズしやすい汎用性を持ったカレンダーを実装することができるjQueryプラグインです。
祝日や記念日をカスタム設定することもできます。
  

10. Trial.js

trial.jpeg
ダウンロード / デモ

Trial.jsは指定したオブジェクトに近くことでイベントを実行することができるjQueryプラグインです。
Trial.js単体では目に見える動作を行うわけではありませんが、他のjQueryプラグインJavaScriptと組み合わせることで効果を発揮します。
1KB未満と非常に軽量なのも魅力の一つです。
  

まとめ

今回は、2017年最初にチェックしたいjQueryプラグインをご紹介しました。

jQueryは、デバイスをはじめとした環境に左右されずに作動するのが魅力であり、プラグインを使うことで複雑な処理を持つ動作も簡単に実装することができます。

ぜひ、気になるプラグインがあればチェックしてみてください。