Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。MB)AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねく揃えたフルスタックのフレームワークです。本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。ng-file-uploadまとめ参考資料なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。はじめに連載初回の今回は、より入力生産性の高いフォームを実装するために役立つ、以下のライブラリについて解説します。入力は、ユーザーにとって時間のかかる行為です。それだけに、入力生産性の良し悪しは、そのままサイト(アプリ)に対する満足度にも直結します。これらのライブラリを活用して、より入力しやすい――ユーザーに優しいサイトを目指してみては如何でしょうか。検証環境この記事では、以下の環境でサンプルの動作を確認しています。Bootstrapで提供されるディレクティブのひとつで、テキストボックスに対してオートコンプリート機能を付与します。オートコンプリートとは、入力したい単語の何文字かを入力することで、マッチする単語の候補をリスト表示する機能のことです。選択ボックスほどに入力値を限定できないものの、入力内容を緩く想定できる場合に活用できます。Bootstrap(Typeahead)は、Bowerを利用することで、以下のコマンドでインストールできます。Bootstrapとは、CSSフレームワークとして、もはやおなじみとも言えるBootstrapのラッパーで、Bootstrapで提供されるウィジェットを、AngularJSのディレクティブ形式で呼び出せるようにしたものです。本稿で解説する他にも、さまざまなディレクティブが用意されていますので、本連載でも徐々に紹介していきたいと思います。Bootstrapに関する詳細は、「業務Webアプリケーションエンジニアのための「Bootstrap」入門」を参照してください。オートコンプリート機能の基本まずは、JavaScriptだけでオートコンプリート機能を実装してみましょう。Bootstrap(ui-bootstrap-tpls.min.js)とともに、Bootstrap本体(bootstrap.min.css)もインポートしておきます(1)。Bootstrapを有効化します(2)。あとは、オートコンプリート機能を実装したいテキストボックスに対してtypeahead属性(ディレクティブ)を付与するだけです(3)。typeahead属性には、候補リスト取得のための式を指定します。numlabel:候補リストに表示する値value:テキストボックスに反映する値array:候補リスト(配列)num:リストに表示する最大件数(3)であれば、「あらかじめ用意したキーワードリストkeywords(4)から入力値と部分一致するものを検索して、マッチするものを7件を上限に表示しなさい」という意味になります。filter/limitToはいずれもAngularJS標準のフィルターで、filterは指定された値に合致する要素を絞り込むための、limitToは指定の件数で配列を切り出すための、それぞれ機能を提供します。$viewValueは、Typeaheadディレクティブの予約変数で、テキストボックスへの入力値を表します。Typeaheadディレクティブと合わせて利用可能な属性には、以下のようなものがあります。true最低限、入力値を反映するng-model属性は必須です。候補リストからの選択だけでなく、自由な入力を許可したい場合には、typeahead-editable属性はtrue(デフォルト)にしておく必要があります。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Technologies。執筆コミュニティ「WINGSプロジェクト」代表。