R&Dトレンドレポート

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

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

前回に続いて,今回もPCのフロントエンドの説明となります。今回はこのアプリのメインコンテンツである,コメント表示機能について説明します。

コメント表示機能について

コメントの表示形式は,いろいろなパターンが考えられます。

  • 縦スクロール
  • 横スクロール
  • ランダム

などなど。

今回のアプリの狙い所は実用的なものではなく,楽しいか楽しくないかというのがポイントです。実際に動作させた場合にどのように表示すると楽しいか,という点で考えるとランダムが一番適当と思われます。コメント1つ1つの可読性が高いことが重要なわけではなく,盛り上がってるかどうかがわかること,の方が重要です。

ニコニコ動画と同じですね。

ニコニコ動画も画面上に大量のコメントが流れるのを見ることで,コメントしていない閲覧者も盛り上がることができます。あのコメントを1つ1つ読むなんてことは不可能ですよね?

ですので,ここでは

  • 表示位置はランダム
  • 表示方法はフェードインフェードアウト
  • オブジェクトは半透明

という表示形式を採用しました。

閲覧者がコメントエリア内でわいわいがやがや盛り上がっているようなイメージとなります。また,半透明にしたことで,コメントが重なってもある程度読むことが可能となります。

ここで使用したのは,jQueryのプラグインである,Beauty Tipsです。このプラグインは,基本的にはインフォメーションバルーンを提供するモノですが,動きやできることが相当凝っていて,Webページのインターフェースがよりリッチに,そして高いユーザビリティを提供することが可能となります。その割に使い方が非常に簡単という親切設計となっています。

詳しくはデモのページを参照してください。感動します。

コメント表示の流れ

動画再生からの流れをおさらいしておくと,

  • 動画再生
  •    ↓
  • 動画の再生時間変更イベント発生
  •    ↓
  • 再生時間をチェックして,コメントをサーバに取りに行く(getRes()関数起動)

ここでは,getRes()で取得したコメントを画面に表示する部分の説明となります。

コメントの取得について

それではさっそくソースを見てみましょう。

リスト1 BeautyTipsのソースの読み込み

<script src="js/jquery.bt.min.js" type="text/javascript"></script>

getRes()の関数は以下のようになります。

リスト2 getRes()関数

basetime = 1284724805; //動画開始時のunixtime。
function getRes()
{
    var t =  myvid.currentTime; //動画の再生位置の経過時間(秒)を取得
    var _t = basetime + t; // 開始時にプラスしコメント取得時刻のパラメータとする

      // クッキーに当該動画の再生位置を保存する。
    $.cookie("time_"+id, t, {path:"/jikkyou", expires: 3650});

    var URL="./getRes.cgi";

      // getJSON関数でコメントを取得する。
    $.getJSON( 
            URL,
            {
                "time": _t,
                "id": id,
                "sec": updateSec,
            },
            function(data, status){ //JSON取得時にコールバックされる。

                var len = data.bodies.length; //コメント数
                var updmSec = updateSec * 1000; //ミリ秒にする
                // コメントを1件ずつshowRandom()関数に渡す。
                $.each(data.bodies, function(i, d){
                // 引数:コメント番号,コメントデータ,全体の数,再生unixtime,コメント取得間隔ミリ秒
                    showRandom(i,d, len, _t, updmSec);
                });
            });
}

ここでは,動画開始時刻をunixtimeで保持し,動画再生位置の経過時間(秒)を足し込むことでコメント取得時の時刻パラメータとしています。

コメントはJSONで取得しますが,取得したコメントデータを1件ずつshowRandom()関数に渡すことで,コメントを表示させています。

ちなみにコメントのJSONは以下のようなフォーマットとなります。

リスト3 コメントの例

{
    "bodies":
    [
        [" ふぅー間に合った。行ったかと思ったよ ", "間に合ってよかったね!"],
        [" いわゆる実況向き? "],
        [" キタ━━━━━━(゚∀゚)━━━━━━!!!! "],
        [" キター! "]
    ]
}

著者プロフィール

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

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

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

コメント

コメントの記入