• SIS Lab
  • >
  • Blog
  • >
  • jQueryを使ったブックマークレットで、TEDからmp4を抽出する

jQueryを使ったブックマークレットで、TEDからmp4を抽出する

更新日:2018.07.28 作成日:2012.02.26
#jQuery

ブックマークレットが自分でサクサク書けるようになりたい。まずは、「TEDからmp4を抽出したい」ってところからブックマークレットのお勉強。ついでに、jQueryも触ってみたいので、ブックマークレットでjQueryを使ってる例を探してみました。以

下のページを参考にさせてもらいました。 jQueryでブックマークレットを書く | ethertank diary j

Queryが読み込まれてるかどうか判定して、もしjQueryが読み込まれていなかったら、googleがホストしているjQueryライブラリを読みこめばよいみたい。

Google Libraries API - Developer's Guide - Google Libraries API - Google Code

javascript:(function(){
    if (typeof jQuery == 'undefined') {
        var d=document,
            j=d.createElement('script');
        j.type='text/javascript';
        j.src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
        j.onload = bml;
        d.body.appendChild(j);
    }else {
        bml();
    }
    function bml(){
        (function($){
            /* 任意のjQueryコード */
        })(jQuery);
    }
})();

ここでは、以下に公開されていたものを使わせてもらうことにする。

jQueryでブックマークレットを書く　3 | ethertank diary

javascript:(function(d, j, b) {
 
    function r() {
        setTimeout(function() {
            (typeof jQuery == 'undefined') ? r() : b(jQuery);
        }, 99);
    }
 
    if (j) b(jQuery);
    else {
        var s = d.createElement('script');
        s.src = '//p.tl/Q9Fz';
        d.body.appendChild(s);
        r();
    }
 
})(document, this.jQuery, function($) {
    $('*').css({'background':'#000','color':'ghostwhite'});
});

その中でも、短縮verを使わせてもらって、jQeuryコードを書いてみる。

javascript:(function(d,j,b){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}if(j){b(jQuery)}else{var s=d.createElement('script');s.src='//p.tl/Q9Fz';d.body.appendChild(s);r()}})(document,this.jQuery,function($){
/*任意のjQueryコード*/
});

TEDのページから、ダウンロード用のmp4ファイルを見つける

Matt Cutts: Try something new for 30 days | Video on TED.com

jQueryを使うと、何が嬉しいかというと、jQueryの強力なセレクタが使えること。TEDのページを見てみると、metaタグにmp4ファイルが指定されているみたい。

<meta property="og:video" content="http://download.ted.com/talks/MattCutts_2011U-320k.mp4" />

そこで、以下のようにセレクタを指定すると、<meta property="og:video" content="hoge.mp4" />のmp4ファイルのURLを取得できる。

$("meta[property='og:video']").attr("content")

ted2mp4

以下、jQueryを使って、metaタグのmp4ダウンロードファイルを取得して、新しいwindowを開くブックマークレット。

スニペットを参考にさせてもらいました。jQueryでブックマークレットを書く　3 | ethertank diary

javascript: (function (d, j, b, s) {
    function r() {
        setTimeout(function () {
            (typeof jQuery == 'undefined') ? r() : b(jQuery)
        }, 99)
    }(j) ? b(jQuery) : d.body.appendChild(d.createElement('script')).src = '//p.tl/Q9Fz', r()
})(document, this.jQuery, function ($) {
    window.open($("meta[property='og:video']").attr("content"), "new");
});
javascript:(function(d,j,b,s){function r(){setTimeout(function(){(typeof jQuery=='undefined')?r():b(jQuery)},99)}(j)?b(jQuery):d.body.appendChild(d.createElement('script')).src='//p.tl/Q9Fz',r()})(document,this.jQuery,function($){window.open($("meta[property='og:video']").attr("content"),"new");});

参考

以下を参考にさせてもらいました。