前回のシステム側の構成に続いて，今回はフロントエンドの構成について考えます。

PC版フロントエンドはブラウザを使用します。そうすることで，さまざまなOSや環境に依存せずにより汎用性の高いシステムが作ることができます。

前回あげた機能を盛り込みますが，2画面のシンプルな構成で行きたいと思います。

動画選択画面

まず最初の画面ですが，ここでは録画したテレビ番組一覧が参照できる画面となります。この画面では，

• 動画のサムネイル
• タイトル
• チャンネル情報
• 放送日時，時間帯
• 総コメント数
• 時間当たりの平均コメント数

をリストで表示します。

この画面が番組動画選択の画面であり，ある程度のサマリー情報が参照できるようになっています。実況が盛り上がっているかどうかぐらいはコメント数からわかります。

動画サムネイルかタイトルなどのリンクをクリック後，動画再生の画面に遷移します。

動画再生画面

番組を選択後の動画再生画面ですが，基本的に以下の3ペインの構成となっています。

• 動画再生エリア
• 盛り上がりグラフ表示エリア
• コメント表示エリア

最初の選択画面は静的なページでしたが，このページでは，動画の再生によって

• コメント表示
• グラフ表示

が時系列で変化していきます。それぞれの影響は次のような関係となります。

• ①動画再生位置に合わせてその時間帯のコメントを表示する。
• ②動画再生位置に合わせてグラフのマーカーを移動させる（グラフは横軸が時系列，縦軸がコメント数⁠）⁠。マーカーは再生時間帯を表現している。
• ③グラフのマーカーを移動させることによって，動画をその再生位置にスキップさせる。

以上がPC版フロントエンドの構成となります。では，それらの機能がどのようにして実現されるのか見ていきましょう。

クライアント環境について

今回のアプリケーションでは以下のような環境で構築を行いました。

ブラウザ：Chrome（HTML5使用）

JavaScriptライブラリ：
jQuery-1.3.2,
Highcharts JS,
Beauty Tips（jQuery plugin）,
COOKIE（jQuery plugin）

動画再生機能について

このアプリケーションで肝となるのが動画再生機能です。今までブラウザ上で動画再生させるためには，flashを使用するのが定石だったと思いますが，開発環境を作るのがなかなか面倒です。

そこで今回は，HTML5のvideoタグを用いて再生させようと思います。videoタグの仕様については，W3CのHTML5ドキュメントで公開されています。

<video id="myVid" controls src="動画.mp4" poster="シーン画像.png"></video>

基本的にこれだけのタグでブラウザ上で動画の再生が可能となります。

• id="myVid" は，JavaScriptでvideoエレメントにアクセスするためのIDとなります。
• controls属性はブラウザで用意されているコントロールを提供します。
• srcは動画へのパスを記述します。ここで指定したファイルが再生されます。
• posterは動画の再生準備ができるまで，または，動画が再生できないモノの場合表示される画像となります。タイトル画像などが適当だと思います。

ここでは使っていませんが，autoplayという属性もあり，これを使用すると動画の準備ができ次第自動で動画の再生が行われます。うーん。簡単ですね。。

ではこのコントロールをJavaScriptで行うにはどのようにしたらよいでしょうか。今回のアプリではコメントエリアとの連動や，グラフエリアとの連動がありますので，スクリプトで動画のイベントや操作をハンドリングする必要があります。当然，video属性のイベントも用意されていますのでそれを使用しましょう。

このアプリでハンドリングしているイベントについてご紹介します。

canplayイベント

動画の準備ができたときにファイアーします。

ここでは前回再生位置をクッキーにとっておき，値があった場合準備完了時にその時間に動画の再生位置を変更しています（前回の続きを見る感じ⁠）⁠。

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

myvid.addEventListener("canplay", function(){
		if ( starttime != undefined )
		{
			myvid.currentTime = starttime; //再生位置を変更
		}
});

timeupdateイベント

動画再生中に発生する。再生時間が変更になったタイミングでファイアーし続ける。

このタイミングを利用してコメントを取得したり，グラフのマーカー位置を変更したりします。下記のスクリプトでは，イベントがファイアーするごとにグラフのマーカーを弾き直し，定期的に（updateSecで割り切れた場合のみ）getRes()でサーバに実況コメントを取得しにいっています。

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で割り切れた場合。多重取得防止。</p>
  if ( t % updateSec == 0 && t != tTime )
  {
    tTime = t;
   getRes(); // コメントを取得する。</p>
 }
});

seekedイベント

動画の再生位置を強制的に変えた場合にファイアーする。

再生位置が変わった場合，定期的なコメントの取得を待たずに即時getRes()でコメントを取得する。

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

myvid.addEventListener("seeked", function(){
    getRes();
});

いたって普通のJavaScriptで動画再生を中心に他のパーツを連動させることができています。flashのようにActionScript→JavaScriptという風に別の言語に対してのハンドリングが必要ないため，開発のしやすさは絶大です。

次回は，コメント表示機能とグラフ表示について説明します。