JSON/Atom Custom Search API 展開例

展開例(「IW3 PROJECT」のサイト内検索を実行します)

サイト内検索

ソースコード

  • このスクリプトは、自サイトを検索対象としています。
  • 表示したい場所に「<div id="Qresult"></div>」「<div id="PageeT"></div>」を追加することで
    検索結果を表示できます。(変更可能)
  • 無料で利用できる検索は、一日あたり100件までです。
  • 5ドルを支払うことで、一日あたりの検索を1,000件、増やすことができます。
    利用料金の詳細は、 「https://code.google.com/intl/ja/apis/customsearch/v1/overview.html」で確認して下さい。
  • javascriptソースコードを変更することでHTMLの表示変更が可能です。
//※このスクリプトは、自サイトを検索対象としています。
var Search = {
    SvaL : '',
    SiteSearcH : '',
    //1ページに表示する検索結果数の指定。1~10まで指定可能。
    NuM : 10,
    StarT : 1,
    //Google APIs Consoleから取得した「Custom SearchのAPI key」
    KeY : 'Your API key',
    //Google custom searchで取得した「Search engine unique ID」
    CX : 'Search engine unique ID',
    HreF : '',
    CsHTML : '',
    CRHTML : '',
    PiHTML : '',
    PRHTML : '',
    //ここを変更すると他のサイトを検索可能デフォルトは自サイト
    SitesearcH : document.domain,
    QeryOn : function( SNUM ){
        Search.StarT = 1;
        if( !isNaN( SNUM ) ){
            Search.StarT = SNUM;
        };
        Search.SvaL = document.getElementById( 'searchVal' ).value;
        //フォーム名が違う場合は、変更要
        document.form1.action = Search.HreF + '?SvaL='
                            + encodeURIComponent( Search.SvaL )
                            + '&SsrT=' + Search.StarT;
        document.form1.method = "post";
        document.form1.submit();
    },
    QmaX : 0,
    SindeX : 0
};

window.onload = function(){
    //検索結果挿入先を指定
    Search.CsHTML = document.getElementById( 'Qresult' );
    //検索結果ページナビゲーション挿入先を指定
    Search.PiHTML = document.getElementById( 'PageeT' );
    Search.HreF = location.protocol + '//' + location.host + location.pathname;
    var AarraY = location.search.substr(1,location.search.length-1).split("&");
    for( var i = 0, MAX = AarraY.length; i < MAX; i++ ){
        if( AarraY[i] ){
            var BarraY = AarraY[i].split( '=' );
            if( BarraY[0] == 'SvaL' ){
                Search.SvaL = BarraY[1];
                document.getElementById( 'searchVal' ).value = decodeURIComponent( BarraY[1] );
            }else if( BarraY[0] == 'SsrT' ){
                Search.StarT = BarraY[1];
            }
        }
    };
    if( Search.SvaL ){
        var Urle = 'https://www.googleapis.com/customsearch/v1'
                + '?key=' + Search.KeY + '&cx=' + Search.CX + '&num='
                + Search.NuM + '&q=' + Search.SvaL + '&start='
                + Search.StarT + '&siteSearch=' + Search.SitesearcH
                //コールバック関数名を変更する場合は、「&callback=」の後に指定
                + '&alt=json' + '&callback=IcustumS';
        var target = document.createElement('SCRIPT');
        target.type = 'text/javascript';
        target.src = Urle;
        target.charset = 'UTF-8';
        document.body.appendChild( target );
    }else{
        document.getElementById( 'searchVal' ).value = '';
    }
};

//検索語句入力後の「Enter」キー入力時の対策関数
var QenterV = function(){
    if (event.keyCode == 13){
        Search.QeryOn();
    }
};

var IcustumS = function( data ){
    if( !data.error ){
        Search.QmaX = data.searchInformation.totalResults;
        Search.SindeX = data.queries.request[0].startIndex;
        var TmaX = 0;
        
        //検索結果ページナビゲーションの処理ここから
        if( Search.QmaX > 10 ){
            Search.PRHTML = '<div id="PageeS">';
            for( var i = 0; ( TmaX + 9 ) < Search.QmaX; i++ ){
                TmaX = ( i * 10 ) + 1;
                if( TmaX == Search.SindeX ){
                    //出力するHTMLを書き換えることでカスタマイズ可能
                    Search.PRHTML += '<span class="PsOn">' + ( i + 1 ) + '</span>';
                }else{
                    //出力するHTMLを書き換えることでカスタマイズ可能
                    Search.PRHTML += '<span class="PsOff" onclick="Search.QeryOn(\'' + TmaX + '\')">' + ( i + 1 ) + '</span>';
                }
            };
            Search.PRHTML += '</div>';
        };
        //検索結果ページナビゲーションの処理ここまで
        
        //検索結果の処理ここから
        if( data.items.length ){
            for( var i = 0, iMAX = data.items.length; i < iMAX; i++ ){
                //出力するHTMLを書き換えることでカスタマイズ可能
                Search.CRHTML += '<a href="' + data.items[i].link + '" class="qtitle">'
                            + data.items[i].title + '</a><br />'
                            + '<a href="' + data.items[i].link + '" class="qlink">'
                            + data.items[i].link + '</a><br />'
                            + '<span class="qsnippet">'
                            + data.items[i].snippet
                            + '</span>';
            }
        };
        //検索結果の処理ここまで
        
        //検索結果のHTML書き込み
        Search.CsHTML.innerHTML = Search.CRHTML;
        if( Search.PRHTML ){
            //検索結果ページナビゲーションのHTML書き込み
            Search.PiHTML.innerHTML = Search.PRHTML;
        }
    }else{
        //検索実行時のエラー処理
        if( data.error.code == 403 ){
            Search.CRHTML = '<p class="qtitle">' + data.error.message
    + '</p><span class="qsnippet">検索実行制限数を超えてしまいました。一日に検索可能な実行件数は、100件となっております。</span>';
            Search.CsHTML.innerHTML = Search.CRHTML;
        }else if( data.error.code == 400 ){
            Search.CRHTML = '<p class="qtitle">' + data.error.message
    + '</p><span class="qsnippet">検索を実行できません。構文エラーが発生しました。</span>';
            Search.CsHTML.innerHTML = Search.CRHTML;
        }else if( data.error.code == 404 ){
            Search.CRHTML = '<p class="qtitle">' + data.error.message
    + '</p><span class="qsnippet">検索を実行しましたが、該当するページが見つかりませんでした。</span>';
            Search.CsHTML.innerHTML = Search.CRHTML;
        }
    }
};