Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 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(デフォルト)にしておく必要があります。


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

著者プロフィール

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

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

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

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

バックナンバー

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

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5