TextwellでPhotoPinのアイキャッチ画像を取得する PhotoPinTaker

オシャレな写真を貼って色を添える。

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.© 2013...

著作権フリーな画像が検索できるPhotoPin。よくブログの先頭に、記事のニュアンスを表すイメージ画像が付いてたりする。あれがコレです。Flickrからフリーなのを拾ってくる。

Textwell 1.0
分類: 仕事効率化,ユーティリティ
価格: \250 (Sociomedia)

そんな便利なサイトも、結局はリンクの切り張りが面倒だったりする。「パソコンを前提に作られてるからなあ」と諦めていた貴方。iPhoneでも打つ手はあるんです。DraftPad用に作った分を今度はTextwell用に書き換えてみました。

T.closelets([
  {title:"リンクを作成します",
    fn:function(){
      e=document.getElementById('photo-html-link');
      if(e){
        link="<img width=500 src="+document.getElementsByClassName('image-info-active')[0].getElementsByTagName('a')[0].href+">\n<cite><img src=http://l.yimg.com/g/favicon.ico width=16>"+e.value+"</cite>\n";
        T("replaceCurrent",{text:link});
      }else{
        T("done");
      }
  }}],
  function(){
    s=T.current;
    location="http://photopin.com/search/"+s;
});

登録リンクはこちら→ http://tinyurl.com/ldqezee

たとえばTextwellに「September」と書いて、そこにカーソルを置いたままPhotoPinTakerを起動。Textwellの内蔵ブラウザでPhotoPinが開きます。上のほうの写真は４段ほどは広告なので、点線より下のほう。そこからが自由に使える写真になります。どれかをタップすると「preview」と「get photo」の２つのリンクが出る。この「get photo」のほうをもう一度タップしてください。

すると、その写真についての詳細な説明画面がポップアップします。ここで内蔵ブラウザを閉じる。この画面でないときは、閉じても何も起こりません。ポップアップが出ているとき、この画面から必要なリンクを見つけ出して、HTMLタグで書き出します。

photo credit: Ennor via photopin cc
すると、こんな感じに写真が貼り付きます。下にはクレジット情報がつく。タップすればFlickrのページに飛ぶようになっています。

「クリエイティヴ・コモンズ」という規定があり、写真ごとに扱いが違います。商用利用を禁止するのもあれば、一次素材として加工も可能な写真もあります。PhotoPinでヒットする写真は、とりあえずブログに貼り付けることにOKを出している分なので、その範囲でお使いください。