カラーピッカーを実装したい - Angular Bootstrap Colorpicker
Angular Bootstrap Colorpickerを利用することで、テキストボックスにカラーピッカーを追加できます。カラーピッカーでは、目的に応じて、RGB／RGBA／HEX（16進数）形式のカラーを生成できます。
Angular Bootstrap Colorpickerは、Bowerから、以下のコマンドでインストールできます。
> bower install angular-bootstrap-colorpicker
具体的なサンプルは、以下の通りです。
<!--（1）Angular Bootstrap Colorpickerのライブラリ／スタイルシートをインポート--> <link rel="stylesheet" href="bower_components/angular-bootstrap-colorpicker/css/colorpicker.min.css" /> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.min.js"></script> <script src="scripts/color.js"></script> ...中略... <!--（3）テキストボックスにカラーピッカーを付与--> <input type="text" ng-model="color" colorpicker="rgb" colorpicker-position="bottom" />
// （2）colorpicker.moduleモジュールへの依存関係を宣言
angular.module('myApp', ['colorpicker.module'])
.controller('MyController', ['$scope', function($scope) {
}]);
Angular Bootstrap Colorpickerの動作にはJavaScriptライブラリ（bootstrap-colorpicker-module.min.js）だけでなく、スタイルシート（colorpicker.min.css）のインポートも必要です（1）。あとは、colorpicker.moduleモジュールへの依存関係を宣言した上で（2）、カラーピッカー機能を付与したいテキストボックスに対してcolorpicker属性（ディレクティブ）を指定します（3）。
colorpickerディレクティブで利用できる属性には、以下のようなものがあります。
| 属性 | 概要 |
|---|---|
| colorpicker | 生成するカラー形式（rgb、rgba、hex） |
| colorpicker-position | テキストボックスに対するカラーピッカーの表示位置（top、bottom、left、right） |
| colorpicker-is-open | カラーピッカーを最初から開いた状態にするか |
| colorpicker-close-on-select | カラーを選択した時に自動的にピッカーを閉じるか |
ng-color-picker
同じようなカラー選択のためのライブラリとして、ng-color-pickerもあります。こちらは、よりシンプルで、あらかじめ決められた候補からカラーを選択させます。選択すべきカラーが限定されている場合には、こちらを利用してみるのも良いかもしれません。
タグ入力ボックスを実装したい - ngTagInput
タグとは、不特定多数の情報を緩く分類するためのしくみ。身近なところでは、はてなブックマークで利用されていますので、皆さんもなにかしら利用したことがあるはずです。
ngTagsInputは、そんなタグ入力に特化したライブラリです。入力値をタグの単位に区切って管理しますので、追加／削除が容易ですし、既存のタグ候補からのオートコンプリート機能も用意しています
ngTagsInputは、Bowerから、以下のコマンドでインストールできます。
> bower install ng-tags-input
具体的なサンプルは、以下の通りです。
<!--（1）ngTagsInputのライブラリとスタイルシートをインポート--> <link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.min.css" /> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/ng-tags-input/ng-tags-input.min.js"></script> <script src="scripts/tags.js"></script> ...中略... <form> <!--（3）タグ入力ボックスを配置--> <tags-input ng-model="tags" placeholder="タグを入力"></tags-input> </form>
// （2）ngTagsInputモジュールへの依存関係を設定
angular.module('myApp', ['ngTagsInput'])
.controller('MyController', ['$scope', function($scope) {
}]);
ngTagsInputを利用するには、JavaScriptライブラリ（ng-tags-input.min.js）だけでなく、スタイルシート（ng-tags-input.min.css）のインポートも必要です（1）。あとは、ngTagsInputモジュールへの依存関係を宣言した上で（2）、タグ入力ボックスを表す<tags-input>要素（ディレクティブ）を配置するだけです（3）。
<tags-input>要素で利用できる主な属性は、以下のとおりです。タグ値を受け取る配列を表すng-model属性だけが必須です。
| 属性 | 概要 | デフォルト値 |
|---|---|---|
| ng-model | 入力したタグ情報を格納する変数 | （必須） |
| placeholder | 入力ボックスに表示する透かし文字 | Add a tag |
| min-length | 新規タグの最小文字数 | 3 |
| max-length | 新規タグの最大文字数 | MAX_SAFE_INTEGER |
| min-tags | 許可するタグの最小個数 | 0 |
| max-tags | 許可するタグの最大個数 | MAX_SAFE_INTEGER |
まとめ
以上、本稿では入力フォームの実装に役立つ5個のライブラリを紹介しました。
入力という行為は、ユーザーにとって時間のかかる行為です。それだけに、入力生産性の良し悪しは、そのままサイト（アプリ）に対する満足度にも直結します。これらのライブラリを活用して、より入力しやすい――ユーザーに優しいサイトを目指してみては如何でしょうか。
次回は、あらかじめ用意したオブジェクト配列に応じて、ソート／ページング機能付きのリッチなグリッド表を作成するUI Gridを紹介する予定です。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
