AngularJSアプリのデータを視覚的に魅せるモジュールたち ～ チャートからタイムラインまで

AngularJSアプリ開発を支援する便利モジュール（7）

時系列データをタイムラインとして整形する - Angular Timeline

　自分の来歴、会社の歴史、あるいは、イベントの予定など、時系列上で意味のある情報をわかりやすく見せたいということはよくあります。そのような場合に役立つのが、Angular Timelineです。Facebookなどでもよく見かけるようなタイムラインを、限りなくコーディングレスで生成できるモジュールです。

自社の歴史をタイムラインにて表示

　Angular Timelineは、Bowerを利用することで、以下のコマンドでインストールできます。

bower install --save angular-timeline

　では、具体的な例を見ていきます。

リスト5　tl.html

<!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>

リスト6　tl.js

// （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プロジェクト）