社内の専用WEBページを作っている場合などで
業務中にそのページが標準で開かれている時に検索の必要があったら、
別タブや別ページを開いてGoogleを開くと思います。
でもそのちょっとした作業でも忙しい時には面倒です。
作業用の社内専用ページにGoogle検索窓を付ければ便利です。
前の「グーグル検索窓を自サイトに表示させる」を
さらにこの検索窓から画像も検索できるように、
さらに欲張って翻訳機能も盛り込んでしまいます。
これをjavascriptで作ってみましょう。
まずはjavascript部分を記述
<script type="text/javascript">
var showpage;
showpage="serch_vewtes1.htm"; //ここに結果を表示するページを指定
↑この部分で指定するページ名は下の検索結果を表示するページを作って
保存した時のファイル名です。
function GoogleSearch() {
tmpTxt=document.form1.QueryBox.value;
window.open(showpage+"?"+tmpTxt);
}
</script>
次にクエリー送信部分を作ります。
これはページの任意の場所に記載します。
<form name="form1" id="form1">
<input type="text" name="QueryBox" id="QueryBox" size="42" />
↓ここ注目。前に作った検索だけのページと違い、何を検索したいかの条件を渡します
<input type="radio" name="QueryType" id="QueryType" value="q" checked />検索
<input type="radio" name="QueryType" id="QueryType" value="p" />画像
<input type="radio" name="QueryType" id="QueryType" value="t" />翻訳
<input type="button" value="Google検索" onClick="GoogleSearch()">
</form>
今回は標準ページからGoogleへ飛んでしまうと不便なので、
検索結果を別窓（別タブ）で開きます。
次に検索結果の表示ページを作ります。
----ここから----------------
<html>
<head>
<!-- saved from url=(0013)about:internet -->
↑この行をつけておかないとローカルのサイト上でjavascriptは動作しません
（セキュリティチェックでブロックされるため、いちいちスクリプトの許可をするのが面倒です）
<script type="text/javascript">
function settext() {
var QueryText ;
var QueryType ;
for (var i = 0; i < self.opener.document.form1.QueryType.length; i++)
if(self.opener.document.form1.QueryType[i].checked == true)
QueryType = self.opener.document.form1.QueryType[i].value;
QueryText = location.search.substr(1,9999);
↓ここも注目。検索元のページで何を検索したいのかを選んでいるので、
それに合わせて検索テキストの内容を変更します
switch (QueryType) {
case "q":
QueryText0="http://www.google.co.jp/search?hl=ja&q=" ;
break;
case "p":
QueryText0="http://www.google.co.jp/search?num=10&hl=ja&site=imghp&tbm=isch&source=hp&biw=1206&bih=888&q=" ;
break;
case "t":
QueryText0="http://translate.google.co.jp/?num=10&hl=ja&biw=1206&bih=888&q=" ;
break;
default:
QueryText0="http://www.google.co.jp/search?hl=ja&q=" ;
}
//この行はクエリ文字列をUTF-8エンコードする。
//この行は本来入れるべきなはずだか入れるとなぜかクロームでは動作しない。
//QueryText1=encodeURIComponent(QueryText);
QueryText1=QueryText;
QueryText2="&lr=lang_ja";
GetSerch=QueryText0+QueryText1+QueryText2;
location.href=GetSerch;
}
</script>
</head>
<body onload="settext();">
</body>
</html>
----ここまで----------------
以上の記述をしたページを任意のファイル名で拡張子は.html（またはhtm）として保存します。
これを動作させると、見本のようになります。
【以下見本】
