前回に続いて、今回もPCのフロントエンドの説明となります。今回はこのアプリのメインコンテンツである、コメント表示機能について説明します。
コメント表示機能について
コメントの表示形式は、いろいろなパターンが考えられます。
などなど。
今回のアプリの狙い所は実用的なものではなく、楽しいか楽しくないかというのがポイントです。実際に動作させた場合にどのように表示すると楽しいか、という点で考えるとランダムが一番適当と思われます。コメント1つ1つの可読性が高いことが重要なわけではなく、盛り上がってるかどうかがわかること、の方が重要です。
ニコニコ動画と同じですね。
ニコニコ動画も画面上に大量のコメントが流れるのを見ることで、コメントしていない閲覧者も盛り上がることができます。あのコメントを1つ1つ読むなんてことは不可能ですよね?
ですので、ここでは
- 表示位置はランダム
- 表示方法はフェードインフェードアウト
- オブジェクトは半透明
という表示形式を採用しました。
閲覧者がコメントエリア内でわいわいがやがや盛り上がっているようなイメージとなります。また、半透明にしたことで、コメントが重なってもある程度読むことが可能となります。
ここで使用したのは、jQueryのプラグインである、Beauty Tipsです。このプラグインは、基本的にはインフォメーションバルーンを提供するモノですが、動きやできることが相当凝っていて、Webページのインターフェースがよりリッチに、そして高いユーザビリティを提供することが可能となります。その割に使い方が非常に簡単という親切設計となっています。
詳しくはデモのページを参照してください。感動します。
コメント表示の流れ
動画再生からの流れをおさらいしておくと、
- 動画再生
- ↓
- 動画の再生時間変更イベント発生
- ↓
- 再生時間をチェックして、コメントをサーバに取りに行く(getRes()関数起動)
ここでは、getRes()で取得したコメントを画面に表示する部分の説明となります。
コメントの取得について
それではさっそくソースを見てみましょう。
getRes()の関数は以下のようになります。
ここでは、動画開始時刻をunixtimeで保持し、動画再生位置の経過時間(秒)を足し込むことでコメント取得時の時刻パラメータとしています。
コメントはJSONで取得しますが、取得したコメントデータを1件ずつshowRandom()関数に渡すことで、コメントを表示させています。
ちなみにコメントのJSONは以下のようなフォーマットとなります。
コメントの表示について
それではshowRandom()を見てみましょう。
最初の方ではコメントのDIV要素を作成し、その表示位置をランダム関数と9分割の区分けに従って、散らばるように設定をしています。
その後、作成したDIV要素にBeauty Tipsの設定を行います。
Beauty Tipsのサンプルを見るとわかると思いますが、ほとんどが何かの要素に付随するイベントによって表示非表示が制御されています。画像の上にポインターが乗ったら説明をバルーン表示する、といった具合です。
しかし、今回の場合は何らかの意味のある要素に対するバルーンでありません。ただバルーンのみを表示非表示させたいということになります。そのような場合には、triggerパラメータに“none”を渡すことで、ユーザの任意のタイミングで制御することが可能となります(赤字の部分がポイントです)。
また、非表示となったDIVは見えないだけでHTMLとしては存在していますので、放っておくとブラウザがどんどん重たくなっていきます。メモリの無駄遣いでもありますので、DIV要素そのものを削除する必要があります。delQue配列にDIVのIDと保存時間を記録しておき、数分後にdelQueを走査し、DIVを削除します。ガベージコレクションのような動きです。
以上が、コメント表示の部分になりますが、jQueryの多彩なプラグインにはいつも驚かされますね。Beauty Tipsのおかげで、半透明なバルーンチップを、フェードインフェードアウトで表示が可能となりました。
こんな風に動きます。
これは映画アルマゲドンのワンシーン、松田聖子が出てくるシーン付近です(個人的にはどこに出てるのかよくわからなかったけど…)。静止画ですみませんが、半透明+フェードインフェードアウトという動きの雰囲気が伝わりますでしょうか。
ちょっと長くなりましたので、グラフ機能については次回にします。