Youtubeでリスト再生をしているときに個別の動画タイトル、URLをTwitterで共有するBookmarkletを書いた。

Youtubeでリスト再生をしているときに個別の動画タイトル、URLをTwitterで共有するBookmarklet

最近、作業用BGMにYouTubeのリスト機能を使ってるんですが、「あっ、これpostしたい！」って時に、YouTubeに標準で付いているTwitter共有機能だと、"リストを共有する"ことになってしまい、個別の動画についてpost出来ないということを知りました。

また、それに関していろんなBookmarkletを探したところ、いい線いってるのがいくつかありましたが、自分の思うようなもの(新規ウィンドウを立ちあげて、再生中の個別の動画のタイトル、URLをTwitterで共有)が見当たらなかったので既存のBookmarkletをぽちぽち改良。
あったらごめんなさい…（◞‸◟）

本体

改行等を加えて見やすくするとこんな感じです。~~全然見やすくないとかなしで。~~

javascript:(function(){
var d=document,
    e=encodeURIComponent,
    surl='http://youtu.be/'+location.href.split("=")[1].split("&")[0],
    n=d.getElementsByTagName("h1")[0].getElementsByTagName("span")[0].innerHTML.replace(/^[\s|　]+|\t|\n|<("[^"]*"|'[^']*'|[^'">])*>/g,''),
    w=600,
    h=400,
    l=(window.screen.width-w)/2,
    t=(window.screen.height-h)/2;
void window.open('http://twitter.com/home?status='+e(n)+' '+e(surl)+e(" @youtubeから"),'new','width='+w+',height='+h+',left='+l+',top='+t)})();

で、まぁ、実際には
ここをブックマーク
してもらえばよいかと思います。

Youtubeならリストに入っている動画だけじゃなく、個別の動画でも使えるはずです。
YouTube短縮URLをpostするのにも使えると思います！

解説

リストに入っている動画を再生した時にURLを見てもらえばわかると思うんですが、

http://www.youtube.com/watch?v=●●●&list=■■■

となっており、&以降にリスト情報が乗っているのがわかります。
ここを

surl='http://youtu.be/'+location.href.split("=")[1].split("&")[0];

でまず、=で区切った後半を取り、その部分の&で区切った前半部分(上記の例でいうと、●●●の部分)を取得し、それをhttp://youtu.be/と結合して動画個別のURLを生成しています。

次に、動画のタイトルですが、そのまま取得してくると、

▲▲▲ - YouTube

となり、 - YouTubeというおまけがついてきます。
これではなんか不恰好だと感じたので、

n=d.getElementsByTagName("h1")[0].getElementsByTagName("span")[0].innerHTML.replace(/^[\s|　]+|\t|\n|<("[^"]*"|'[^']*'|[^'">])*>/g,'');

としてタイトルをHTMLから取得しています。
h1タグの中からspanタグを探し、その中の文字列の要らないものを正規表現でマッチさせて置換してそぎ落としています。
具体的には｢先頭にある1つ以上の半角スペース OR 全角スペース｣、｢タブ｣、｢改行｣、｢タグ｣がある場合は削除しています。

あとは個人的に画面の真ん中に新規ウィンドウが出て欲しかったので

l=(window.screen.width-w)/2;
t=(window.screen.height-h)/2;

で画面の大きさを取得して、それらをwindow.open()のオプションに渡しています。

w=600;	// width
h=400;	// height

が実際に表示されるウィンドウの大きさです。大きさを弄りたい時はここの値をいじってもらえればいいと思います。

実際にpostする内容は

window.open('http://twitter.com/home?status='+e(n)+' '+e(surl)+e(" @youtubeから"),'new','width='+w+',height='+h+',left='+l+',top='+t);

で指定しています。
e(n)がタイトル、e(surl)がURL、その後ろのe("")が初期から挿入しているテキストです。
つまり、ちょっといじれば好きな設定にできるよ！ってことです。
あたしは@の後に半角スペース(%20)を入れてます。

文頭にhoge｜というテキストを挿入したい場合、

window.open('http://twitter.com/home?status='+e("hoge｜")+e(n)+' '+e(surl)+e(" @youtubeから"),'new','width='+w+',height='+h+',left='+l+',top='+t);

文末に｜fugaと挿入したい場合、

window.open('http://twitter.com/home?status='+e(n)+' '+e(surl)+e(" @youtubeから")+e("｜fuga"),'new','width='+w+',height='+h+',left='+l+',top='+t);

のようにすればいけると思います。

おそらく、上記リンクからブックマークするとURLエンコードされてると思いますので適当にデコードして、削除するなり、自分の好きなテキストを挿入するなりするといいと思います！
便利です→Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト

あとなんか解説必要なとこあったっけ…？

参考にさせていただきました。

~~ほぼコピペですありがとうございましたm(_ _)m~~
※動作確認はFirefox17.0.1でしか行なっていません。

あと、post後にホームに戻るのでそこをなんとかしたいです。
また時間あるときにでも(；・∀・)

一寸先はマミ

ξ(✿ ＞◡❛)ξ▄︻━━

Youtubeでリスト再生をしているときに個別の動画タイトル、URLをTwitterで共有するBookmarkletを書いた。

Youtubeでリスト再生をしているときに個別の動画タイトル、URLをTwitterで共有するBookmarklet

本体

解説

参考にさせていただきました。