エントリー名 :

JavaScriptとiframeで、Googleイメージ検索の画像をランダムに表示する方法

JavaScriptとiframeで、Googleイメージ検索の画像をランダムに表示する方法

りょーちの駄文と書評:Google Random Image を試してみた の記事を読んで、僕もGoogle Random Imageを試してみました。 JavaScript+iframeで、Googleイメージ検索の検索結果を切り替えて、表示する方法です。 Firefoxでも動く(はずの)サンプルを、「JavaScriptでGoogleイメージ検索の画像をランダムに表示する方法」に設置しました。10秒おきに画像が切り替わります。

オリジナルのGoogle Random Image

google hack from douwe osinga にオリジナルのソースと説明があります。 実際に設置してみたJavaScriptのコードサンプル例(IEでないと動かないと思います)

walkHtml()でページの文章を取得し、 boxfill()で単語ごとに切り分けてloadword()を一定時間ごとに呼び出しているようです。 loadword()で、Googleから画像を呼び出して表示しています。 id「searchLabel」のspanに検索キーワード、id「imagebox」のインラインフレーム(iframe)に画像を出しています。

JavaScriptで、


imagebox.document.body.innerHTML='<iframe width=1000 height=1000 
src="http://images.google.com/images?&q='+escape(searchfor)+'"></iframe>';
imagebox.scrollTo(50,200);

と、Googleの検索結果を取得しつつ、画面をスクロールして、表示部分のインラインフレーム(iframe)を、


<iframe id="imagebox" width="150" height="130"  vspace="0" hspace="0" frameborder="0" scrolling="no">></iframe>

とする事で、一部分を切り出す仕組みです。

残念ながら、Firefoxでは、動きませんでした。replaceNode~や、imagebox~のあたりが、どうも良くないみたいです。

Firefoxでも(多分動く)、Googleイメージの画像ランダム表示

元々のGoogle Random Imageは、2(javascriptをHTMLに直に書けば1)つのファイルで動くのですが、 僕が書いたのだと、3(or 2)つのファイルで動きます。りょーちさんのソースを参考に、ランダムに単語を指定して表示する仕組みです。

表示用のページ(index.html)Googleイメージ検索を呼び出すページ(gri.html)gri.htmlから呼び出すJavaScript(gri.js) の三つです。

JavaScript(gri.js)をgri.htmlで呼び出し、Googleの検索結果画面を取得しています。


document.getElementById("imagebox").src=baseurl+encodeURI(searchfor);
document.getElementById("searchlabel").innerHTML=searchfor;
window.scrollTo(20,190);

の部分が、オリジナルと対応している所です。

表示用(index.html)と、呼び出し(gri.html)にある インラインフレーム(iframe)それぞれのサイズで表示を調節しています。

直接index.htmlからGoogleの画面を呼び出したものを、スクロールする事がうまく出来なかったので、 仕方なく、iframeで呼び出したgri.htmlをgri.jsでスクロールしています。 (画面の表示位置を変えるためだけに、1ファイル余計に使っている!しかも、ブラウザによっては、うまくスクロールしてくれない!)

(誰か改良してくれないかな。scrollTo()を、どうやったらうまくインラインフレームに適用できるのか、よくわからない)。

iframe(インラインフレーム)とJavaScript

iframe(インラインフレーム)内の情報を引っ張ってこれないかなと思って検索しました。メモ。

なんだか、難しそうだ…。 「document.getElementById('フレームのID').contentDocument」というのは、初めて知りました。 こんなのがあるなんて!


JavaScriptとiframeで、Googleイメージ検索の画像をランダムに表示する方法の前後の記事

カテゴリー [ javascript ] [ メモ・覚え書き ]



アマゾン(Amazon.co.jp) JavaScript

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

1. 本 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

[2010-02-12)]作者:西畑 一馬 。レーベル:アスキー・メディアワークス 。製造:アスキー・メディアワークス 。出版:アスキー・メディアワークス 。発売:アスキー・メディアワークス。関連:jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

パーフェクトJavaScript (PERFECT SERIES 4)

2. 本 パーフェクトJavaScript (PERFECT SERIES 4)

[2011-09-23)]作者:井上 誠一郎 。レーベル:技術評論社 。製造:技術評論社 。出版:技術評論社 。発売:技術評論社。関連:JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

3. 本 ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

[2012-06-09)]作者:Alex MacCaw 。レーベル:オライリージャパン 。製造:オライリージャパン 。出版:オライリージャパン 。発売:オライリージャパン。関連:ハイパフォーマンスHTTPサーバ Nginx入門

IMAGE STYLER1.0J  (Mac版)

4. ソフトウェア IMAGE STYLER1.0J (Mac版)

[1999-01-14]ブランド:アドビシステムズ 。レーベル:アドビシステムズ 。製造:アドビシステムズ 。出版:アドビシステムズ 。発売:アドビシステムズ。プラットフォーム:PowerMac。

VRCreator Personal Edition Ver.2.0J 発売記念価格版

5. ソフトウェア VRCreator Personal Edition Ver.2.0J 発売記念価格版

[1998-02-25]ブランド:エクス・ツールス 。レーベル:エクス・ツールス 。製造:エクス・ツールス 。出版:エクス・ツールス 。発売:エクス・ツールス。プラットフォーム:Windows。

IMAGE STYLER1.0J  (Win版)

6. ソフトウェア IMAGE STYLER1.0J (Win版)

[1999-01-14]ブランド:アドビシステムズ 。レーベル:アドビシステムズ 。製造:アドビシステムズ 。出版:アドビシステムズ 。発売:アドビシステムズ。プラットフォーム:Windows 98。

After Effects Expressions

7. 本 After Effects Expressions

[2008-11-18)]作者:Marcus Geduld 。レーベル:Focal Press 。製造:Focal Press 。出版:Focal Press 。発売:Focal Press。関連:After Effects Illusionist

2

「JavaScriptとiframeで、Googleイメージ検索の画像をランダムに表示する方法」へのコメント

こんにちは。りょーちと申します。 記事の方、拝見いたしました。 Firefoxでも動きますねー。素晴らしいです。 文字コードの変換部分がないので、ソースがかなりすっきりしていて素晴らしいです! この方法、是非是非、採択させていただければと思います。 今後ともよろしくお願いいたします。

返事が遅くなって申し訳ありません。こちらこそ、よろしくお願いいたします!


コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)



このエントリーのトラックバックURL:

アーカイブ

トラックバック

広告

あわせて読みたい

あわせて読みたい