Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

AngularJSアプリの入力生産性を向上する3種のライブラリ

AngularJSアプリ開発を支援する便利モジュール(15)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/08/04 14:00

 AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねく揃えたフルスタックのフレームワークです。もっとも、本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。

目次

 なお、本連載では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

 では、具体的なウィザード生成の例を見てみましょう。ウィザードから入力された値一式は、最後に[終了]ボタンをクリックしたところでログにまとめて出力するものとします。

リスト1 wizard.html
<!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 wizard.js
// (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>要素で利用できる主な属性は、以下の通りです。

<wizard>要素で利用できる主な属性
属性 概要 デフォルト値
on-finish ウィザード終了時に呼び出されるイベントハンドラー
name ウィザードの名前 Default wizard
edit-mode 編集モードを有効にするか(trueの場合、自由に任意のステップに移動可) false(全ステップ移動した後だけ任意のステップに移動可)
hide-indicators ページ下部のインジケーターを隠すか false
current-step 現在のステップを格納する変数

 ウィザードの個々のステップを表すのは、<wiz-step>要素です(4)。最低限、個々のステップを識別し、インジケーター(進捗バー)で表示するためにtitle属性(ステップのタイトル)は明示してください。

 ステップの配下には任意のコンテンツを配置できますが、最低限、ステップ間を行き来するためのボタンは必須です。ボタン(<button>要素など)には、ボタンの役割を付与するために、以下のような属性を指定できます(5)。

Angular Wizardでボタンに役割を付与するための属性
属性 概要
wz-previous 前のステップに戻る
wz-next 次のステップに進む
wz-cancel 最初のステップに戻る
wz-finish ウィザードを終了(on-finish属性で指定された処理を実行)

ウィザード画面をJavaScriptから制御する

 Angular WizardのWizardHandlerというサービスを利用することで、ステップ間の移動などウィザードの操作をJavaScript側からも制御できます。たとえば以下は、[最初に戻る]ボタンをJavaScript側から実装した例です[1]。以下には、先ほどのコードの書き換え部分だけを示します。

[1] 上述の通り、まずは属性で賄えますが、なにかしら処理を実行した後、ウィザードを最初のステップに戻したいという場合には、この方法が利用できるでしょう。

リスト3 wizard.html
<input type="button" value="キャンセル" ng-click="onstart()" />
リスト4 wizard.js
$scope.onstart = function() {
  WizardHandler.wizard().goTo(0);
}

 ウィザードを操作するためのオブジェクト(wizardオブジェクト)は、WizardHandlerサービスのwizardメソッドで取得できます。引数にはウィザードの名前(<wizard>要素のname属性で指定した名前)を指定します。ただし、ページに一つしかウィザードがない場合には省略しても構いません。

 ここでは、goToメソッドで指定されたページ(先頭ページは0)に移動していますが、その他にも以下のようなメソッドを利用できます。

wizardオブジェクトの主なメソッド
メソッド 概要
previous() 前のステップに移動
next() 次のステップに移動
finish() ウィザードを終了
currentStepNumber() 現在のステップ番号を取得(先頭は1)
goTo(num|title) 指定されたインデックス番号、またはタイトルのステップに移動

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:AngularJSアプリ開発を支援する便利モジュール

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5