前回に続いて今回もPCのフロントエンドの説明となります。今回はグラフ表示機能の説明です。
グラフ表示機能について
グラフの横軸は時系列となり、これは動画再生時間全体となります。グラフの縦軸は時系列に対するポストされたコメントの頻度を表します。つまり、縦軸に高いほど、多くのコメントがその時間帯にポストされたことを意味し、そこがその動画のスイートスポットである、というわけです。
またこのグラフにはそういった盛り上がり点を表現する以外に、以下の3つの機能を持たせました。
- 動画の再生位置をグラフ上で表現すること
- グラフのクリックから動画の再生位置をスキップさせること
- グラフのオンマウスオーバーでその位置のスクリーンショットのサムネイルを表示する(シーン選択が容易になるように)
動画からの経過時間を横軸に反映し、グラフからは逆に、インタラクティブな操作で動画の再生位置を変える、再生位置を変える前にサムネイルで何となく雰囲気を知ることができるという、双方向のコントローラとなります。
この機能のために用いたのが、グラフライブラリの1つであるHighchartsです。こちらもデモを参照していただけるとわかりやすいと思いますが、非常に柔軟なグラフ描画と美しいデザイン、アニメーションを備えています。棒グラフ、円グラフ、パイチャートなどさまざまなグラフを簡単に使うことが可能です。
Highchartsでのグラフの生成
グラフはChartメソッドで初期化しますが、その際にオブジェクトを引数に与えますが、そのオブジェクトによってどのようなグラフを生成するかが決定します。
それでは渡されるオブジェクトの内容です。
インタラクティブな操作(グラフ→動画、サムネイル)
赤字の部分と青地の部分が、動画とサムネイルに対してインタラクティブな動きを実装したモノです。その他の部分はCGIで出力するときに静的に値を埋め込んでいます。
this.xはseries->data->で参照される配列の数を表しています。asec変数は1目盛における実際の秒数になります。今回は120秒毎に頻度をカウントしていますので、asecには120が入ります。
また、seriesに複数のオブジェクトを設定できますので、複数のグラフを表現することが可能です。今回は、2chのコメント数とtwitterのコメント数を表現しています。
次はマウスオーバーでサムネイル画像を呼び出しているところです。
これでグラフ上をマウスオーバーで滑らせることでサムネイルがぱらぱらと変わっていきます。
インタラクティブな操作(動画→グラフ)
以上でグラフから別のオブジェクトへの操作が可能となりました。それでは、動画からグラフに対するアクションの部分を紹介します。
実は以前紹介したコメント取得の部分に含まれていたのですが、改めて説明します。
動画再生時に都度呼び出されるtimeupdateイベントで、グラフオブジェクトのX軸に対し、addPlotLine()関数を用いて動的にプロット位置に線を引いています。currentTimeをasecで割っているのは先ほどのグラフから動画の再生位置を変更するのと逆の計算となります。削除、追加を行うことで、必ずプロット線が1本しか発生しないようにしています。
また、ユーザが強制的に再生位置を変えた場合もtimeupdateイベントがファイアーするため、その際もグラフへのフィードバックが期待できます。
こんな風になりました
それでは実際のグラフの様子を見てみましょう。
動画は「アルマゲドン」です。グラフを見ると、盛り上がり部分がよくわかると思います。最後の盛り上がりはすごいですね! 2分間で1,000コメントを超えています。
以上がグラフと動画、サムネイルの説明でした。このようにインタラクティブな要素が入るとアプリとして成長する感じがしますね!
コーディングも楽しくなります。