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

【iPhone】DraftPadアイキャッチ画像取得の方法はこれで決まり!アシスト「Search Photo Pin(Puffin)」 | iPhoneとマヨテキメモ
::Books have knowledge, knowledge is power, power corrupts, corruption is a crime,,,:: Photo by » Zi...

みなさん、こういうことをしておられたのか。知らなかったです。


Photo Pin : Free Photos for Bloggers via Creative Commons
Search millions of Creative Commons photos from Flickr and add them to your blog posts easily.© 2012...

アイキャッチ画像が揃っている、ブログ向け写真検索のPhotoPin.com。カッコいいのが出てきます。ただiPadでは反応しない。これは淋しいじゃないですか。

そんなわけで、ブックマークレットを作ってみました。画像を抜き出しプレビューし、選んだ写真をimgタグでDraftPadに書き込むスクリプトです。以前作ったImageTakerを応用してみました。名前は「PhotoPinTaker」で。

javascript:b=document.getElementsByClassName('preview_img');a=new Array();for(i=0;i<b.length;i++)a[i]=b[i].href;for(i=0;i<a.length;i++){c=document.createElement('img');c.alt=a[i];c.src=c.alt.replace('.jpg','_m.jpg');c.width=180;c.addEventListener('click',function(d){location.href='draftpad:///insert?caret=<a href=\"'+d.target.alt+'\" target=\"_blank\"><img width=500 src=\"'+d.target.alt+'\"></a>'});document.body.appendChild(c);document.write('<b> </b>')}

DraftPadに画像タグを貼るブックマークレット ImageTaker


f:id:wineroses:20121020000039j:image

まずは普通にSafariで検索。


f:id:wineroses:20121020000118j:image

ブックマークレットを実行すると写真が並びます。Flickrにある元画像を抜き出すので、時間がかかるのがタマにキズ。WiFi回線じゃないと辛いかも。


Pomegranate | Flickr - Photo Sharing!

欲しい写真をタップするとDraftPadに切り替わり、タグが埋め込まれます。これをブログにアップすればアイキャッチの完成。ただし、画像をタップすると元画像を開く仕様。Flickrサイトに飛ばしたいけど、画像とサイトの関連が分からなかった(Googleで検索すれば出てくるのに)。今後の課題ということで。

widthで幅を500に固定してますが、その部分は必要に応じて書き換えてください。とりあえず、クレジットはリンク作成用ブックマークレットで対処。

javascript:link='<a href="'+location.href+'">'+document.title+'</a>';location.href='draftpad:///insert?caret='+encodeURIComponent('\n'+link+'\n');

DraftPad 1.5.6
カテゴリ:仕事効率化,ユーティリティ
価格:無料 (Manabu Ueno)

検索も簡単に。DraftPadでキーワードを書いて探すアシスト。

Title: PhotoPinを検索
URL: http://photopin.com/search/<@>

(追記)なんとかクレジット表示に対応できました。

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

wineroses
wineroses