フォームをぐっと使いやすくする!ウィザード型jQueryプラグイン6選【2017年版】

2017/10/11

James Hibbard

272

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

Webサイトのフォームの作成にはjQueryのプラグインが便利。中でも対話形式の使いやすいフォームを作成できるjQueryプラグインを厳選して紹介します。

ページの更新がなく、指示に沿って記入できるjQuery用のウィザード形式のフォームを作成するためのjQueryプラグインがあります。ユーザーデータを一度に入力させる大きなフォームなら、ウィザード形式に変えることで、小さなステップの入力に分割できます。これならユーザーが長い入力フォームにうんざりすることもなくなり、進行状況も示しせます。

この記事ではおすすめjQueryフォームウィザードを6つ、それぞれの特徴を踏まえて紹介します。有料版や自作する方法も少し触れます。jQueryのフォームウィザードを求めている人の助けになれば幸いです。

1.jQuery steps

jQuery Stepsはウィザード型のインターフェイスを簡単に作れる気の利いたUIコンポーネント群です。コンテンツをパーツに分け、整えて表示します。非同期読み込みやステートの保持(ステップごとに入力を保存)、項目を移動する際の効果などの機能があります。NuGetもしくはBowerでインストール可能です。参考文献や高機能なAPIを備えています。

jQuery Steps

WebサイトGitHubデモ

2.jQuery Smart Wizard

Smart WizardはBootstrapに対応した柔軟でカスタマイズ性に富んだjQuery用のステップウィザードプラグインです。簡単に綺麗で格好良いフォームや支払い画面、登録画面などが実装できます。テーマ機能(初期テーマも多数あり)、URLナビゲーション、ステップ選択、さらには動的に手順の表示・非表示の切り替えなどの機能ががあります。npm、Bower、composerでインストール可能で、参考文献が充実していて、高機能なAPIも備えています。

jQuery Smart Wizard

WebサイトGitHubデモ

3.formToWizard

Webフォームも複数ステップ型のウィザードに変える軽量なjQueryプラグインです。フォームに使われている<fieldset>タグごと個別の手順に分割され、進む・戻るボタンも付加されます。機能の数は上記2つのプラグインには及びませんが、jQuery Validationプラグインとの統合により入力値の検証(バリデーション)機能が使えます。プラグインは1ファイルだけなのでGitHubから入手するだけ利用できます。JavaScriptが有効でない場合も破綻しないところもポイントです。

formToWizard

GitHubデモ

4.jQuery Stepy

jQuery Stepyはカスタマイズ可能なフォームウィザードが作れるプラグインです。マークアップ構造で特定クラスが使える状態のフォームが前提です。プラグインを初期化するだけでフォームウィザードが完成します。

特に初期設定はありませんが、手順を移動する機能、進む・戻る・終了のボタン、遷移時の効果、検証(バリデーション)プラグインとの連携などの機能があります。APIも良くできており、手順が進んだときや現在の手順が読み込まれたときにコールバックを実行できます。

jQuery Stepy

WebサイトGitHub

5.Twitter Bootstrap Wizard

Twitter Bootstrapプラグインは、タブ型の整ったフォームを生成します。手順をボタンで進めるフォームを作り、手順ごとイベントをフックできます。また、Bootstrapとの強固な統合にあります。値の検証、手順の進行を示すプログレスバー、プログラムで手順を有効・無効化するなどの機能が最初から備わっています。プラグインはGitHubのクローンのほかBower(ただし推奨されない)でもインストール可能です。文献類やAPIの機能も比較的整っています。

twitter-bootstrap-wizard

WebサイトGitHubデモ

6.jQuery.wizard

最後は選択分岐に対応した非同期フォームウィザードのjQuery.wizardです。ウィザードの基本的な構成は手順と分岐(オプション)です。単純で分岐の無いフォームなら全手順を含みますが、複雑なフォームは複数の分岐や入れ子構造の分岐になります。フォームの手順や分岐の数がいくつになるかは開発者次第です。ウィザードには遷移先を判断するための有限オートマトン(有限状態機械、finite-state machine、FSM)を使ってます。

jQuery.wizardはとりわけ参考文献が充実していて、APIの機能も優れています。npmBowerでインストール可能で、互換性もInternet Explorer 6まで遡って対応しています。ほかのプラグインとの統合を念頭に設計され、人気上昇中のjQuery Validationも含まれています。GitHubリポジトリをクローンしてブラウザーでexamples/index.htmlにアクセスすれば多くの実例デモが見られます。

jQuery.wizard

GitHub

おまけ

オープンソース・ソフトウェアの世界はすばらしく、次のプロジェクトで採用するツールは事欠きません。一方、相応の価値があるならお金を払う選択肢もあります。以下の2つは有料のフォームウィザードプラグインです。用途に合うならば購入をおすすめします。

もしもプラグイン導入だけでは気が済まず裏でどんな処理をしているかまで理解したいなら、ゼロからフォームウィザードを作る方法について解説したチュートリアルが参考になります。

最後に

6つのjQueryフォームウィザードプラグインを俯瞰すると、それぞれ異なる機能や強みを持っていると分かります。どれを選ぶかはプロジェクトの要求によります。役に立つものが見つかることを願っています。

この人気記事は2017年8月30日に更新されたものです。現在機能しないものや更新せず放置されているものを削除し、読者から要望のあった機能を持つ新しいプラグインを追加しています。

(原文:6 jQuery Form Wizard Plugins

[翻訳:西尾 健史/編集:Livit

Copyright © 2017, James Hibbard All Rights Reserved.

James Hibbard

James Hibbard

太陽の光がさんさんと降り注ぐ北ドイツに住むWeb開発者です。JavaScriptやRubyのコーディングを楽しみ、しばしばSitePointのJavaScriptフォーラムに現れることもあります。コーディングをしていないときはランニングに熱中しています。

Loading...