ライターは「こたつ記事」と「取材記事」どちらに特化すべき？
- “文章下手”でも稼げるライターになる方法
- Webライター
- 連載
JavaScriptをより簡単に実装するためのライブラリであるjQuery。
いまやjQueryはさまざまなフレームワークの基礎となっています。
今回は、jQueryのプラグインをジャンル別に78個ご紹介します。
目次
フォーム作成用プラグイン
1. jQuery formBuilder
jQuery formBuilderというプラグインを使うと、ドラッグ・アンド・ドロップの操作のみでフォームを作成できます。HTMLタグも簡単に挿入できます。要素を選定すると、自動的に順番が決定され、インターネット上で変えられません。XMLとJSONのデータにも対応しています。
2. Submitter
Submitterとは、簡単に連絡フォームを作成できるプラグインです。SubmitterのWebサイトに表示されているコードの通りに転載すると、変更なしで実施できます。「お名前」「メールアドレス」「コメント欄」の項目3個しかないのに、コードを編集すると、項目をより増やせます。
3. Stretchy
Stretchyとは、記入項目に文字を打つと、項目のサイズが大きくなったり、小さくなったりするプラグインのことです。このプラグインは、ユーザーの注目を引きたい場合に使います。JavaScriptを使わず、HTMLでコードを修正できます。
4. Maximum Characters
Maximum Charactersとは、文字制限を超えるユーザーに警告を表示させるプラグインです。
クレジットカード情報の入力などの他のデータベースとの連携が必要なときも使えます。文字数の誤りに早めに気付ければ、UXも向上するでしょう。
5. jQuery MultiSelect
jQuery MultiSelectとは、複数選択のドロップダウンメニューをチェックボックスに変更するプラグインのこと。コードのファイルサイズは8kbと軽量なため、データの負荷が少ないです。UI側はCSSでカスタマイズできます。
6. Textbox Revision Tracker
Textbox Revision Trackerとは、HTMLの修正を管理できるプラグインです。Textbook Revision Trackerは、バージョン管理にも対応しています。記入項目に記入された情報も修正できます。
7. Card
Cardとは、クレジットカード情報の入力フォームを追加できるプラグインです。コードはたったの一行。カードの情報を入力することにより、アニメーションでカードのイメージが表示されます。しかし、カードの絵柄はMastercard、Visa、Discover、American Expressの4社しかないのでご注意を。新たに作るなら、カードの選択肢とロゴをCSSで作らなければなりません。
8. Bootstrap 3 Contact Form with Google’s reCaptcha
reCAPTCHAとは、ボットによるクリック詐欺を防ぐために、チェックボックスをクリックすることや、ユーザーからのアクションを求めているシステムです。reCAPTCHAのボタンを押さないと、メッセージがサイトの送信先に送信されないため、スパムが減ります。このプラグインは、Bootstrapの技術も用いています。
Bootstrap 3 Contact Form with Google’s reCaptcha
9. Bootstrap Maxlength
Bootstrap-Maxlengthとは、HTML5のmaxlengthという要素を活用し、記入項目の文字制限を注意するプラグインのこと。Bootstrap-Maxlengthに、Twitterが使っている、文字制限の表示仕様が挿入されています。Maxlengthにおいて、行の長さによる改行などのカスタマイズできる要素はいくつかあります。
10. Mobiscroll Forms
Mobiscroll Formsとは、パソコンやタブレット端末、複数のOSなどに対応しているフォーム作成のプラグインのこと。フォームの見た目を自由にカスタマイズできます。ボタンとスタイリングをカスタマイズできます。
11. Multipicker
Multipickerは日付や曜日、番号、その他などを選択するためのラジオボタンやチェックボックスを取り付けるためのjQueryプラグいいんです。択一選択、複数選択のいずれにも対応しています。
12. Contact Form to Google Spreadsheet
Contact Form to Google Spreadsheetとは、HTMLとCSS3によるお問い合わせフォームをGoogle Spreadsheetに実装するためのプラグインのこと。フォームを設定するときに、フォームにreCAPTCHAも挿入できます。
Google Spreadsheetに連携しているため、Google Spreadsheetをデータベースとして使い、新しい情報が直接に記入されます。
Contact Form to Google Spreadsheet
13. Dirrty
Dirrtyとは、記入項目が編集されたかどうかを判断するプラグインのことです。Dirrtyを使うと、項目のデータを保存することができ、フォーム内のイベントも発生できます。これによって、システム上では、ユーザーは再度記入しなければいけないのかが分かります。
14. jquery.inputmask
jquery.inputmaskは、フォームの入力エリアに例文（マスク）を表示するするjQueryプラグインです。「何を入力したらいいの？」という疑問を解決し、入力を補助します。お問い合わせやアンケート、投票などに使用すると、とても効果的です。構築も簡単なのでおすすめです。
15. Formbase
Formbaseとは、閲覧者のデバイス頻繁に使われている記入項目をベースに連絡フォームを作成できるプラグインです。実装できるフォームの種類は、テキストエリア、チェックボックス、ラジオボタンです。
16. Form Designer
Form-Designerとは、ログインフォームや、お問い合わせフォーム、コメント欄などを作成すできるツールのこと。Form-Designerのシステムによって、コーディングの知識が必要ないです。必要に応じて、HTMLやCSSのコードも反映されます。49個ほどのフォントが入り、簡単に調整できます。
17. Choices.js
jQuery非依存のプラグインの中でももっとも人気がる Choices.js 。ドロップダウン内で「現在選択中の要素」の色だけ変更する、なんてことができます。ホバーした要素に「.is-highlighted」クラスが付与されるという仕組みです。
18. Addel
Addelは、動的なフォーム設計に使うjQueryプラグインです。入力・選択項目の数をユーザーが自ら増やせるような機能のために作ります。
19. Timon
Timonは、ユーザーのフォーム記入項目をステップ別に分けて表示させたいときに便利です。大量の入力項目が並んでいるよりは心理的負担を軽減できるのでおすすめ。有料のjQueryプラグインです。レスポンシブデザインに対応している他、オプションとデザインが多彩で、簡単にカスタマイズできます。
20. Contact Tabs
タッチタブとは、サイトの右側か左側にあるボタンを押したらフォームが表示されるウィジェットのこと。Contact Tabsとは、タッチタブを作成するためのツールのこと。フォーム12種と記入確認の機能があり、フォームによく使われている項目を自由に組み合わせます。
21. Simple Contact Form
問い合わせフォームを構築するためのプラグイン。AJAXとは、セキュリティのために使われている、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法のこと。Simple Contact Formというプラグインは、AJAXの技術を用いています。
22. Form Recover
間違った情報の送信や予期せぬエラーのために、何千もの注文や重要なメッセージを紛失していると言われています。Form Recoverを使えば、ユーザー側のクラッシュや、ページからの離脱があっても、データを保存できるプラグインです。また、ユーザーが誤って情報を記入すると、自動的に保存されたフォームのデータがあるため、ユーザーはフォームに戻り、記入された情報を再度記入できます。
23. Forms Plus
Forms Plusとは、フォームのフレームワークを作成できるプラグインのこと。CSSを通して、日付/時刻ピッカー、カラーピッカー、スライダ、キャプチャフィールド、スピナー、なと多くの機能をカスタマイズできます。
24. Prosto Forms
Presto Formsとは、フォームを作成できる、多くのJavaScriptライブラリに対応しているプラグインのことです。Presto Formsでは、いくつかの種類のフォームを作成でき、スマートフォンにも対応しています。フォームの種類は30個あり、フォームの項目のどれも追加したり、削除したりできます。
25. Simple Subscription Popup
Simple Signup Formとは、メールリストのためにユーザーの個人情報を収集できる、サインアップフォームを作成するプラグインのことです。カスタマイズも可能。MailChimpやほかのメールデータベースに対応しています。
26. Foggle
jQuery Foggleは、ユーザーの入力に基づいてインタラクティブなアクションを返す機能を実装できるプラグインです。JavaScriptを書いて同じ機能を実現することはできますが、プラグインを使えばコードはたった一行で済みます。
27. Easy Forms
Easy Formsとは、複数のカテゴリーのフォームを作成できるツールのこと。Easy Formsにおいて、ドラッグ・アンド・ドロップで構築ができます。そのうえ、複数の段階用のフォームや、テンプレート、テーマ、アナリティクスなど、さまざまな機能があります。
コーディングを補助するプラグイン
28. Searchable Option List
Searchable Option List (SOL)とは、HTMLによるセレクト要素の見た目をカスタマイズできるプラグインのことです。チェックボックスを挿入し、マウスをドラッグすると、複数の項目を選定できます。
29. SmartSelect
SmartSelectとは、Webサイトにおけるコードを見つけて編集できるプラグインのこと。SmartSelectを使うと、コードがセクションで分かれているため、指定している要素がすぐに分かります。Bootstrapとの互換性もあります。
30. Conditionize.js
Conditionize.jsとは、記入項目にメッセージを表示することと、ユーザーが入力された情報によって項目を非表示できるプラグインのことです。このプラグインがデータ属性を使い、マークアップ言語に要素を残すため、JavaScriptを使わなくても、項目を表示しないようにできます。
31. Hierarchy Select
階層的なselectボックスを実装できるBootstrapプラグイン。Live Hierarchyによって、簡単にコードで要素を調べたり、変更したりできます。コードを見つけやすくなるには、自動的記入の機能が導入されています。
32. File Input
ボタンはブラウザによって少しずつ見え方が変わります。このプラグインは、記入項目のUXを統一したいと願った開発者によって作られました。File Inputを通して、全ブラウザにも対応できるファイルアップロードのボタンに統一できます。
33. JSON Manager
JSON Managerとは、JavaScriptおよびJSONの要素をHTMLのフォームに変更し、またはその逆もできるプラグインのことです。JSONをHTMLに変更すると、コードを修正し、変更できます。コードの編集が終わってから、JSONに切り替え、サイトに再度記入できます。
34. jQueryLined TextArea
JQuery LinedTextAreaはtextareaに行数を自動付与するスクリプトです。jQueryに依存しています。用途はシンプルですがいい機能です。
35. Parsley
Parsley.jsとは、JavaScriptによってフォームの記入を確認できるプラグインのこと。UIとUXを重視にしているため、見た目をカスタマイズできます。複数のフォームにも挿入できます。
36. Pep
Pepというプラグインを使うと、DOM要素をドラッグできるオブジェクトに変更できます。DOM (Document Object Model) とは、ドキュメントを構成するオブジェクトにアクセスする方法のことです。
37. Dragarrange
Dragarrangeとは、ドラッグするだけでDOMの順番を変えられるプラグインのことです。CSSを使う必要がなく、コーディングの定義を呼び出すだけで完成できます。
38. Table-dragger
TableDraggerは、テーブルの列や行をドラッグ&ドロップで入れ替えられるライブラリです。セルの広さを調整でき、行と列の順番まで変更できます。
39. Rich Functional List
Rich Functional Listとは、jQueryのカード型のデザインをWebサイトに挿入できるプラグインのこと。複数の端末と他のjQueryプラグインにも対応しています。カード型のUIでWebアプリケーションを作るのに最適。
デザイン実装のプラグイン
40. Popselect
PopSelectは、クリック可能な要素にフォーカスすると要素がホビングするという機能を実装します。直感的な操作性を実現。
41. jQuery Toggle Candlestick
jQuery Toggle Candlestickとは、チェックボックスをトグルスィッチに変更するプラグインのこと。複数のスタイルを選定できます。jQueryとBootstrapの環境が必要です。IE、Safari、Firefox、Opera、Chromeのブラウザに対応しています。
42. Gridster.js
Gridsterとは、ドラッグ・アンド・ドロップ操作でサイトを作成できるプラグインのこと。簡単にコラムの数を増やしたり、他の機能を減らしたりできます。コラムの位置を変更でき、自由にレイアウトを変えられます。
43. Onebyone Slider
OneByOne Sliderとは、CSS3を活用しているスライダーのプラグインのこと。スマートフォンやタブレット端末など、各デバイスに対応しているため、どんな端末を使っても正確に表示されます。
44. TableDnD
TableDnDとは、行の順位も変更できるプラグインのことです。すでにコードがHTMLとして挿入されているとき、TableDnDのコードを入れると、ドラッグが可能になります。
45. Nestable
Nestableとは、ウィジェットの一覧表を作成できるプラグインのこと。ドラッグ機能を搭載しているため、ユーザーが自由にウィジェットの順番とウィジェットの段階を調整できます。
46. jDashboard
jDashboardとは、ウィジェットのエリアを作成できる、ドラッグ・アンド・ドロップの機能を採用しているプラグインのこと。エリアの作成が完成したら、MySQLかHTML5として保存されます。ユーザーが自由にエリアを動かしたり、閉じたりできます。
47. jQuery Azexo Composer WYSIWYG
jQuery Azexo Composer WYSIWYGとは、HTMLとBootstrapとJavaScriptによるドラッグ・アンド・ドロップでページを作成できるプラグインのこと。コンテンツスライダーや、CSS3かJavaScriptのアニメーションなど、カスタマイズ性が高いです。Bootstrapからの要素を挿入できます。
48. LobiPanel
LobiPanelとは、Bootstrapパンネルを作成できるプラグインのこと。パネルのサイズなどの要素を変更できます。また、URLを設定し、URL先のコンテンツをパンネルに読み込めます。ユーザーもパンネルをドラッグしたり、閉めたりすることなど、自由にパンネルを使えます。
ファイルのアップロードのプラグイン
49. Fileuploader
Fileuploaderとは、HTML5を用いている、ドラッグ・アンド・ドロップでファイルをアップロードするためのツールのこと。複数のファイルを同時にアップすることや、すでにアップしていたファイルを修正することなど、いくつかの機能があります。しかし、ユーザーが大きなファイルや多くのファイルをアップロードできないようにも設定できます。写真の場合、画像を加工できます。
50. Drop Uploader
Drop Uploaderとは、普通の記入項目をファイルのアップロードに対応できるようになるためのプラグインのこと。フォームのHTMLを編集しなくても、プラグインのファイルをアップロードする次第に完成します。そして、同時に複数のファイルをアップロードできます。
51. DropArea
Dropareaは、画像のドラッグアンドドロップによるファイルアップロードのUIを作るライブラリです。 ファイルアップロードをより快適にします。
52. jQuery File Uploader
jQuery File Uploaderとは、AJAXの技術を採用しているファイルアップローダーのこと。このプラグインを使うには、JavaScriptとjQueryの知識が必要です。このプラグインが最新のブラウザに対応しているのに、古いブラウザへの対応が不可能と。このプラグインは、フロントエンドとバックエンドの開発に挿入しやすいうえ、軽量のプラグインになるために開発されました。
53. FileAPI
Webブラウザの操作からローカルファイルにアクセスでき流ようにする機能。セキュリティの問題を解決するFile APIの登場で、画像のアップロード方法が一気に変わった。というのを使用し、ローカルファイルを読み込むことができるようになった。
記入内容チェックができるバリデードプラグイン
54. Form Validation
FormValidationを使用すると、タブ、折りたたみ可能なパネル、アコーディオンなど、ウィザードのようなインターフェイスを検証できます。
55. Bootstrap Validator
記入内容のバリデードができます。jQueryにも対応。エラーメッセージのバリエーションも変更できます。
56. Guardian
Guardianは、Webサイトの入力フォームにバリデーション機能を実装するできるjQueryプラグインです。フォーム内が空白の時や間違った情報を入力している時には、「submit」ボタンを押す前にエラーメッセージを表示させられます。
57. Validatrix
Validatrixは実装方法がとてもシンプル。必須項目の場合、「.required」というコードを記入すると、バリデードフォームが作成されます。そして、どんな要素でも、プラグインのスピードを最適化するには、<div>を入れる必要があります。
58. AttrValidate
AttrValidateとは、記入されたテキストが合っているかどうかを確認できるjQueryのプラグインです。
59. Spider
Spiderとは、ユーザーのメールアドレスを確認できるためのプラグインのこと。コード記入や、郵便番号、クレジットカードの確認などにも使用できます。クレジットカードや郵便番号などの数字を確認できます。ボタンなどのフォームの見た目をカスタマイズできます。
60. Validatr
HTML5で使えるjQueryのプラグインであるValidatrを紹介します。このプラグインを使えば、HTML5上の入力要素をチェックをしれくれます。フォームにおかしな値を入力するとエラーが表示されるという便利なプラグインです。
61. Smoke
Bootstrapと組み合わせると、簡単にエラーメッセージやプログレスバーなどの便利機能が使えるようになるプラグインです。アラートやフルスクリーンなど、他6機能も含まれており、簡単なコードで実装できます。
メニュー作成のプラグイン
62. SmartMenu
SmartMenuを使えば、異なるサブメニューを持つ複数のメニューを作れますカスタマイズ性が高く、色やアニメーション、メニュの形などを調整できます。ブラウザや端末への対応も幅広いです。
63. Select.js
JavaScriptおよびCSSのライブラリを用いているプルダウンメニューの作成に役立つプラグインです。
64. jQuery Nice Select
jQuery Nice Selectとは、nativeのドロップダウンリストのセレクト要素をカスタマイズできるプラグインのこと。上記画像のようなリストになり、CSSによる調整もできるため、対応性が高いプラグインです。
検索窓のプラグイン
65. Advanced Search Form
Advanced Search Formとは、検索窓を設置できるjQueryプラグインです。頻繁に検索されているキーワードや、よく読まれている記事など、複数のサジェストを表示させられる他、フィルタリングオプションとクイックリンクもつけられます。
66. Animated Search Filter Plugin
Animated Search Filter Pluginとは、ユーザーがキーワードを記入するうちに、アニメーションによってサジェストが表示されたり、表示されなくなるプラグインのこと。このプラグインは、コードを記入すると、ページのどこでも表示され、検索フィルターも導入できます。
67. Real-Time Search in JavaScript
Real-Time Search in JavaScriptとは、文字ろリアルタイミング検索してハイライトを当てるプラグインのこと。
Real-Time Search in JavaScript
68. Character and Word Counter
Character and Word Counterは、ワード数を検知するプラグインのです。記入制限を設定できます。エラーメッセージのカスタマイズもできます。
オートコンプリート用のプラグイン
69. Horsey
Horseyとは、オートコンプリートを作成するためのプラグインです。Romeという日程の管理プラグインや、Insigniaというタグ修正のプラグインなどと連携できます。
70. jQueryflexdatalist
オートコンプリート機能が実装できるプラグイン。さらにタグ入力機能も付いています。
71. Cleave.js
オートコンプリート機能は上手に使えばUXの改善に役立てます。例えば金額を入力するとき、0が3つつくごとにカンマを入れるなどといったことができます。
72. superplaceholder.js
フォームに入力してほしい文字列を事前に指定できるjQueryプラグインです。ログインIDがメールアドレスなら「email」と示しておく、といったことができます。
その他のプラグイン
73. pickList
pickListとは、一覧表から要素を選べるインターフェイスを作成できるプラグインのことです。
74. jquery.auto-translate
jquery.auto-translateとは、GoogleやYahooなどの翻訳サービスを引用して、記入項目やサイト内の文章を翻訳するプラグインです。
75. SmartWizard
Smart WizardはjQuery用のステップウィザードプラグインです。Bootstrapにも対応しています。支払い画面や個人情報入力画面などが実装できます。
76. OrderNow
OrderNowとは、請求書とユーザーからの注文を管理するためのプラグインです。レスポンシブに対応しています。カートの各段階において、プロジェクトの各段階用のコードをURLに設置しているため、各ユーザーをトラッキングできます。
77. WizardPro
WizardProとは、Webサイトのウィザードを作成できるプラグインです。AJAXで構成されているため、セキュリティ性が高いです。
78. LobiList
LobiListは、サービス内にToDoリストを作成するためのプラグインです。色を付けることなど、リストの見た目をカスタマイズできます。ドラッグ・アンド・ドロップでリストとタスクのどちらにも操作でき、リストのタスクを完成しているうちに、チェックボックスをクリックできます。
人気のフリーランス・副業求人
IoTの開発プロジェクト！子どもが楽しくハミガキできるゲームコンテンツを開発するUnityエンジニア募集！
- #スタートアップ
職種：iOS/Androidアプリエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
IoTの開発プロジェクト！ヘルスケア・医療データの処理、分析、解析、データマイニングを得意とするインフラエンジニア募集！
- #スタートアップ
職種：バックエンドエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
Workship MAGAZINE（ワークシップマガジン）は、日本最大級のフリーランス・副業メディアです。エンジニア、デザイナー、マーケターなどデジタル系専門職のフリーランス・副業者にとって役立ち、刺激になる情報をお届け。 海外最新情報や働き方ノウハウ・ツール、著名人・専門家インタビューなど、さまざまなコンテンツを発信中です。2017年5月開設。
