なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
AngularJSで利用できるライブラリを扱うこの連載も早いもので第15回。今回扱うのは、リッチなフォーム開発に役立つ以下のライブラリです。
- Angular Wizard：ウィザードを生成
- UI Select：リッチな選択ボックスを実装
- UI Mask：テキストボックスに入力できる文字列の形式／文字種を制限
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- AngularJSアプリの入力生産性を改善したいと考えている方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.5.7
- Angular Wizard 0.6.1
- UI Mask 1.8.6
- UI Select 0.18.0
- Chrome 51
- Firefox 47
- Internet Explorer 11
ひとつのフォームをウィザード形式に分割する - Angular Wizard
Angular Wizardは、ひとつのフォームを分割して、複数のステップからなるウィザード形式のフォームを生成するためのライブラリです。ウィザードとは言っても、ページそのものはひとつで、ステップ単位に表示／非表示を切り替えているにすぎないので、アプリ側でステップを跨っての値の管理を意識する必要はありません。
Angular Wizardは、Bowerを利用することで、以下のコマンドで実行できます。
bower install --save angular-wizard
では、具体的なウィザード生成の例を見てみましょう。ウィザードから入力された値一式は、最後に［終了］ボタンをクリックしたところでログにまとめて出力するものとします。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）Angular Wizard本体とスタイルシートをインポート -->
<link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script>
<script src="scripts/wizard.js"></script>
</head>
<body ng-controller="MyController">
<form>
<!--（3）ウィザードの外枠を定義-->
<wizard on-finish="onfinish()" edit-mode="false">
<wz-step wz-title="スタート">
<h1>ユーザー情報</h1>
<p><label for="name">氏名：</label><br />
<input type="text" id="name" ng-model="user.name" /></p>
<p><label for="email">メールアドレス：</label><br />
<input type="email" id="email" ng-model="user.mail" /></p>
<input type="submit" wz-next value="次へ" />
</wz-step>
<wz-step wz-title="ステップ">
<h1>あなたのご職業を教えてください。</h1>
<p>
ご職業：<br />
<label><input type="radio" ng-model="user.work" value="employee" />
会社員、公務員など</label><br />
<label><input type="radio" ng-model="user.work" value="management" />
経営者、自営・自由業</label><br />
<label><input type="radio" ng-model="user.work" value="part" />
パート・アルバイト</label><br />
<label><input type="radio" ng-model="user.work" value="housewife" />
専業主婦</label><br />
<label><input type="radio" ng-model="user.work" value="student" />
学生</label><br />
<label><input type="radio" ng-model="user.work" value="other" />
その他</label><br />
</p>
<input type="submit" wz-previous value="前へ" />
<input type="submit" wz-next value="次へ" />
</wz-step>
<wz-step wz-title="終了">
<h1>本サービスに関するご意見／ご感想をお願いします。</h1>
<p>
<label for="memo">ご意見／ご感想：</label><br />
<textarea id="memo" ng-model="user.memo" cols="30" rows="10"></textarea>
</p>
<input type="submit" wz-cancel value="キャンセル" />
<input type="submit" wz-finish value="完了" />
</wz-step>
</wizard>
</form>
</body>
</html>
// （2）mgo-angular-wizardモジュールへの依存関係を設定
angular.module('myApp', [ 'mgo-angular-wizard' ])
.controller('MyController', [ '$scope', 'WizardHandler', function($scope, WizardHandler) {
$scope.user = {
name: '匿名'
};
$scope.onfinish = function() {
console.log('ユーザー名：' + $scope.user.name);
console.log('メールアドレス：' + $scope.user.mail);
console.log('ご職業：' + $scope.user.work);
console.log('ご意見／ご感想：' + $scope.user.memo);
}
}]);
Angular Wizardを利用するには、Angular Wizard本体（angular-wizard.min.js）と関連するスタイルシート（angular-wizard.css）をインポートした上で（1）、アプリモジュール（myApp）からはmgo-angular-wizardモジュールへの依存関係を設定してください（2）。
ウィザードの外枠は、<wizard>要素で定義できます（3）。on-finish属性はウィザード終了時に呼び出されるイベントハンドラーを表します。本稿では、入力された値をログに出力しているだけですが、一般的には、このタイミングで$http／$resourceサービスを使ってサーバーにデータを送信するなど、ウィザードの終了処理を実装します。
その他、<wizard>要素で利用できる主な属性は、以下の通りです。
| 属性 | 概要 | デフォルト値 |
|---|---|---|
| on-finish | ウィザード終了時に呼び出されるイベントハンドラー | － |
| name | ウィザードの名前 | Default wizard |
| edit-mode | 編集モードを有効にするか（trueの場合、自由に任意のステップに移動可） | false（全ステップ移動した後だけ任意のステップに移動可） |
| hide-indicators | ページ下部のインジケーターを隠すか | false |
| current-step | 現在のステップを格納する変数 | － |
ウィザードの個々のステップを表すのは、<wiz-step>要素です（4）。最低限、個々のステップを識別し、インジケーター（進捗バー）で表示するためにtitle属性（ステップのタイトル）は明示してください。
ステップの配下には任意のコンテンツを配置できますが、最低限、ステップ間を行き来するためのボタンは必須です。ボタン（<button>要素など）には、ボタンの役割を付与するために、以下のような属性を指定できます（5）。
| 属性 | 概要 |
|---|---|
| wz-previous | 前のステップに戻る |
| wz-next | 次のステップに進む |
| wz-cancel | 最初のステップに戻る |
| wz-finish | ウィザードを終了（on-finish属性で指定された処理を実行） |
ウィザード画面をJavaScriptから制御する
Angular WizardのWizardHandlerというサービスを利用することで、ステップ間の移動などウィザードの操作をJavaScript側からも制御できます。たとえば以下は、［最初に戻る］ボタンをJavaScript側から実装した例です[1]。以下には、先ほどのコードの書き換え部分だけを示します。
注
[1] 上述の通り、まずは属性で賄えますが、なにかしら処理を実行した後、ウィザードを最初のステップに戻したいという場合には、この方法が利用できるでしょう。
<input type="button" value="キャンセル" ng-click="onstart()" />
$scope.onstart = function() {
WizardHandler.wizard().goTo(0);
}
ウィザードを操作するためのオブジェクト（wizardオブジェクト）は、WizardHandlerサービスのwizardメソッドで取得できます。引数にはウィザードの名前（<wizard>要素のname属性で指定した名前）を指定します。ただし、ページに一つしかウィザードがない場合には省略しても構いません。
ここでは、goToメソッドで指定されたページ（先頭ページは0）に移動していますが、その他にも以下のようなメソッドを利用できます。
| メソッド | 概要 |
|---|---|
| previous() | 前のステップに移動 |
| next() | 次のステップに移動 |
| finish() | ウィザードを終了 |
| currentStepNumber() | 現在のステップ番号を取得（先頭は1） |
| goTo(num｜title) | 指定されたインデックス番号、またはタイトルのステップに移動 |
