ニコニコ動画の外部プレイヤーを動的に設置する【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/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

【javascript】正規表現文字抽出簡易ツール

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

記事を読む

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

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

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

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