[αź]ブログに彩りを!Photopinから画像コードを取得するブックマークレットを作りました。

photo credit: Newcastle Algorave via photopin (license)

ども。完全文系で、プログラムとかド素人もいいとこな、あずき (@azucky824です。

そんな僕ですが、このブログを立ち上げた初期の頃から少しずつ勉強して、ブックマークレットを作ったりしていました。

とくに、モブログ(スマホでブログを書くこと)をする時にあると便利なものは何度か記事にしたこともあります。

以前こんな記事を書いたことがあるのですが、サイトの仕様が変わったり、僕自身も使うアプリが変わったりで使えなくなっていました。↓


今回はこれを使えるようにしたかったので、久しぶりに再挑戦してみることにしました!

Photopinって?

Photopinというのは、簡単に言うと、Flickerという写真サービスの中から一般の方がアップしている画像で、かつブログなどに使ってもいい、「クリエイティブコモンズ」という状態になっているもののみを検索してくれるサービスです。

つまり、世界中の方が撮った写真をお借りすることができる、というイメージでしょうか。

これが、ブログで書きたいことが出来たとき、それをイメージさせる写真が自分に無くてもさっと用意できるのですごく便利なんです。

ブックマークレット

そのPhotopinから画像タグをひっぱってくるブックマークレットはこちら↓

コード

javascript:d=document;e=d.getElementById('photo-html-link');image=d.getElementsByClassName('item-media')%5B0%5D.getElementsByTagName('img')%5B0%5D.src;icon=%22http://l.yimg.com/g/favicon.ico%22;link=%22%3Cimg%20width=450%20src=%22+image+%22%3E%5Cn%3Cbr%3E%3Ccite%3E%3Cimg%20src=%22+icon+%22%20width=16%3E%22+e.value+%22%3C/cite%3E%5Cn%22;prompt(%22%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%A6%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82%22,link);%20window.location.href=%22slpro-x://%22;

△使い方としてはPhotopinの検索窓からキーワード検索をして、出てきた写真一覧の使いたい画像をクリック→「preview」と「Get Photo」の選択肢から「Get Photo」を選択肢→ブックマークレットを起動。→タグをコピーしてOKをおすとSlproXへと飛びます。

他のアプリへ飛びたければ、コードの最後にあるURLスキームを変更してください。

ブックマークレット自体の登録の仕方と使い方はこちらを参照するとわかりやすいです。

大元のサイト

このブックマークレット、実は以下ブログで公開されている、textwellというアプリのアクションとして書かれたものを、safariなどの一般的なブラウザで使えるように改変したものです。

冒頭で紹介した、以前作ったブックマークレットもこのサイト発信のものを改変した経緯もあり、非常にお世話になっています。

いかがだったでしょうか?

モブロガーには便利なPhotopin。この機会に使ってみてくださいね!それでは。あずき (@azucky824でしたー。

この記事を書いた人

azucky824

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