R&Dトレンドレポート

第20回 マッシュアップ開発のススメ[その6:PC版フロントエンドの構成③]

この記事を読むのに必要な時間:およそ 3 分

インタラクティブな操作(グラフ→動画,サムネイル)

赤字の部分と青地の部分が,動画とサムネイルに対してインタラクティブな動きを実装したモノです。その他の部分はCGIで出力するときに静的に値を埋め込んでいます。

this.xはseries->data->で参照される配列の数を表しています。asec変数は1目盛における実際の秒数になります。今回は120秒毎に頻度をカウントしていますので,asecには120が入ります。

また,seriesに複数のオブジェクトを設定できますので,複数のグラフを表現することが可能です。今回は,2chのコメント数とtwitterのコメント数を表現しています。

次はマウスオーバーでサムネイル画像を呼び出しているところです。

function showimg(x)
{
  //DIVのID,thum配下にimg要素を作成します。
  $("#thum").empty();  // thum要素以下のimgを排除します。
  
  // img要素を動的に作成する。サムネイル画像は事前に作成されているモノとする。
  var im = $("<img>").attr("src", "/jikkyou/data/"+ id + "-" + (asec * x) + ".png");
  
  $("#thum").append(im); // DIV配下に追加する。
  C
  im.css("position", "absolute"); 
  // 表示位置をグラフ上のポインター位置に合わせる。グラフの大きさ(chartwidth)を超えないように
  // サムネイルの位置を調整する。256とか20とかの直値は使わない方がいいですね^^;
  im.css("left", (( chartwidth - 256 ) * (asec * x ) / totaltime ) + 20 );
}

これでグラフ上をマウスオーバーで滑らせることでサムネイルがぱらぱらと変わっていきます。

インタラクティブな操作(動画→グラフ)

以上でグラフから別のオブジェクトへの操作が可能となりました。それでは,動画からグラフに対するアクションの部分を紹介します。

var myvid = $("#myVid")[0];

myvid.addEventListener("timeupdate", function(){
  var t = Math.floor(myvid.currentTime); //現在の再生時間を整数に

  // chartはHighchartsで作成したグラフ
  chart.xAxis[0].removePlotLine("plot-line-1"); //グラフのマーカーを削除

  chart.xAxis[0].addPlotLine({
    value: myvid.currentTime / asec, // X軸(時間軸)に対して再生位置にマーカーを引く
    color: "red",
    width: 2,
    id: "plot-line-1"
  });

  // 再生時間がupdateSecで割り切れた場合。多重取得防止。
  if ( t % updateSec == 0 && t != tTime )
  {
    tTime = t;
   getRes(); // コメントを取得する。
 }
});

実は以前紹介したコメント取得の部分に含まれていたのですが,改めて説明します。

動画再生時に都度呼び出されるtimeupdateイベントで,グラフオブジェクトのX軸に対し,addPlotLine()関数を用いて動的にプロット位置に線を引いています。currentTimeをasecで割っているのは先ほどのグラフから動画の再生位置を変更するのと逆の計算となります。削除,追加を行うことで,必ずプロット線が1本しか発生しないようにしています。

また,ユーザが強制的に再生位置を変えた場合もtimeupdateイベントがファイアーするため,その際もグラフへのフィードバックが期待できます。

こんな風になりました

それでは実際のグラフの様子を見てみましょう。

画像

動画は「アルマゲドン」です。グラフを見ると,盛り上がり部分がよくわかると思います。最後の盛り上がりはすごいですね! 2分間で1,000コメントを超えています。

以上がグラフと動画,サムネイルの説明でした。このようにインタラクティブな要素が入るとアプリとして成長する感じがしますね!

コーディングも楽しくなります。

著者プロフィール

脇本武士(わきもとたけし)

都内中小IT企業(メイサンソフト(株))に所属。某大手自動車会社でのシステム開発,運用を経て,現在は研究開発部署に席をお借りしています。DB周りの保守サポート,ウェブ技術開発を主に手がけてきました。現在は大規模計算フレームワークの活用とKVSに注目しています。普段はOS Xを使用していますが一番よく使うアプリはTerminalです(笑)。

R&Dトレンドレポート(てくらぼ)