R&Dトレンドレポート

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

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

前回に続いて今回もPCのフロントエンドの説明となります。今回はグラフ表示機能の説明です。

グラフ表示機能について

グラフの横軸は時系列となり,これは動画再生時間全体となります。グラフの縦軸は時系列に対するポストされたコメントの頻度を表します。つまり,縦軸に高いほど,多くのコメントがその時間帯にポストされたことを意味し,そこがその動画のスイートスポットである,というわけです。

またこのグラフにはそういった盛り上がり点を表現する以外に,以下の3つの機能を持たせました。

  • 動画の再生位置をグラフ上で表現すること
  • グラフのクリックから動画の再生位置をスキップさせること
  • グラフのオンマウスオーバーでその位置のスクリーンショットのサムネイルを表示する(シーン選択が容易になるように)

動画からの経過時間を横軸に反映し,グラフからは逆に,インタラクティブな操作で動画の再生位置を変える,再生位置を変える前にサムネイルで何となく雰囲気を知ることができるという,双方向のコントローラとなります。

この機能のために用いたのが,グラフライブラリの1つであるHighchartsです。こちらもデモを参照していただけるとわかりやすいと思いますが,非常に柔軟なグラフ描画と美しいデザイン,アニメーションを備えています。棒グラフ,円グラフ,パイチャートなどさまざまなグラフを簡単に使うことが可能です。

Highchartsでのグラフの生成

Highchartsのソースの読み込み

<script type="text/javascript" src="js/highcharts.src.js"></script>

グラフはChartメソッドで初期化しますが,その際にオブジェクトを引数に与えますが,そのオブジェクトによってどのようなグラフを生成するかが決定します。

Highchartsの初期化部分

var chart = new Highchars.Chart(options); //optionがオブジェクト

それでは渡されるオブジェクトの内容です。

var options = 
{
   credits: {
       enabled: false,
   },

   // 描写先やグラフのタイプを指定する
   chart: {
     renderTo: "myChart", //グラフ表示先のDIV要素のIDを指定する。
     defaultSeriesType: "spline",
     margin: [50, 150, 60, 80],
     marginRight: 20,
     marginLeft: 60,
   },

   // グラフのタイトルとデザイン
   title: {
     text: "盛り上がりグラフ",
     style: {
       margin: "10px 100px 0 0" // center it
     }
   },

   // グラフのサブタイトルとデザイン
   subtitle: {
     text: "[二][文]金曜ロードショー「アルマゲドン」(1998年米)"+
       "J・J・エイブラムスほか脚本マイケル・ベイ監督ブルース・ウィリスベン・アフ",
     style: {
       margin: "0 100px 0 0" // center it
     }
   },

   // グラフの横軸のメモリと単位
   xAxis: {
     title: {
       text: "時間"
     }
   },

   // グラフの縦軸のメモリと単位
   yAxis: {
     title: {
       text: "res数"
     }
   },

   // グラフ頂点でのツールチップ表示の方法
   tooltip: {
     formatter: function() {
     return "<strong>"+ this.series.name +"</strong>"+  // HTMLが使える
     mktime(this.x*asec) +": "+ this.y +" (回)";
     },
     // グラフ上のポインターの位置にドットのラインを引く。
     crosshairs: {
        width: 2,
        color: 'gray',
        dashStyle: 'shortdot'
     }
   },

   // 表示するデータを配列形式で保持する
   // 今回の場合は2つのデータを描画する。
   // 一つは時間単位の2chの総コメント数で,もう一つはtwitterの総コメント数。
  series: [
   {"name":"2chのres数","data":
    [119,177,307,523,387,513,487,464,284,331,156,99,96,117,
    162,354,213,189,593,385,170,362,420,392,703,567,527,390,
    485,346,353,263,310,257,175,207,271,269, 247,469,130,123,
    421,510,361,371,361,276,419,553,61,124,224,782,670,1097,736]
   },
   {"name":"twitterのres数","data":
    [101,138,196,304,262,333,299,284,205,224,127,76,79,87,128,259,
    168, 149,400,298,137,278,332,291,470,387,389,305,337,272,277,210,
    240,219,145,177,207,206,176,324,107, 86,313,353,256,259,288,214,
    301,391,54,100,182,489,425,657,558]
   }
  ],

  // クリックやマウスオーバーの処理を記述。
  plotOptions: 
  {
    series: //seriesに対するオプションを設定する
    {
      point: // 頂点についてイベントを設定する
      {
        events: 
        {
          click: function() { //clickイベントを定義。
              var seektime = (this.x * asec);  // 横軸の値を動画再生時間に変換する
              myvid.currentTime = seektime; // 動画の再生位置を変更する。
            },
          mouseOver: function() { //mouseOverイベントを定義
              showImg(this.x); // サムネイル画像を表示する。
            }
        }
      },
      marker: {
        enabled: false,
      }
    },
  }
};

著者プロフィール

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

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

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

コメント

コメントの記入