近年、スピードが重視されるWeb制作において、使用頻度が多くなってきたのが「Bootstrap」です。
Bootstrapは機能性に富んでいてCSSフレームワークの中でも人気があります。
さらにjQueryプラグインを足す事により、機能的になり開発速度を加速してくれるので、Webサイトをより良く仕上げるためには、jQueryプラグインは欠かせない存在となっています。
HTMLに既に用意されているスタイルを適用するだけで手軽に便利な機能を実装できるjQueryプラグインは、Web制作の現場でもよく使われ、Webシステムの管理画面などでBootstrapを使用するケースも増えてきています。
しかしリリースされているjQueryプラグインの内容は様々で、どれを使用すればいいか迷う方も多いでしょう。
そこで今回はWebデザインの幅が広がる使い勝手のよいjQueryプラグインについてご紹介します。もくじ
- カレンダーをカスタマイズ「FullCalendar」
- カレンダーから日付入力「Datepicker for Bootstrap」
- 素早く簡単なセレクトボックス作成「Quick[select]」
- 簡単に文字数をカウント・表示してくれる「Bootstrap Maxlength」
- アイコンに迷ったらこれ「Font Awesome」
- まとめ
◆カレンダーをカスタマイズ「FullCalendar」
FullCalendarは、Googleカレンダーのように、カレンダ―上に予定情報などを表示することができるプラグインです。
特にECサイトで多くみられる、営業日や営業時間、商品発送日の指定などといった重要な役割を持つカレンダーは、Webサイトの基本機能といえます。
デフォルト設定のままでも十分に使え、非常に見やすい構成になっているので、初心者の方でも簡単に実装できます。
また、カラーやデザインをアレンジすることも可能で、自分の思い通りにカスタマイズが行えるのも魅力です。
・関連URL
https://fullcalendar.io
◆カレンダーから日付入力「Datepicker for Bootstrap」
Datepicker for Bootstrapは、日付入力に特化した日付入力補助プラグインです。
表示されるカレンダーからユーザーが直感的に日付を選ぶことができます。
文字入力の手間が省くことができ、日にちの他にも特定の月や年を選択することも可能で、過去の日付に関しても非表示に設定することができます。
・関連URL
https://www.eyecon.ro/bootstrap-datepicker/
◆素早く簡単なセレクトボックス作成「Quick[select]」
Quick[select]は素早く簡単にセレクトボックス（メニュー）から選択肢を選ぶことができるプラグインです。
ユーザーが問い合わせや商品購入、資料請求などに利用するフォームは、コンバージョンに直結します。
フォーム入力ではユーザーに負担が少なく、スムーズに入力できることが重要とされます。
通常セレクトボックスを選択するまでは2クリック必要となりますが、Quick[select]を使えば1クリックで済ますことが可能になります。
メニューも豊富でプルダウン形式やリスト形式、複数の選択肢を選択可能なメニューなどを備えています。
メニューを選択不可にすることもできます。
またデザインのテーマを変更することも可能です。
◆簡単に文字数をカウント・表示してくれる「Bootstrap Maxlength」
Bootstrap Maxlengthはテキストボックスに入力した文字数を表示・カウントするプラグインです。
文字数に制限のある文章の入力など、IDやパスワードの設定の際に役立ちます。
フォームに入力した文字数をカウントするだけでなく、そのフォームに入力できる最大の文字数を表示してくれます。
また、指定された文字数をオーバーすると入力できなくなる仕組みを作ることもできます。
・関連URL
http://mimo84.github.io/bootstrap-maxlength/
◆アイコンに迷ったらこれ「Font Awesome」
Font Awesomeは、全675種類（※Version.4.7.0現在）のアイコンがセットになっているアイコンフォントプラグインです。
Webサイト制作においてサイトを彩るアクセントとしてよく活用されるパーツには、ナビゲーションや見出しといったアイコンが多いですが、一つ一つ制作することは大変です。
さまざまな種類のアイコンを利用したい場合は活用すると良いでしょう。
またFont Awesomeを使えば、HTMLファイルの任意の場所に記載された指定のタグとクラスを記述するだけで、手軽にアイコンを表示することが可能です。
アイコンを表示拡大・縮小してもぼやけることのないベクター形式なのも使い勝手が良い点となっています。
・関連URL
https://fontawesome.com/?from=io
◆まとめ
今回ご紹介した以外にも便利なjQueryプラグインは多数あります。
Webサイトの目的にあったプラグインを使うことで、見栄えもよくなりサイトをより有効に活用できます。
また、デザインにはあまり自信のないエンジニアの方でもプラグインを使えば、自力で「ほどよい」デザインのサービスを作ることができますので積極的にプラグインを導入してみてはいかがでしょうか。