AngularJSでタイムラインを表示する

AngularJSでタイムラインを利用してみたいと思ったので、導入してみた時のメモです。
タイムラインは、Twitterなどの投稿履歴的なのではなく、動画編集等に利用するような横時間軸のタイムラインです。
今回は、angular-media-timelineを利用して、タイムラインを実現します。

AngularJSにタイムラインを実装

angular-media-timelineから、ファイルをダウンロードするか、Gitでクローンしてください。
利用するファイルは、「timeline.js」と「timeline.css」です
※minファイルでも構いません

サンプル

基本的なサンプルは、「examples」にあるファイルを参照してください。
サンプルで、タイムラン実装がどのように動作するか見れるかと思います。

独自処理や値を変数に持ってきたい場合

追加したい関数等を設定しています。
散布コードでは、「hoge-test=”hoge(timelineData)”」の部分です。

timeline.jsを修正する

「.directive(‘mtTimelines’, function ($timeout, $document)」がタイムラインを表示している部分なので、そこを修正します。
html部分については適宜対応してください。

長いので省略しています。
「initHoge」がボタンが押された時の処理で、「initHoge」が更に、「hogeTest」に値を設定し、自分で作成した関数を呼び出しています。
呼び出される関数の設定は、上記で記述した「hoge-test=”hoge(timelineData)”」の部分です。
これで、どこのタイムラインでどれくらい値が設定されたかが取得することが可能です。

タイムラインの移動された開始位置を取得する

「$scope.onEventStartChange」で、移動された開始位置が返却されるので、そこで値を取得・設定します。

変更されたタイムラインの幅を取得する

「$scope.onEventDurationChange」で、幅(バーの長さ)が返却されるので、そこで値を取得・設定します。

angular-media-timelineを利用した感想

個人的には使いやすかったです。
他にもタイムライン系のはありますが、横に色々できるようなのがこれしか見当たらなかったので、利用しました。
※他にもきっとあるはず
全部を自分で実装するには大変なので、大変良かったです。
ソースの改変と言っては問題かもしれませんが、表示したい内容や取得したい値を渡すなど、改修しやすかったです。

後は、画像を表示する処理を実装するなり、テキストのみで実装するなり自由かなと思います。
あくまで、自分なりの修正なので、もっといい方法とかもあるかもしれません。

あわせて読みたい

コメントを残す

Translate »
%d人のブロガーが「いいね」をつけました。