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

公開日: : 最終更新日:2017/11/05 JavaScript/jQuery, ニコニコ動画

スポンサーリンク

(2017/11 追記)
ニコニコ動画の仕様変更により動かなくなったようです。昔こういうのがあったという参考にしてください。


ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、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の動画が出てくるみたいのにしてもいいと思います。好きなように改良してください。

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

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