時系列データをタイムラインとして整形する - Angular Timeline
自分の来歴、会社の歴史、あるいは、イベントの予定など、時系列上で意味のある情報をわかりやすく見せたいということはよくあります。そのような場合に役立つのが、Angular Timelineです。Facebookなどでもよく見かけるようなタイムラインを、限りなくコーディングレスで生成できるモジュールです。
Angular Timelineは、Bowerを利用することで、以下のコマンドでインストールできます。
bower install --save angular-timeline
では、具体的な例を見ていきます。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）ライブラリ本体／スタイルシートをインポート -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-timeline/dist/angular-timeline.js"></script>
<script src="scripts/tl.js"></script>
</head>
<body ng-controller="MyController">
<timeline>
<timeline-event ng-repeat="event in events">
<timeline-badge class="{{event.badgeClass}}">
<i class="glyphicon {{event.badgeIconClass}}"></i>
</timeline-badge>
<timeline-panel class="{{event.badgeClass}}">
<timeline-heading>
<h4>{{event.title}}</h4>
<p>
<small class="text-muted">
<i class="glyphicon glyphicon-star"></i>{{event.subtitle}}
</small>
</p>
</timeline-heading>
<p>{{event.content}}</p>
</timeline-panel>
</timeline-event>
</timeline>
</body>
</html>
// （2）angular-timelineモジュールへの依存関係を設定
angular.module('myApp', ['angular-timeline'])
.controller('MyController', ['$scope', function($scope) {
// イベント情報をスコープ変数として準備
$scope.events = [
{
badgeClass: 'success',
badgeIconClass: 'glyphicon-home',
title: '2000年開業',
subtitle: '東京都に1号店をオープン',
content: '脱サラして、念願のケーキ屋さんになりました。'
},
...中略...
];
}]);
Angular Timelineを利用するには、ライブラリ本体（angular-timeline.js）／スタイルシート（angular-timeline.css）をインポートした上で（1）、アプリモジュール（myApp）からangular-timelineモジュールへの依存関係を宣言します（2）。サンプルでは、Bootstrapのライブラリもインポートしていますが、これはBootstrapのアイコンを利用しているからです。Angular Timelineを利用する上で必須というわけではありません。
あとは、ビュー（.html）でタイムライン情報をマークアップするだけです（3）。タイムライン情報を表すディレクティブには、以下のようなものがあります。
| ディレクティブ | 概要 |
|---|---|
| <timeline> | タイムラインのルート要素 |
| <timeline-event> | タイムライン個々のイベントを表すノード |
| <timeline-badge> | ノードに付与するアイコン（バッジ） |
| <timeline-panel> | ノード配下のパネル |
| <timeline-heading> | パネルのヘッダー |
| <timeline-title> | ヘッダータイトル |
| <timeline-content> | パネル本体 |
サンプルでは、ng-repeat属性であらかじめ用意したオブジェクト配列eventsの内容を展開していますが、もちろん、<timeline-event>要素をイベントの数だけ列挙しても構いません。いずれにせよ、Angular Timelineそのものは、マークアップされた順序に従って、データを整形するためのモジュールですので、順序はあらかじめアプリ側で並べ替えておく必要があります。
まとめ
以上、本稿ではアプリ内のデータをさまざまな方法で見せるためのモジュールを紹介しました。同じデータでも見せ方によっては、よりわかりやすく、ということは、効果的に読者に伝わるものです。近頃では、本稿で紹介した他にも、さまざまなモジュールが存在しますので、積極的に取り入れ、アプリに一味加えてみてはどうでしょう。
次回は、補助的なヘルプ情報や通知を手軽に見せるためのウィジェットについて紹介します。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
