スタートページ＞ Javascript Google Search

Google search formの実例

Googleの検索窓をＷｅｂページにＨＴＭＬのＦＯＲＭだけで実現します。
原則的には検索エンジンＩＤの取得が必要ですが、実際にはその手続きなどはは不要で、自由に利用できます。

ここでは、
　　・Ｗｅｂ全体を対象
　　・指定したＷｅｂサイトだけを対象
　　・その組合せ
の２つを掲げます。

結果は別ページに表示されます。Googleの標準形式で表示されカスタマイズはできません。

Ｗｅｂ全体検索

通常のGoogle検索のようにＷｅｂ全体を検索対象にする検索窓をＷｅｂページに表示します。

ＦＯＲＭのコード

以下のようにＦＯＲＭを作成します。内容は、Googleの検索サイトに、いくつかのパラメタを渡して実行させているだけです。これらのパラメタの意味については説明されていません。

<form action="http://www.google.co.jp/search" method="get">
    <input type="hidden" name="hl" value="ja">
    <input type="textbox" name="q" maxLength="255" size="30">
    <input type="submit" name="btnG" value="Google 検索">
</form>

実装例

サイト内検索

指定したＷｅｂサイト内検索をＨＴＭＬのＦＯＲＭだけで実現します。
単純にいえば、通常の検索で
　　　検索キーワード site:検索対象ＵＲＬ
の site以下を省略した機能をもつ検索窓を、任意のＷｅｂページに取り込めます。

ＦＯＲＭのコード

「Ｗｅｂ全体検索」に青字の部分を追加して、対象Ｗｅｂサイトを限定します。
修正できるのは、赤字の「検索対象ＵＲＬ」と「検索ボタン表示」だけです。

<form action="http://www.google.com/search" method=get>
    <input type="hidden" name="hl" value="ja">
    <input type="hidden"
        name="sitesearch"
        value="www.kogures.com/hitoshi/javascript/">  <!-- 検索対象ＵＲＬ -->
    <input type="textbox" name="q" size="30" maxLength="255">
    <input type="submit" name="btnG"
        value="「Javascript」内検索">                 <!-- 検索ボタン表示 -->
</form>

実装例

「正規表現」や「canvas」など適当な語句を入力して実験してください。

両方の組合せ

同じ検索キーワードでＷｅｂ全体と対象サイト内の両方を検索したい場合があります。
ここでは、ラジオボタンで切り替えるようにしました。

ＦＯＲＭのコード

Ｗｅｂ全体検索に青字の部分を追加修正しました。
「javascript」検索のラジオボタンで"sitesearch"の対象サイトＵＲＬを与え、Ｗｅｂ全体検索では、"sitesearch"を「""」にすることにより、サイト検索ではない、すなわちＷｅｂ全体を対象にしています。

<form action="http://www.google.co.jp/search" method="get">
    <input type="hidden" name="hl" value="ja">
    <label><input type="radio" name="sitesearch"
        value="">Ｗｅｂ全体検索</label>
    <label><input type="radio" name="sitesearch"
        value="www.kogures.com/hitoshi/javascript">「javascript」検索
    </label><br>
    <input type="textbox" name="q" size="30" maxLength="255">
    <input type="submit" name="btnG" value="Google 検索">

実装例