PhotoPinの写真をDraftPadに書き込むブックマークレット PhotoPinTaker(完成版)

PhotoPinの写真をDraftPadに書き込むブックマークレット PhotoPinTaker(暫定版) - W&R : Jazzと読書の日々
みなさん、こういうことをしておられたのか。知らなかったです。アイキャッチ画像が揃っている、ブログ向け写真検索のPhotoPin.com。カッコいいのが出てきます。ただiPadでは反応しない...

これで取り敢えずはうまくいくんじゃないかな。二段構えになってますけど、きちんとクレジットを拾うことができるので、このまま公開可能です。

(修正:2013/2/20) アイキャッチ用PhotoPinTakerが動かなくなったので修正しました


f:id:wineroses:20121021074500j:image

まず、PhotoPin.comに入り、検索をします。

http://photopin.com/


f:id:wineroses:20121021074528j:image

検索結果が表示されたら、下記ブックマークレットを実行。

javascript:b=document.getElementsByClassName('preview_img');a=new Array();for(i=0;i<b.length;i++) a[i]=b[i];for(i=0;i<a.length;i++){c=document.createElement('img');c.id=a[i].id;c.src=a[i].href.replace('.jpg','_m.jpg');c.width=180;c.addEventListener('click',function(d){window.open('http://photopin.com/phpflickr/getsizes.php?id='+d.target.id)});document.body.appendChild(c);document.write('<b> </b>')}

こちらは「PhotoPinTake1」という名前にします。


f:id:wineroses:20121021074640j:image

画像がリストアップされるので、使いたい写真をタップ。

(いま気づいたけど、一枚目の写真が表示されないですね。うーん、謎)


f:id:wineroses:20121021074726j:image

Flickrについての情報ウィンドウが開きます。そこで下記ブックマークレット。

javascript:d=document.createElement('div');d.innerHTML='<pre>'+document.getElementById('photo-html-link').innerHTML+'</pre>';location.href='draftpad://insert?caret=<a href=\"'+document.getElementsByTagName('a')[0].href+'\" target=_blank><img width=500 src=\"'+document.getElementsByClassName('image-container')[0].style.background.replace(/(.+)http(.+)_m\.jpg(.+)/,'http$2.jpg')+'\"></a>'+encodeURIComponent('\n<cite><img src="http://farm4.static.flickr.com/3329/favicons/72157601614001242_7730.png" width=16>'+d.innerText+'</cite>\n');

こちらは「PhotoPinTake2」という名前にします。


photo credit: seyed mostafa zamani via photopin cc

すると、DraftPadに貼り付く。

クリエイティブ・コモンズの著作権フリーな画像のみを検索し、著作者の名前を表示して、元サイトへのリンクも付いている。ふふ、完璧。


(追記)

026: これは最終版!iPhoneでPhotoPinからブログ用アイキャッチ画像を取得する方法。 | No Hack No Life!
photo credit: muha… via photopin ccこんにちは。感動が止まらないよっしー(@yosshi7777)です。 今回は、ブログ用アイキャッチ画像を取得する方法の最終形態を...

ご紹介、ありがとうございます。iPhoneだとPhotoPinTake1のプレビュー画像が小さそうですね。スクリプトの「c.width=180」をカスタマイズした方がいいかも。300にしてみたので、こちらもお試しください。

javascript:b=document.getElementsByClassName('preview_img');a=new Array();for(i=0;i<b.length;i++) a[i]=b[i];for(i=0;i<a.length;i++){c=document.createElement('img');c.id=a[i].id;c.src=a[i].href.replace('.jpg','_m.jpg');c.width=300;c.addEventListener('click',function(d){window.open('http://photopin.com/phpflickr/getsizes.php?id='+d.target.id)});document.body.appendChild(c);document.write('<b> </b>')}
wineroses
wineroses