Google画像検索APIで画像を検索しjQueryプラグインでPinterest風に並べる
お仕事で今更ながらGoogle画像検索APIを使ったのでメモ。
取得した画像を今流行（もう廃れてる？）のPinterest風にレイアウトしてみます
Googleの画像検索API
URL : http://ajax.googleapis.com/ajax/services/search/images
上記のURLに色々パラメータを付けてアクセスするとJSON形式で結果を返してくれます。
必須のパラメータとして「v」と「q」があります。
「v」の方はAPIのヴァージョンで "1.0"固定らしいのですが、
"2.0"とか"0.1"とか、0以上でコンマが付いてれば多分なんでも行けるっぽいのでよく分かりません（結果は変わりませんでした）
「q」の方は検索したい言葉です。
"q=こたつ+みかん" みたいにするとアンド検索も出来ます。
上記のようなパラメータを付けたURLにアクセスすることでJSONが取得できます。
"results": [
{
"GsearchResultClass": "GimageSearch",
"content": "ネコと<b>こたつ</b>と<b>みかん</b>",
"contentNoFormatting": "ネコとこたつとみかん",
"height": "768",
"imageId": "ANd9GcQyFT0RkIde6YsUQts1KJv6ZKTH1EHZQqlsVbxAGglsf_hEo1LLFrk6fs32",
"originalContextUrl": "http://uti28n.blog38.fc2.com/blog-entry-744.html",
"tbHeight": "113",
"tbUrl": "http://t1.gstatic.com/images?q=tbn:ANd9GcQyFT0RkIde6YsUQts1KJv6ZKTH1EHZQqlsVbxAGglsf_hEo1LLFrk6fs32",
"tbWidth": "150",
"title": "うちにゃん＠レオっち カレンダー壁紙",
"titleNoFormatting": "うちにゃん＠レオっち カレンダー壁紙",
"unescapedUrl": "http://blog-imgs-30-origin.fc2.com/u/t/i/uti28n/200712kare3.jpg",
"url": "http://blog-imgs-30-origin.fc2.com/u/t/i/uti28n/200712kare3.jpg",
"visibleUrl": "uti28n.blog38.fc2.com",
"width": "1024"
}
]"results"キーが実際のデータが含まれている配列です。
"url"に実際の画像のURL、"tbUrl"にサムネイル画像が含まれてます。
画像のURLが取得できたので、今度はpintereast風に並べます。
Pinteresr風に並べる
wookmarkというjQueryプラグインを使用します
Wookmark jQuery Plugin
jQueryを読み込ませた後、wookmarkを読み込ませます
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.min.js"></script>
タイル状にしたい要素を指定して、wookmarkを呼び出すだけです。
$('ul > li').wookmark();
呼び出し時にオプションを指定することでレイアウト幅など色々変更できるみたいです。
Githubに詳しい情報が載っています。
GBKS/Wookmark-jQuery · GitHub
プラグインのおかげで簡単におしゃれなUIを実装できますね！
