AngularJSで入力生産性の高いフォームを実装しよう（オートコンプリート／ファイルアップローダー）

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

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

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

// （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ディレクティブと合わせて利用可能な属性には、以下のようなものがあります。

Typeaheadディレクティブの主な属性

属性	概要	デフォルト値
ng-model	テキストボックスへの入力値をバインドする変数	－
typeahead-editable	候補リストに存在する値以外も入力可能にするか	true
typeahead-min-length	オートコンプリート機能が動作する最小文字数	1
typeahead-wait-ms	キー入力から候補リストを表示するまでのタイムラグ	0
typeahead-focus-first	候補リストを表示した時に先頭項目にフォーカスするか	true

　最低限、入力値を反映するng-model属性は必須です。候補リストからの選択だけでなく、自由な入力を許可したい場合には、typeahead-editable属性はtrue（デフォルト）にしておく必要があります。