$httpサービスでプログレスバー／アイコンを表示する - Angular Loading Bar
非同期通信では、一般的にエンドユーザーが通信中であることを知る方法はありません。通常の同期通信のように、ブラウザーのアイコンが回転したり、ステータス情報が表示されたりするわけではないからです。非同期通信で、通信の状態をエンドユーザーに通知するのはアプリの責任です。そして、そのような時に活用できるのが、Angular Loading Barです。
Angular Loading Barは、Bowerを利用することで、以下のコマンドでインストールできます。
bower install --save angular-loading-bar
では、具体的な例を見ていきます。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）ライブラリ／スタイルシートをインポート -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/src/loading-bar.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="scripts/loading.js"></script>
</head>
<body ng-controller="MyController">
{{memo}}
</body>
</html>
// （2）angular-loading-barモジュールへの依存関係を設定
angular.module('myApp', ['angular-loading-bar'])
.controller('MyController', ['$scope', '$http', function($scope, $http) {
// （3）非同期通信を実施
$http.get('loading.php')
.then(function(response){
$scope.memo = response.data;
});
}]);
Angular Loading Barを利用するには、ライブラリ（loading-bar.js）／スタイルシート（loading-bar.css）をインポートした上で（1）、アプリモジュール（myApp）からangular-loading-barモジュールへの依存関係を宣言します（2）。
Angular Loading Barを利用する手順は、じつにこれだけです。あとは（3）のように$http／$resourceサービスで非同期通信を実施することで、本節冒頭のようなプログレスバー／スピナーが表示されます。
プログレスバー／スピナーの表示を切り替える
プログレスバー／スピナーの表示／非表示、もしくはそのタイミングを、アプリ全体、または個々の$http／$resourceサービスで切り替えることもできます。また、標準的な$http／$resourceサービス以外の非同期処理で利用することも可能です。
（1）通信単位で非表示にする
$httpサービスによる非同期通信の単位で、プログレスバー／スピナーを非表示にするには、以下のようにignoreLoadingBarパラメーターにtrueを設定してください。
$http.get('loading.php', { ignoreLoadingBar: true })
$resourceサービスであれば、以下のようにします。
$resource('/api/loading/:id', {id: '@id'}, {
query: {
method: 'GET',
ignoreLoadingBar: true
}
});
（2）プログレスバー／スピナーいずれかを非表示にする
アプリによっては、そもそもプログレスバー／スピナー双方を表示する必要がないこともあるでしょう。そのような場合、cfpLoadingBarProviderプロバイダーのincludeBar／includeSpinnerプロパティのいずれかをfalseに設定してください。デフォルトはtrue（表示する）です。
これらのプロパティは、サービスが有効になる前に（configメソッドの中で）設定します。
angular.module('myApp', ['angular-loading-bar'])
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
// プログレスバーを非表示（スピナーだけを表示）
cfpLoadingBarProvider.includeBar = false;
}])
（3）プログレスバー／スピナー表示までのタイムラグを設定する
短時間で終了する非同期処理で、いちいちプログレスバー／スピナーを表示するのは、あまり良いことではありません。短時間で表示／非表示を切り替えるため、エンドユーザーの目には画面のチラツキと映るからです。
そこで一定以上の時間がかかる非同期通信に対してだけ、プログレスバー／スピナーを表示するよう、表示までのタイムラグを設定しておくことをお勧めします。たとえば以下は、タイムラグを1000ミリ秒に設定する例です（デフォルトは100ミリ秒）。これには、先ほどと同じく、configメソッドの中で、cfpLoadingBarProviderプロバイダーのlatencyThresholdプロパティを設定します。
angular.module('myApp', ['angular-loading-bar'])
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.latencyThreshold = 1000;
}])
（4）任意の非同期処理でプログレスバー／スピナーを表示する
Angular Loading Barは、$http／$resourceサービスで利用する他、任意の非同期処理の中で、アプリから明示的に呼び出すこともできます。これには、cfpLoadingBarサービスのstart／completeメソッドを利用します。非同期処理に先立って、startメソッドでプログレスバー／スピナーを表示し、非同期処理の終了タイミングでcompleteメソッドで非表示にするわけです。
angular.module('myApp', ['cfp.loadingBar'])
.controller('MyController', ['$scope', '$timeout', 'cfpLoadingBar',
function($scope, $timeout, cfpLoadingBar) {
// 処理前にプログレスバー／スピナーを表示
cfpLoadingBar.start();
$timeout(function() {
...任意の非同期処理...
// プログレスバー／スピナーを隠す
cfpLoadingBar.complete();
}, 5000)
}]);
まとめ
以上、本稿ではエンドユーザーに対して、ちょっとした情報を提供する定型的なUIを生成する方法について紹介しました。トーストにせよ、プログレスバーにせよ、個性を求められるものではありません。むしろユーザーにそれとわかってもらうためにも、定型的な見せ方を外さないことが大切です。そうした観点でも、下手に自作するよりも素直にライブラリのお世話になることをお勧めします。
さて、次回は、複数の画像をカルーセル表示するウィジェット、画像を全画面表示するウィジェットなどについて紹介する予定です。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108」（WINGSプロジェクト）
