2010年11月24日水曜日

Google「画像を含むサイト」検索のススメ

Googleで検索する時、左側には様々なメニューが表示されます。期間指定などは使われている方も多いと思いますけど、「画像を含むサイト」の指定が結構便利なのでご紹介します。

例としてGoogleで「渋谷 ランチ」と検索してみます。



プレイス検索の部分は今回関係無いので少し下へスクロールします。



検索結果に表示されるサイトの説明はテキストのみなので、実際のサイトがどんな情報が載っているのか少々分かりにくいです。先日Googleで導入されたインスタントプレビューは個人的には気に入ってますけど少々邪魔と感じられている方も多いようです。

そこで「画像を含むサイト」検索を行います。画面左側のメニューを見て下さい。



「もっとツールを見る」をクリックすると次のようにメニューが展開されます。



メニューの中から「画像を含むサイト」をクリックして下さい。すると各検索結果のスニペットと一緒にページ内の画像のサムネイルが表示されるようになります。

では実際にクリックしてみます。



まずGoogle画像検索で検索を行った場合の一部の画像が表示されます。そして各検索結果にそのサイトで使われている画像が合わせて表示されます。(なお、この場合はプレイス検索は出てきません)。



ページに含まれる画像というのはそのページの概略とも言えるものですから、スニペットと合わせて画像を見ることで直感的にそのサイトが求めていた検索結果かどうか判断しやすくなります。

もう一つ例として「年賀状 イラスト」で検索してみます。



どのようなイラストが使われているのか事前に確認することができて結構便利です。

場合によっては画像検索やインスタントプレビューよりも便利ではないかと思える「画像を含むサイト」検索。是非使ってみて下さい。

2010年11月22日月曜日

Googleインスタントプレビューで使われているdata URLスキームを使った画像の表示

先日からGoogleインスタントプレビューに関連する記事を書いていましたが、今日は表示されている画像についてです。ブラウザでプレビュー画像が表示された後で画像のURLを取得してみます。



普通は表示されている画像ファイルのURLが取得できるのですが、プレビュー画像の場合は次のような値が取得できました。



非常に長い値が設定されています。先頭の部分だけ取り出すと次のような感じです。

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCg...

これはつまりimgタグに対してこんな感じで記述されているということです。

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..." />

あまり見かけない形式なのですがGoogleが特殊な方法を使っているわけではありません。これはdata URLスキームと呼ばれているものです。data URLスキームに関して日本語で翻訳されたRFCが下記にありますので参照してみて下さい。

http://www.akanko.net/marimo/data/rfc/rfc2397-jp.txt

先ほどの長々とした値は簡単に書くと画像ファイルをのバイナリデータをBase64でテキストデータに変換したものです。そして画像ファイルのURLを記述するかわりに変換されたテキストデータを記述しています。

この形式のメリットは2つあります。1つ目は画像を別ファイルとして設置し読み込んでいるのではなくテキストのデータとしてHTMLページ内に直接記述されているため、画像ファイルを別途リクエストする必要がないという点が1つ。そして一時的にしか利用しない画像に対して画像ファイルを作る必要がないという点がもう1つです。逆にデメリットとしてはバイナリからテキストにすることでサイズそのものは大きくなってしまうというところです。

Googleインスタントプレビューでこの形式を使っているのは、リクエスト回数を減らして高速に表示させるためと、無限ともいえるページ毎のプレビュー画像ファイルを作成するのが嫌だったからかと思います。

では実際に試してみます。画像ファイルを変換するには色々なサイトやソフトがあるようなので検索してみて下さい。今回は下記のサイトを使いました。

http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

画像ファイルを変換したテキストデータをdata URLスキームの形式でimgタグのsrc属性に記述してみます。

data URLスキームサンプル

このようにBloggerでも無事画像として表示されました。

多くのブラウザで対応している形式なので、なにか同じようなメリットがある場合にはdata URLスキームを使ってみてはいかがでしょうか。