FlickrのクレジットHTMLを作ってするぷろに投げるブックマークレット

FlickrのクレジットHTMLを作るブックマークレットを作りました(PC用)。が、FlickrスマートフォンページはPC版と構造が違うので同じブックマークレットは使えません。

Photo: Flickr logo for Fluid by Vance Reeser

このままだとスマホでブログ書くときに不便なので、別途ブックマークレット作りました。実行するとこういうクレジット表記が作れます。

Photo: Flickr by Amanda Cabral

するぷろと連携

Flickrページ上でブックマークレットを使うと、するぷろと接続するダイアログが出て ※各写真はクリックで拡大

するぷろが起動して

HTMLを貼り付けることができます。

使い方

下記テキストエリアのコードを選択してコピーします
javascript:(function(){ var title,a, divs = document.getElementsByTagName('div'), len = divs.length; for(var i=0;i<len;i++){ if(divs[i].className.match(/photo_meta/)){ title = divs[i].getElementsByTagName('h2')[0].childNodes[0].nodeValue.replace(/ /g, '').replace(/\t/g, '').replace(/\n/g, ''); break; } } var ps = document.getElementsByTagName('p'), p_len = ps.length; for(var i=0;i<p_len;i++){ if(ps[i].className == 'photo-owner'){ a = ps[i].getElementsByTagName('a')[0]; break; } } var url = document.location +''; var author= a.childNodes[0].nodeValue; var author_link = a.href; var html = '<small>Photo: <a href="' +url +'" target="_blank">' +title +'</a> by <a href="' +author_link +'" target="_blank">' +author +'</a></small>'; window.location.href = 'slpro://' +html; })();

Safariでどこか適当なページをブックマークします

この時、タイトルはFlickrブックマークレットとわかるようにしておいたほうがいいでしょう。タイトルを変えたら一旦保存。

一旦保存した後、ブックマークを編集します。URL欄にコピーしたコードを貼り付け。

これで準備完了。あとはFlickrの写真ページで、今保存したブックマークを呼び出せば動きます。

モブログでもFlickrガンガン使えますね！ひゃっほい。

jsの中身

ブックマークレットの中身はこんな感じ。必要であればカスタマイズしちゃってください。

javascript:(function(){
    var title,a,
        divs = document.getElementsByTagName('div'),
        len = divs.length;
    for(var i=0;i<len;i++){
        if(divs[i].className.match(/photo_meta/)){
            title = divs[i].getElementsByTagName('h2')[0].childNodes[0].nodeValue.replace(/ /g, '').replace(/\t/g, '').replace(/\n/g, '');
            break;
        }
    }

    var ps = document.getElementsByTagName('p'),
        p_len = ps.length;
    for(var i=0;i<p_len;i++){
        if(ps[i].className == 'photo-owner'){
            a = ps[i].getElementsByTagName('a')[0];
            break;
        }
    }

    var url = document.location +'';
    var author  = a.childNodes[0].nodeValue;
    var author_link = a.href;
    var html = '<small>Photo: <a href="' +url +'" target="_blank">' +title +'</a> by <a href="' +author_link +'" target="_blank">' +author +'</a></small>';
    window.location.href = 'slpro://' +html;
})();

// 一行化
// javascript:(function(){ var title,a, divs = document.getElementsByTagName('div'), len = divs.length; for(var i=0;i<len;i++){ if(divs[i].className.match(/photo_meta/)){ title = divs[i].getElementsByTagName('h2')[0].childNodes[0].nodeValue.replace(/ /g, '').replace(/\t/g, '').replace(/\n/g, ''); break; } } var ps = document.getElementsByTagName('p'), p_len = ps.length; for(var i=0;i<p_len;i++){ if(ps[i].className == 'photo-owner'){ a = ps[i].getElementsByTagName('a')[0]; break; } } var url = document.location +''; var author  = a.childNodes[0].nodeValue; var author_link = a.href; var html = '<small>Photo: <a href="' +url +'" target="_blank">' +title +'</a> by <a href="' +author_link +'" target="_blank">' +author +'</a></small>'; window.location.href = 'slpro://' +html; })();

PC版のブックマークレットはこちら。
Flickrのクレジット表記を作るブックマークレット(新デザイン対応済み) | Zafiel