なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
本連載も早いもので、8回目となりました。今回は、ユーザーに対して簡単な通知を表現するために役立つ、以下のライブラリについて紹介します。
- UI Bootstrap（Tooltip）：ツールチップを表示
- AngularJS Toaster：トーストを生成
- Angular Loading Bar：非同期通信時にプログレスバー／スピナーを生成
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- AngularJSアプリでデータを視覚的に見せる方法を知りたい方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.4.7
- UI Bootstrap 0.14.3
- AngularJS Toaster 0.4.15
- Angular Loading Bar 0.8.0
- Chrome 46
- Firefox 41
- Internet Explorer 11
ツールチップを表示する - UI Bootstrap（Tooltip）
ツールチップとは、ハイパーリンク／テキストボックスなどにマウスポインターを当てた時に表示される小さなテキストのこと。対象となる要素の補足／ヘルプ情報を表すのに利用されることが多いことから、ツールヒントと呼ばれることもあります。
このようなツールチップを生成するのが、本連載でも何度か利用してきたUI Bootstrapに属するTooltipウィジェットです。Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-bootstrap bootstrap
では、具体的なサンプルをみていきましょう。以下は、リンクにマウスを当てることで、関連する情報をツールチップとして表示するサンプルです。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）UI Bootstrapと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/tooltip.js"></script>
<!-- （4）テンプレートを定義 -->
<script type="text/ng-template" id="logo.html">
<a>
<img src="http://www.wings.msn.to/image/wings.jpg" style="width:120px"/>
<br />
<a href="http://www.wings.msn.to/">WINGSプロジェクト</a>
</a>
</script>
</head>
<body ng-controller="MyController">
<p>
プログラミング技術に関する情報を集約した
<!-- （3）uib-tooltip属性で表示テキストを指定 -->
<a href="http://www.wings.msn.to/" tooltip-placement="bottom"
uib-tooltip="Www INtegrated Guide on Server-architecture"
tooltip-trigger="mouseenter">
WINGSサイト
</a>
を紹介します。</p>
<p>開発時に便利な
<a href="http://www.wings.msn.to/index.php/-/B-08/"
uib-tooltip="画面キャプチャ入りの手順解説"
tooltip-placement="right" tooltip-trigger="mouseenter">
環境構築設定
</a>
のページや
<a href="http://www.wings.msn.to/index.php/-/B-14/"
uib-tooltip="困った時に使える" tooltip-placement="bottom"
tooltip-trigger="mouseenter">
Q&A掲示板
</a>
があります。</p>
ただいま、執筆メンバーを募集中です。
<!-- （5）テンプレートをもとにツールチップを生成 -->
<a href="#" uib-tooltip-template="'logo.html'" tooltip-placement="bottom"
tooltip-trigger="click">WINGS
</a>
で、一緒に頑張ってみませんか？
</body>
</html>
// （2）ui.bootstrapモジュールへの依存関係を設定
angular.module('myApp', [ 'ui.bootstrap' ])
.controller('MyController', ['$scope', function($scope) {
}]);
UI Bootstrapを利用するには、UI Bootstrap（ui-bootstrap-tpls.min.js）とともに、Bootstrap本体（bootstrap.min.css）もインポートしておきます（1）。また、アプリモジュール（myApp）からはui.bootstrapモジュールへの依存関係を宣言して、UI Bootstrapを有効化します（2）。
あとは、該当する要素に対してuib-tooltipディレクティブ（属性）で表示テキストを指定するだけです（3）。以下の属性によって、表示方法を設定することも可能です。
| 属性 | 概要 | デフォルト値 |
|---|---|---|
| tooltip-placement | 表示位置（top／bottom／left／right） | top |
| tooltip-trigger | 表示のトリガーとなるイベント（mouseenter／click／focus） | mouseenter |
| tooltip-popup-delay | イベント発生から表示までのタイムラグ（ミリ秒） | 0 |
| tooltip-animation | アニメーション（フェード）を適用するか | true |
| tooltip-class | ツールチップに適用するスタイルクラス | － |
より複雑なテキスト／画像をツールチップとして表示したい場合には、表示テキストをテンプレートとして切り出すこともできます。テンプレートは、<script type="text/ng-template">要素で定義できます（4）。あとは、uib-tooltip属性の代わりにuib-tooltip-template属性でテンプレートのid値を指定するだけです（5）。
