ニコニコ動画風の動画投稿サイトをHTML5(WordPress)とJavaScriptで作った話2

またもフリーガの話です。安易ですが動画投稿のページを【弾幕動画】というコーナーにしました。
ConohaサーバーとConohaオブジェクトストレージの性能試験を兼ねた試運転を継続中です。
niconico_video

UIがチープですが俺のデザインを観るサイトではないし、他の部分を頑張りたいので暫らく許してください。

コメントリストを下に配置した

画面の左側には投稿者様の大切な広告スペースがあるのでコメントリスト(フリーガで言うところの弾幕リスト)は動画の下に配置しています。

・・・と言うよりも、画面のサイドにコメントリストを配置するとニコニコ動画さんとの権利問題が絡みやすくなるらしい。逆に言うと【コメントリストの仕様】を変えて【データベースとの接続方法】も大きく異なるフリーガのシステムであれば、ほぼ権利問題に抵触することがないことも解りました!

安全第一、この方針は変えずに進めていきます。

頑張って作ったのに、権利なんかで消されてたまるかです(;’∀’)

コメントと動画の再生時間を接続した

この機能はないと不便なので必須ですね。(コメントをクリック時に動画の再生時間も移動する機能のこと)

フリーガのコメントリストはPHPで生成したtableに対して、コメントデータベースと時間データベースを個別に呼び出すことで表示しています。

そしてHTML5にはcurrentTimeプロパティ という【動画の再生状態を取得する】便利な機能があるので、ビックリするぐらい再生時間とのリンクが簡単なんです。

実装の仕方

  • 1.currentTimeの中に【取得した時間】を入れるコードを書く
  • 2.テーブルの各TRにonclickを仕込む

シンプルで良いですね。まず1のコードは以下です。

[php]function commenttime(x){ var vid = document.getElementById("danmaku"); this.x = x; vid.currentTime = x; }[/php]

フリーガの実装方法とは多少異なりますが、シンプルに書くとcommenttime(x)のxで時間を受け取って、IDで指定した動画(ここではdanmaku)のcurrentTimeに入れてやるだけのものです。

2.の時間を渡す側はもっと簡単です。

[php]<tr onclick=’commenttime(0.1*{$row[‘time’]}-1)’>[/php]

とりあえず0.1とか-1は無視してください。

単純に、クリックしたらcommenttime()の中にデータベースからの時間を放り込んでいます。

0.1は単位の調整です。
-1は【動画の再生時間をワープした後】に1秒戻ることによって、【クリックしたコメント】も見れるようにしています。
-1秒戻らないとコメントが通り過ぎちゃって読めません。

あとは cursor: pointer; や hover時の background-color を指定しておけば、【クリックすると何かが起きる】という雰囲気がユーザーに伝わるかと思います。

動画の再生時間順にソートできるようにした

デフォルト状態では【実際に投稿した時の時系列】で表示されていますが、動画の再生時間順にソートした方が【どの辺りが盛り上がっている】のかが解りやすくなりますね。

それを実現するにはtablesorterという素晴らしいjQueryのプラグインがあります。

上のサイトでダウンロードしたプラグインを呼び出してから以下のコードを追加するだけでソートの準備が整います。

[php]jQuery(document).ready(function() { jQuery("#commenttable").tablesorter({ headers: { 0: { sorter: false }, } }); } );[/php]

フリーガでは以下のようにデータベースを読み込みつつ、データベースから呼び出した時間を使ってソートしました。

[php]//まずはmysqlに接続

$conn = mysqli_connect("private.hosting.freega.net","mysql_username", "mysql_password","mysql_commentlist");

mysqli_set_charset($conn, "utf8");
global $tbname;
if(isset($_POST[‘jikan’])) {
$time=$_POST[‘jikan’];
}
if(isset($_POST[‘danmakucome’])) {
$text=$_POST[‘danmakucome’];
}

$sql="SELECT text,time FROM ".$tbname;
$dyn = mysqli_query($conn,$sql);
if(!$dyn){
die("query error");
}
//以下テーブルの作成
echo "<div class=’comentlist_wrap’>";
echo "<table id=’commenttable’ class=’tablesorter hide_area’ >";
echo "<thead>";
echo "<tr>";
echo "<th>コメント一覧";
echo "</th>";
echo "<th>時間(0.1秒)";
echo "</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";

while ($row = mysqli_fetch_array($dyn)){

echo "<tr ‘commenttime(0.1*{$row[‘time’]}-1)’ >";

echo "<td>" .$row[‘text’];
echo "</td>";

echo "<td class=’sortValue:{$row[‘time’]}’>" .$row[‘time’];
echo "</td>";

echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "</div>";
[/php]

数字の大きさでソートが出来るように td のクラスにtimeを割り振っています。
クラスに数字を入れるのが必須なのかは不明ですが、英語を何となく読みながら【勘】で実装してみました。心にゆとりがあるなら、ちゃんと調べてみた方が良いでしょう。

まぁ、ソートできてるし合ってるんじゃないかな(^^)

長いから打ち切り

あとはjqueryを使って【コメントリストの表示、非表示の切り替え】や【ボリュームツマミの実装】をしたり、【shCircleLoaderでロードアイコン】をつけたり等々、細々とした作業が沢山ありました。
しかし、ここまでくれば方法なんて何でも良い段階だし、ただの力仕事です。

それと厄介な問題が一つあって、アンドロイドの標準ブラウザでのフルスクリーン表示が上手くいかないです。スマホ上で見てもCSSとかの何が悪いか予想つかんのですよ(;´・ω・)
アンドロイドOS自体がGoogleの製品なんだからChormeに統一しろよな・・・あんなんIEみたいなもんで・・・グチグチ

そんな愚痴は置いておいて、そのうちコアだった初期段階の覚書も書きたいですね・・・いや、書きたくないですね(;´・ω・)タイヘンソウダー

さすがに大変そうなので、その辺りの話はフリーガで徐々に解剖しつつ、小出しにしながら蓄積していこうと思います。

つくづく辛いと幸いは紙一重ですよね。

 -

コメント一覧

  1. より:

    詳しい説明ありがとうございます。
    続き希望です!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

同じ分類

webGLゲーム対応のアップローダーサイトを作った(IDCFオブジェクトストレージ)

Unity5のwebGLプレイヤーのことです(旧式プレイヤーも可能ですが推奨しません)。zipで上げてサーバー上で展〚…続き〛

プラグインのCSSを探し当てて停止する私的なコツ

作業はfunctions.phpの編集で行います。 この手の作業は使用プラグインとバージョンによって微妙に異なるので〚…続き〛

管理画面のサイドバー崩れが実はバグだった件

WordPressの4.3にアップデートしたところ、管理画面のサイドバーに表示崩れが発生してしまいました。 表示崩れ〚…続き〛

MyISAMのInnoDB変換時にエラーで出来ないのを回避

  とりあえずSSL化しても問題ないように運営しながら管理画面のみSSLで運用することに決めました。htt〚…続き〛

wordpressの子テーマはfunctions.phpで呼び出した方がイイ(*‘∀‘)

stinger3を使っていたときはサイトの速度評価に対して拘り過ぎていたため、style.css内の多くをhead内〚…続き〛

G+