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

Flickr RoMarathon 2008 Photo by luvi

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

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

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

※CCライセンスについては、以下のリンク先に詳しい解説があり、王道な画像検索の仕方も記載されていますので参考になります。
著作権を侵害せずに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>