なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
連載初回の今回は、より入力生産性の高いフォームを実装するために役立つ、以下のライブラリについて解説します。
- UI Bootstrap（Typeahead）：テキストボックスにオートコンプリート機能を付与
- ng-file-upload：ドラッグ＆ドロップに対応したファイルアップローダー
入力は、ユーザーにとって時間のかかる行為です。それだけに、入力生産性の良し悪しは、そのままサイト（アプリ）に対する満足度にも直結します。これらのライブラリを活用して、より入力しやすい――ユーザーに優しいサイトを目指してみては如何でしょうか。
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- AngularJSアプリの入力生産性を改善したいと考えている方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.4.3
- UI Bootstrap 0.13.2
- ng-file-uploader 6.0.4
- Chrome 44
- Firefox 39
- Internet Explorer 11
テキストボックスにオートコンプリート機能を追加したい - Typeahead（1）
Typeaheadは、UI Bootstrapで提供されるディレクティブのひとつで、テキストボックスに対してオートコンプリート機能を付与します。オートコンプリートとは、入力したい単語の何文字かを入力することで、マッチする単語の候補をリスト表示する機能のことです。選択ボックスほどに入力値を限定できないものの、入力内容を緩く想定できる場合に活用できます。
UI Bootstrap（Typeahead）は、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-bootstrap bootstrap
UI Bootstrap
UI Bootstrapとは、CSSフレームワークとして、もはやおなじみとも言えるBootstrapのラッパーで、Bootstrapで提供されるウィジェットを、AngularJSのディレクティブ形式で呼び出せるようにしたものです。本稿で解説する他にも、さまざまなディレクティブが用意されていますので、本連載でも徐々に紹介していきたいと思います。
なお、Bootstrapに関する詳細は、「業務Webアプリケーションエンジニアのための「Bootstrap」入門」を参照してください。
オートコンプリート機能の基本
まずは、JavaScriptだけでオートコンプリート機能を実装してみましょう。
<!--（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/ac.js"></script>
...中略...
<form>
<label for="keywd">キーワード：</label>
<!--（3）オートコンプリート機能を有効化 -->
<input type="text" id="keywd" ng-model="keywd"
typeahead="keywd for keywd in keywds | filter:$viewValue | limitTo: 7" />
</form>
// （2）ui.bootstrapモジュールへの依存関係を宣言
angular.module('myApp', [ 'ui.bootstrap' ])
.controller('MyController', ['$scope', function($scope) {
// （4）キーワード候補を準備
$scope.keywds = ['accordion', 'addmockModule', 'afterEach', 'Ajax', 'allowInvalid', 'altJS', 'altKey', 'annotate', 'beforeEach', 'bind', 'bootstrap', 'Bower', 'button', 'cancel', 'catch', 'clone', 'close','compile','debounce', 'decorate', 'defer', 'delete', 'each', 'element', 'equals', 'expect', 'extend'];
}]);
UI Bootstrapを利用するには、UI Bootstrap（ui-bootstrap-tpls.min.js）とともに、Bootstrap本体（bootstrap.min.css）もインポートしておきます（1）。また、アプリモジュール（myApp）からはui.bootstrapモジュールへの依存関係を宣言して、UI Bootstrapを有効化します（2）。
あとは、オートコンプリート機能を実装したいテキストボックスに対してtypeahead属性（ディレクティブ）を付与するだけです（3）。typeahead属性には、候補リスト取得のための式を指定します。
構文 typeahead属性の式
label for value in array | filter : $viewValue | limitTo: num
- label：候補リストに表示する値
- value：テキストボックスに反映する値
- array：候補リスト（配列）
- num：リストに表示する最大件数
（3）であれば、「あらかじめ用意したキーワードリストkeywords（4）から入力値と部分一致するものを検索して、マッチするものを7件を上限に表示しなさい」という意味になります。filter／limitToはいずれもAngularJS標準のフィルターで、filterは指定された値に合致する要素を絞り込むための、limitToは指定の件数で配列を切り出すための、それぞれ機能を提供します。$viewValueは、Typeaheadディレクティブの予約変数で、テキストボックスへの入力値を表します。
Typeaheadディレクティブと合わせて利用可能な属性には、以下のようなものがあります。
| 属性 | 概要 | デフォルト値 |
|---|---|---|
| ng-model | テキストボックスへの入力値をバインドする変数 | － |
| typeahead-editable | 候補リストに存在する値以外も入力可能にするか | true |
| typeahead-min-length | オートコンプリート機能が動作する最小文字数 | 1 |
| typeahead-wait-ms | キー入力から候補リストを表示するまでのタイムラグ | 0 |
| typeahead-focus-first | 候補リストを表示した時に先頭項目にフォーカスするか | true |
最低限、入力値を反映するng-model属性は必須です。候補リストからの選択だけでなく、自由な入力を許可したい場合には、typeahead-editable属性はtrue（デフォルト）にしておく必要があります。
