埋め込まれたYouTube、ニコニコ動画から簡単に短縮URLを取得するブックマークレット

今回のあらまし

ニュース記事などをツイートすることが多いのですが、その記事に埋め込まれた動画があれば、出来るだけ含めてます。
基本的には動画プレイヤーを右クリックして、貼り付けコードをコピーして、メモ帳なんかに貼り付けて成型します。
ニコ動のはそれじゃダメなので動画ページに飛んで以前公開したBookmarkletを使って短縮という形ですね。*1
ただ、最近それをやるのが煩わしくなってきたんでスクリプトを使って手軽にしようというのが今回の話です。

ブックマークレットについて

今回のものは動画が埋め込まれたページにて実行すると、動画の上に短縮URIが表示される感じです。
YouTubeの新旧埋め込みコード、ニコニコ動画の外部プレイヤーと動画情報に対応できているはず。
(追記2-1 2011 Apr. 08th 23:00ころ)
修正しました。面倒だったんでinnerHTMLにしたw
確認したブラウザはIE8(+Sleipnir 2.9.6)、IE9(+Sleipnir 2.9.6)、Firefox 3.6.16、Firefox 4.0、SeaMonkey 2.0.13、Google Chrome 11β、Safari 5.0.4(Win)、Opera 11.10RCです。
※ただし、ブラウザにインストールされている拡張機能によっては、上手く動かない場合があります。個々の対応はしないので自分で修正してね♥
(追記2-1 おわり)
(追記1 2011 Apr. 08th 04:10ころ)
※他のブラウザでテスト忘れてて試してみたら、IE9、Chrome11β、Opera11.10RCでは問題なかったですが、Firefox(3.6.16と4.0で確認)では正しく動かないです*2 Safari5(Win)だとYouTubeの旧埋め込みコードでは動かないっぽいです。気が向いたら修正します。

javascript:(function(){var%20i;var%20sc=document.getElementsByTagName("script");for(i=0;ihttp://nico.ms/"+sc[i].src.split("/")[4];d.setattribute("style","width:15em;height:1.2em;color:#fff;background:#000");sc[i].parentnode.insertbefore(d,sc[i]);}}var%20fr=document.getelementsbytagname("iframe");for(i=0;ihttp://nico.ms/"+fr[i].src.split("/")[4];d.setattribute("style","width:15em;height:1.2em;color:#fff;background:#000");fr[i].parentnode.insertbefore(d,fr[i]);}else%20if(fr[i].src.match(/http:\/\/www\.youtube\.com\/embed\//)){var%20d=document.createelement("div");d.innertext="http://youtu.be/"+fr[i].src.split("?")[0].split("/")[4];d.setattribute("style","width:15em;height:1.2em;color:#fff;background:#000");fr[i].parentnode.insertbefore(d,fr[i]);}}var%20em=document.getelementsbytagname("embed");for(i=0;ihttp://youtu.be/"+em[i].src.split("?")[0].split("/")[4];d.setattribute("style","width:15em;height:1.2em;color:#fff;background:#000");em[i].parentnode.insertbefore(d,em[i]);}}})();
javascript:(function(){var%20i,j,s="width:20em;height:1.2em;color:#fff;background:#000",u="",v="",x=new%20Array("script","iframe","embed");for(i=0;i<x.length;i++){var%20e=document.getElementsByTagName(x[i]);for(j=0;j<e.length;j++){var%20d=document.createElement("div");if(e[j].src.match(/http:\/\/ext\.nicovideo\.jp\//)){d.setAttribute("style",s);u="http://nico.ms/";v=e[j].src.split("?")[0].split("/")[4];d.innerHTML=u+v;}else%20if(e[j].src.match(/http:\/\/www\.youtube\.com\/(embed|v)\//)){d.setAttribute("style",s);u="http://youtu.be/";v=e[j].src.split("?")[0].split("/")[4];d.innerHTML=u+v;}if(x[i].match(/embed/)!=null&&u.match(/youtu\.be/)!=null&&navigator.userAgent.match(/Safari/)!=null){e[j].parentNode.parentNode.insertBefore(d,e[j].parentNode);}else%20if(u.match(/(nico.ms|youtu.be)/)!=null&&v!="player"){e[j].parentNode.insertBefore(d,e[j]);}}}})();

改行とインデント入れて見やすくするとこんな感じ。
毎度のことではありますが、効率化できるとことがありますねw
(追記2-2 2011 Apr. 08th 23:00ころ)
全体的に見直して、ダイエットさせてみた。当社比64%くらいに。
まぁ、まだまだ余地は有るけどね。
(追記2-2 おわり)
まぁ、メインブラウザのSleipnirで動いているんで(・ε・)キニシナイ!!

javascript:(function(){
var%20i,j,s="width:20em;height:1.2em;color:#fff;background:#000",u="",v="",x=new%20Array("script","iframe","embed");
for(i=0;i<x.length;i++){
	var%20e=document.getElementsByTagName(x[i]);
	for(j=0;j<e.length;j++){
		var%20d=document.createElement("div");
		if(e[j].src.match(/http:\/\/ext\.nicovideo\.jp\//)){
			d.setAttribute("style",s);
			u="http://nico.ms/";
			v=e[j].src.split("?")[0].split("/")[4];
			d.innerHTML=u+v;
		}else%20if(e[j].src.match(/http:\/\/www\.youtube\.com\/(embed|v)\//)){
			d.setAttribute("style",s);
			u="http://youtu.be/";
			v=e[j].src.split("?")[0].split("/")[4];
			d.innerHTML=u+v;
		}
		if(x[i].match(/embed/)!=null&&u.match(/youtu\.be/)!=null&&navigator.userAgent.match(/Safari/)!=null){
			e[j].parentNode.parentNode.insertBefore(d,e[j].parentNode);
		}else%20if(u.match(/(nico.ms|youtu.be)/)!=null&&v!="player"){
			e[j].parentNode.insertBefore(d,e[j]);
		}
	}
}
})();

テスト用

  • YouTubeの現在の埋め込みコード(iframe形式)



  • YouTubeの古い埋め込みコード(object形式)



D


*1:YouTube用はこちらの下の方

*2:innerTextでなく、textContentなため