ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

公開日: : 最終更新日:2015/07/25 JavaScript/jQuery, ニコニコ動画

スポンサーリンク

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで読み込みの後から追加で表示させようと思ってもうまくいきません。これは実際に中身を見てみればわかることですが、ソース内で「document.write」を使用して表示させているからです。(内容は2014/7/22現在のものです。バージョンアップで動かなくなる場合があるかもしれません。)

動的に外部プレイヤーを表示するまでの流れ

では、うまいこと後からこれを表示させようとしようとするとどうすればいいかというと単純にdocument.writeを上書きしてしまえばいいということになります。私的にjavascriptはこの辺の関数の書き換えができてしまうのが雑だけども凄い便利だなぁと思います。

どういう風に上書きするかは色々あると思いますが、今回は単純に出力する予定だった文字列を指定の要素内に書き出してしまうという方向で行こうと思います。大まかな流れとしては

流れ

document.writeを上書きして指定のところに出力するようにする

指定の動画IDおよび動画のサイズからニコニコ動画の外部プレイヤーのスクリプトDOM(jQueryオブジェクト)を作成して、そのスクリプトを動的に動かす

(document.writeを戻す)

こういったものになります。

document.writeの上書き

これは非常に単純で、関数を代入するだけでおしまいですが、もとの関数を戻すことができるようにしておきます。

document._write = document.write;
document.write = function(msg){
    /***ここにmsgを追加したい要素に放り込む***/
}
//document.writeを元に戻す
//document.write = document._write;

これだけです。これで70%くらいは終わりました。上書きする内容は次で説明します。

外部プレイヤーのオブジェクト作成

これをするにあたって、まずは外部プレイヤースクリプトのURLですが、動画ID別に一様に次のようになっています。

外部プレイヤースクリプトURL

http://ext.nicovideo.jp/thumb_watch/(動画ID)

これは各動画の外部プレイヤー貼りつけスクリプトを見るとわかることですが、(動画ID)の部分には「sm」などから始まる動画IDが入ります。
これを踏まえると、追加するスクリプトはjQueryを用いた場合以下のようになります。

var id = "sm○○○○";
var src = "http://ext.nicovideo.jp/thumb_watch/" + id;
var dst = $("<scr" + "ipt>");
dst.attr("type", "text/javascript");
dst.attr("src", src);
//追加する
$("body").append(dst);

変数のidには表示させたい動画IDを入れ、とりあえずbodyの最後に要素を追加していますが、ここは割とどこでもいいです。そして、後でまとめますが、大事なのはこのスクリプトを実行させる前にdocument.writeを上書きするということです。それをしないと何も動きません。scriptタグのところはタグと間違われる場合があるのであのように分けています。

まとめ

これまでを踏まえるとたたき台としてはこんな感じになります。

document._write = document.write;
document.write = function(msg) {
    //id名nico_playerに表示させる
    $("#nico_player").html(msg);
    //document.writeを元に戻す
    document.write = document._write;
}

var id = "sm20992194";
var src = "http://ext.nicovideo.jp/thumb_watch/" + id;
var dst = $("<scr" + "ipt>");
dst.attr("type", "text/javascript");
dst.attr("src", src);
//追加する
$("body").append(dst);

document.writeでは「nico_player」というID名を付けたタグに「sm20992194」の外部プレイヤーを表示させるようにしています。そして、document.writeを戻すタイミングですが、ソースの末尾(append後)ですと、出力が終わる前に戻してしまうことになってしまうことが出てきてしまうので、関数内で戻しています。(たぶんうまくいっていると思います)

デモ

#nico_player
※ボタンを押すとここに外部プレイヤーが表示されます

ソース

$(function(){
	//動画ID名を入れたら#nico_playerに外部プレイヤーを追加する関数
	function setVideo(id){
		document._write = document.write;
		document.write = function(msg){
			$("#nico_player").html(msg);
			//document.writeを元に戻す
			document.write = document._write;
		}
		var src = "http://ext.nicovideo.jp/thumb_watch/" + id;
		var dst = $("<scr" + "ipt>");
		dst.attr("type", "text/javascript");
		dst.attr("src", src);
		//追加する
		$("body").append(dst);
	}
	//ボタンを押したら変更させる
	$("#videobtn1").click(function(){
		setVideo("sm20992194");
	});
	$("#videobtn2").click(function(){
		setVideo("sm3234633");
	});
});

最後に

デモではボタンを押したら指定の動画が出るようにしましたが、さすがにこんなんじゃ実用性ないので、テキスト入力にしてボタンを押したらそのIDの動画が出てくるみたいのにしてもいいと思います。好きなように改良してください。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

unitychan

MMDなどの3Dモデルが閲覧・共有できるニコニ立体が面白い

いよいよニコニ立体のサービスが開始されました。色々な3D作品が既にたくさん投稿されています。

記事を読む

mouseimage

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

YKO85_monitamiruzangyouOL20131019500-thumb-500xauto-4534

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

PAK23_husentomemo20140313500-thumb-500xauto-4376

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

lazyimg3

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

application-javascript

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

PAK85_seijinsikikeitai20140113500-thumb-500xauto-4104

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

Youtube-Image

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

question

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

chessboard

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

encodingtype
【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

_rtm0919_tp_v
スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

rssimage
【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

rssimage
フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑