ニコニコ動画の外部プレイヤーを動的に設置する【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
  • このエントリーをはてなブックマークに追加

関連記事

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

javascriptでチェックボックスを一括で変更する方法

チェックボックスのチェックに一つ一つチェックを入れていくのは非常に手間がかかるのでjavascrip

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

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