リッチな入力フォーム作成に役立つAngularJSライブラリ 5連発

AngularJSアプリ開発を支援する便利モジュール 第2回

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

　なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。

はじめに

　第2回である今回は、前回に引き続き、入力生産性の高いフォームを実装するために役立つ、以下のライブラリについて解説します。

• UI Bootstrap（Rating）：レーティングバーを作成
• Angular Elastic：テキスト量に応じて伸縮するテキストエリアを作成
• Angular Slider：スライダー／範囲スライダーを作成
• Angular Bootstrap Colorpicker：カラーピッカー付きのテキストボックスを作成
• ngTagInput：タグ入力ボックスを作成

対象読者

• AngularJSについて基本的な概念を理解している方
• AngularJSで利用できる拡張モジュールに興味がある方
• AngularJSアプリの入力生産性を改善したいと考えている方

検証環境

　この記事では、以下の環境でサンプルの動作を確認しています。

• AngularJS 1.4.3
• UI Bootstrap 0.13.2
• Angular Elastic 2.5.0
• Angular Slider 0.2.14
• Angular Bootstrap Colorpicker 3.0.18
• ngTagInput 3.0.0
• Chrome 44
• Firefox 39
• Internet Explorer 11

レーティングバーを設置したい - UI Bootstrap（Rating）

　レーティングバーとは、Amazon、Google Playなどのショッピングサイトでよく見かける評価のための入力／表示バーです。一般的には、1～5段階の評価をスターのオンオフで表現します。

商品／記事などの評価を入力／表示するためのレーティングバー

　このようなレーティングバーを実装するのが、UI BootstrapのRatingディレクティブです。UI Bootstrapは、Bowerを利用することで、以下のコマンドでインストールできます。

> bower install angular-bootstrap bootstrap

　では、具体的な例を見ていきましょう。

リスト1　rating.html

<!--（1）Bootstrap／UI Bootstrapをインポート -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/rating.js"></script>
...中略...
<!--1. レーティングバーを設置-->
<rating ng-model="current" max="upper" ></rating>

リスト2　rating.js

// （2）ui.bootstrapモジュールへの依存関係を宣言
angular.module('myApp', ['ui.bootstrap'])
  .controller('MyController', ['$scope', function($scope) {
    $scope.current = 3;	// 初期値
    $scope.upper = 5;	// 最大値
  }]);

　UI Bootstrapを利用するには、UI Bootstrap（ui-bootstrap-tpls.min.js）とともに、Bootstrap本体（bootstrap.min.css）もインポートしておきます（1）。また、アプリモジュール（myApp）からはui.bootstrapモジュールへの依存関係を宣言して、UI Bootstrapを有効化します（2）。

　あとは、<rating>要素（ディレクティブ）をページに配置して、必要なパラメーターを設定すれば完了です（3）。最低限、レート値を格納するng-model属性は必須です。

<

属性	概要	デフォルト値
ng-model	現在のレート値を格納する変数	（必須）
max	レート値の最大	5
readonly	読み取り専用か	false
on-hover	マウスポインターがレーティングバーに乗った時の処理	－
on-leave	マウスポインターがレーティングバーから外れた時の処理	－
state-on	選択状態に利用するアイコン	－
state-off	非選択状態に利用するアイコン	－

　state-on／state-off属性を利用することで、レーティングバーのアイコンを差し替えることもできます。指定しているのは、Bootstrapで提供されている標準のアイコンです。

リスト3　rating2.html（アイコンをカスタマイズしたコード）

<rating ng-model="current" max="upper" state-on="'glyphicon-ok'"
  state-off="'glyphicon-remove'"></rating>

オンオフのアイコンが指定の画像に変化