PhotoPinからThumbEditへ画像を引っ張ってくるブックマークレットを作りました!


photo credit: dollie_mixtures via photopin cc

こんにちは。今日はお休みなあずき(@azucky824)です。朝からまったりとしております。

さて、ぼくは以前こんな記事を書きました。
ドットインストールでJavaScriptの勉強を始めました! | azucky_Log


それで、ちょうど昨日の夜に基礎部分のレッスンが終わったので、一番よく使うブックマークレットをみながらちまちまと作業をしていたのです。

ブログを書くのにかかせない、PhotoPinというサイト

最近になって、ブログの画像に自分の写真ではないものを使うようになりました。それがPhotoPin。
Photo Pin : Free Photos for Bloggers via Creative Commons

flickrという写真共有サイトから、自由に使って良い写真のみを検索できるサイトです。これ使うだけですごいオシャレブログになった感じになれます。

そしてこのサイトをiPhoneから使えるようにしてくださったのがこちら↓
PhotoPinの写真をDraftPadに書き込むブックマークレット PhotoPinTaker(完成版) – W&R : Jazzと読書の日々

PhotoPinTake1PhotoPinTake2
という二段階のブックマークレットでdraftpadというアプリにタグを生成してくれる素敵プログラム(*´∀`*)
今回僕は、このPhotoPinTake2にちょっと手を加えてみました。

僕の不満点

このブックマークレット、非常に便利なんですが僕が使ううえで不満なところがいくつかありました。

  1. 送り先がdraftpad
  2. 僕のブラウザからだと半角スペースがなくなってしまう
  3. 他のアプリでも簡単に使えるようにしたい

三つ目に関しては、僕が勉強してわかるようになれば満足なのでOKとしても、上二つは結構個人的にはなんとかしたいところでした。普段使っている下書きアプリのThumbEditへ送るように組んでみました。

ド素人でも出来上がった!

様々苦労はしましたが、思っていたよりはあっさりとできました。それがこちら↓↓

javascript:d=document.createElement(‘div’);d.innerHTML=’%3Cpre%3E’+document.getElementById(‘photo-html-link’).innerHTML+’%3C/pre%3E’;%20location.href=’thumbedit://?text=’+escape(‘%3Ca%20href=%22’+document.getElementsByTagName(‘a’)%5B0%5D.href+’%22%20target=_blank%3E%3Cimg%20alt=%22%22%20src=%22’+document.getElementsByClassName(‘image-container’)%5B0%5D.style.background.replace(/(.+)http(.+)_m%5C.jpg(.+)/,’http$2.jpg’)+’%22%20width=%22500%22%20%20class=%22slooProImg%22/%3E%3C/a%3E%3Cbr%3E%3Ccite%3E%3Cimg%20src=%22http://farm4.static.flickr.com/3329/favicons/72157601614001242_7730.png%22%20width=16%3E’+%20d.innerText+%20’%3C/cite%3E’)+’&mode=insert’;

上記スクリプトをそのままコピるとうまくいかないため、ここをコピーして「http://」を消してお気に入り登録→名前は PhotoPinTake2 for ThumbEditとでもしてください。→あとは本家のPhotoPinTake2の使い方と同じです。是非使って見てください。

ちなみに吐き出すタグの内容は「するぷろ」アプリで画像をいれた時の書式を使っています。

このブックマークレットの拡張点

まぁ拡張といいますか、他のアプリでも使えるようにする方法などですが、非常に簡単です。というのもThumbEditはURLスキームにイコールを入れると上手く作動しないために複雑になっただけで、あとはそのまま書き換えれば大丈夫だと思われるのです。僕のブックマークレットの場合、エンコードを行っているためそういったトラブルも避けられるというだけなんですよね(。-_-。)

なので、スクリプトの「thumbedit://?text=」となっている所に各アプリのURLスキームを入れて頂き、一番最後の「&mode=insert」という文字を消していただければOKです。ThumbEditで使う場合もここを消すとカーソル位置に挿入されず、新規文書作成になりますのでお好みでどうぞ。

まとめ

案ずるより産むがやすしと言いますが、実際にやってみるとすんなりとできることもあるんだなと、改めて思いました。これからも勉強しながら自分なりに使いたいものを作っていきたいと思います。

Posted from するぷろ for iPhone.

この記事を書いた人

azucky824

1987年生まれ ゆとり第一世代。実家は千葉で代々漁師の家系。
大学で上京し、住宅営業マンを経て現在は理学療法士を目指して専門学校生。
好きなものを語る場としてこのブログを管理・運営してます。