読者です 読者をやめる 読者になる 読者になる

tarのブログるっ by @tarVolcano

メガネ男子のtarが書くブログです。

ブログ記事のアイキャッチ画像を探すブックマークレットを作ってみた

Flickr RoMarathon 2008
Flickr RoMarathon 2008 Photo by luvi

私はよくFlickrでブログ記事のアイキャッチ画像を探してきます。
アイキャッチ画像があると、記事がシェアされたときにサムネイル画像として使われるので、インパクトのある画像や、センスの良い写真を使いたいですよね。

Flickrにはセンスの良い、クリエイティブ・コモンズライセンス(以下CCライセンス)の画像が探せるのですが、WEBサイトに行ったり、アプリをインストールしたりするのが面倒くさい、と思ってるあなたっ!私も面倒な事は苦手ですw

今回はもっと楽な方法でCCライセンス画像を探せる方法を用意しました。

※CCライセンスについては、以下のリンク先に詳しい解説があり、王道な画像検索の仕方も記載されていますので参考になります。
著作権を侵害せずにflickrの写真を使用する方法 | nanapi [ナナピ]はてなブックマーク - 著作権を侵害せずにflickrの写真を使用する方法 | nanapi [ナナピ]

まずは試してみよう

では、以下のリンクをクリックし、探したいアイキャッチ画像のイメージキーワードを入れてみてください。

CCライセンス写真検索

これだけで、FlickrでキーワードにマッチしたCCライセンスの写真一覧が表示されます。
うん、シンプルで楽ですね^^

JavaScriptソースコードはこんな感じ

先ほどのリンクのソースは、こんな感じになっています。

(function(){
  var searchKey = window.prompt("入力キーワードでFlickrからCCライセンスの写真を検索します", "");
  if (!(searchKey == "" || searchKey == null)) {
    window.open("https://www.flickr.com/search/?q=" + encodeURI(searchKey) + "&l=cc&ct=0&mt=photos&adv=1", "_blank");
  };
})();

ざっくり解説すると、

  • プロンプト内でキーワードを入力させる
  • 入力キーワードで、「CCライセンスの写真のみ」検索するURLを生成してFlickrサイトへ飛ぶ

ようにしています。

そしてこのソースを Closure Compiler Service で圧縮し、Aタグでリンクにしました。

<a href='javascript:(function(){var a=window.prompt("\u5165\u529b\u30ad\u30fc\u30ef\u30fc\u30c9\u3067Flickr\u304b\u3089CC\u30e9\u30a4\u30bb\u30f3\u30b9\u306e\u5199\u771f\u3092\u691c\u7d22\u3057\u307e\u3059","");""!=a&&null!=a&&window.open("https://www.flickr.com/search/?q="+encodeURI(a)+"&l=cc&ct=0&mt=photos&adv=1","_blank")})();'>CCライセンス写真検索</a>

ブックマークレットとして使う

パソコンのブラウザをお使いなら

先ほどのリンクをブックマークバーにドラッグアンドドロップするだけでOKです。
(Chrome、Safari、FireFoxで動作確認してあります)

iPhone/iPadのSafariをお使いなら

iPhone/iPad用 CCライセンス写真検索 ブックマークレット

上のリンクをクリックした後、一旦このページをブックマークに保存します。

そして、保存したブックマークを編集します。URL欄の左側まで移動しhttp://〜#となっている箇所を削除して保存し直します。
以下のスクショを参考にしてください。

iPhoneブックマークレット

これで、ブラウザのブックマークから簡単に検索できるようになりましたね。

※ブックマークレットについては、以下のリンク先が参考になります。
iPhone版Chromeの使い方: ブックマークレットを登録する・呼び出す方法 - たのしいiPhone! AppBankiPhone版Chromeの使い方: ブックマークレットを登録する・呼び出す方法 - たのしいiPhone! AppBankはてなブックマーク - iPhone版Chromeの使い方: ブックマークレットを登録する・呼び出す方法 - たのしいiPhone! AppBank

検索した画像をブログに貼るには

今回用意したブックマークレットは、Flickrサイトを開くまでのもので、ブログに貼付けるためには著作者のクレジットを表示したりする必要があります。
私は気に入った画像を見つけたら、「Flickr2HTML」を使わせていただいています。これ、すごく便利ですっ。

Flickrをブログに貼りつけるタグを取得するブックマークレット、Flickr2HTMLが完全リニューアル!! | FeelingplaceFlickrをブログに貼りつけるタグを取得するブックマークレット、Flickr2HTMLが完全リニューアル!! | Feelingplaceはてなブックマーク - Flickrをブログに貼りつけるタグを取得するブックマークレット、Flickr2HTMLが完全リニューアル!! | Feelingplace

Flickr2HTMLを使ってみたいかたは、上のリンクから試してみてくださいね。

まとめ

FlickrのCCライセンス画像を手軽にブログへ貼付けるには、

  1. CCライセンス写真検索 ブックマークレットで、検索
  2. Flickr2HTML で、HTML生成

この2アクションでOKっ

あとがき

私はブログを書く時は、SafariかChromeでwri.peを開いてマークダウン書式で書く事が多いので、今回ご紹介したブックマークレットを使う方法がとても便利です。
最近は高機能な拡張機能を入れるよりも、シンプルなブックマークレットを使ったほうが、サクサクと作業捗るな〜と感じてます。

wri.pe - simple and smart notepadwri.pe - simple and smart notepadはてなブックマーク - wri.pe - simple and smart notepad

  • このエントリーをはてなブックマークに追加