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

関連記事

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

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

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

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

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

記事を読む

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

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

→もっと見る

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