LoginSignup
0
1

More than 5 years have passed since last update.

@qwe001

Googleカスタム検索で表示件数の可変機能を実装する

Last updated at Posted at 2016-11-10

前回のこれの続き。理解すればなんてことはない。
http://qiita.com/qwe001/items/c3cc66e9a364b4d36d1c

何がしたいか

Google Custom Search / Google Site Search では、検索結果の表示件数を変更することができる
（https://cse.google.co.jp で、検索エンジンの編集 > 検索機能 > 詳細設定 > ウェブ検索の制限 > Result Size で 1 とか 20 とか設定すればOK）
この表示件数を、フロント側でなんか5とか10とか20みたいなボタンを押すと、表示件数もそれに合わせて1ページにつき5件、10件、20件表示するようにしたい。
v1であれば?num=20みたいな感じで実装できたようだが、v2ではそれではできない。でも全然v2での実装情報がない。ので、書く次第。

注意

無料のGoogle Custom Search APIで変更できる表示件数は最大20件まで。20件以上は反映されない。
（4件とかになる。多分後述のsmallが適用されてる。）
まあ、これを見てるような人は法人でどうせ有料のGoogle Site Searchを導入するだろうから気にすることではないと思うけど。
頼まれない限り表示件数の可変とか実装しようとは思わないだろうし。

20161227追記

有償版にしましたが20件以上は変更できません。うせやろ工藤。

表示件数のパラメータ

  • 「webSearchResultSetSize」
  • 設定できる値は4種類
  • ①integer型で1～20の数字。webSearchResultSetSize="20"みたいな。
  • ②string型でsmall。1ページにつき4件表示になる。おそらくwebSearchResultSetSize="aa"みたいに値が不正な時はこれになると思われる。
  • ③string型でlarge。1ページにつき8件表示になる。
  • ④string型でfiltered_cse。CSE管理画面のResult Sizeで設定した値が反映される。パラメータの記述がない時など、デフォルトはこれだと思われる。
  • ソースはこちら https://developers.google.com/custom-search/docs/element

基本

これを

<gcse:searchbox-only filtered_cse=1></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>

こうじゃ

<gcse:searchbox-only filtered_cse=1></gcse:searchbox-only>
<gcse:searchresults-only webSearchResultSetSize="20"></gcse:searchresults-only>

?webSearchResultSetSize=5みたいな感じでは動作しないみたい。
でも整数が使えるなら

<?php $num = $_GET['num']; ?>
<gcse:searchbox-only filtered_cse=1></gcse:searchbox-only>
<gcse:searchresults-only webSearchResultSetSize="<?php echo $num; ?>"></gcse:searchresults-only>

こんな風にすればいけるな、とPHP使ってるなら思いつくはず。

実装

<?php
$q = $_GET['q']; // 検索キーワードのパラメータ。デフォルトは?q=
$num = $_GET['num']; // これを表示件数のパラメータとする。?num=10とか?num=5とか
if(empty($num)){ $num = 10; } // ?num= の値がセットされてない場合のデフォルトの表示件数 10件
?>
<div>
    <script>
        (function() {
            var cx = 'hogehoge';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
        })();
    </script>
    <gcse:searchbox-only filtered_cse=1></gcse:searchbox-only>
</div>

<div>
    <a href="?q=<?php echo $q; ?>&num=5" id="page_s" class="page_size<?php if($num == 5){ echo ' active'; } ?>">5</a>
    <a href="?q=<?php echo $q; ?>&num=10" id="page_m" class="page_size<?php if($num == 10){ echo ' active'; } ?>">10</a>
    <a href="?q=<?php echo $q; ?>&num=20" id="page_l" class="page_size<?php if($num == 20){ echo ' active'; } ?>">20</a>
</div>

<div>
    <gcse:searchresults-only webSearchResultSetSize="<?php echo $num; ?>"></gcse:searchresults-only>
</div>

なお、前回実装した画像サムネイル可変機能も合わせると次のような感じ

<?php
$q = $_GET['q']; // 検索キーワードのパラメータ。デフォルトは?q=
$num = $_GET['num']; // これを表示件数のパラメータとする。?num=10とか?num=5とか
if(empty($num)){ $num = 10; } // ?num= の値がセットされてない場合のデフォルトの表示件数 10件
?>

<style type="text/css">
.gsc-thumbnail .gs-web-image-box {
    width: auto;
}

.gsc-thumbnail .gs-web-image-box img.gs-image {
    max-width: initial;
    max-height: initial;
    width: 62px;
}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
    $('#img_s').click(function(){
    $('img.gs-image').width(62);
    $('.img_size').removeClass('active');
    $(this).addClass('active');
    });
    $('#img_m').click(function(){
    $('img.gs-image').width(93);
    $('.img_size').removeClass('active');
    $(this).addClass('active');
    });
    $('#img_l').click(function(){
    $('img.gs-image').width(124);
    $('.img_size').removeClass('active');
    $(this).addClass('active');
    });
});
</script>

<div>
    <script>
        (function() {
            var cx = 'hogehoge';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
        })();
    </script>
    <gcse:searchbox-only filtered_cse=1></gcse:searchbox-only>
</div>

<div>
    <a href="?q=<?php echo $q; ?>&num=5" id="page_s" class="page_size<?php if($num == 5){ echo ' active'; } ?>">5</a>
    <a href="?q=<?php echo $q; ?>&num=10" id="page_m" class="page_size<?php if($num == 10){ echo ' active'; } ?>">10</a>
    <a href="?q=<?php echo $q; ?>&num=20" id="page_l" class="page_size<?php if($num == 20){ echo ' active'; } ?>">20</a>
    <a href="#" id="img_s" class="img_size active">小</a>
    <a href="#" id="img_m" class="img_size">中</a>
    <a href="#" id="img_l" class="img_size">大</a>
</div>

<div>
    <gcse:searchresults-only webSearchResultSetSize="<?php echo $num; ?>"></gcse:searchresults-only>
</div>

追記

このタグの書き方

<gcse:searchbox filtered_cse=1></gcse:searchbox>
<gcse:searchresults webSearchResultSetSize="<?php echo $num; ?>"></gcse:searchresults>

どうやらAJAX通信になるようで、検索した値がGETに飛んでこないので、
検索キーワードを維持したまま表示件数を変更することができないみたい。（常に?q=&num=10みたいな形になる。）
なので、GETに飛ばすためには次のようにする（本文中の記述も全て下記のものに修正しました）

<gcse:searchbox-only filtered_cse=1></gcse:searchbox-only>
<gcse:searchresults-only webSearchResultSetSize="<?php echo $num; ?>"></gcse:searchresults-only>

さらに追記

上記までの書き方で、表示件数の可変機能は実装できたが問題が。
表示件数の変更ボタンを押した時は問題ないけど、
普通に検索ボタンを押すと表示件数のパラメータが引き継がれない。
(?q=aa&num=20とかなってほしいのに、?q=aaとなる）
なので、表示件数を変更しても検索ボタンを押すとデフォルトの10件表示に戻ってしまう。
そこで、検索ボタンを押した場合にも表示件数を引き継ぐようにする。
でもこのやり方はなんだか正解じゃない気がするので本文の内容は変更していません。

以下のように修正
<gcse:searchbox-only filtered_cse=1></gcse:searchbox-only>
<gcse:searchresults-only webSearchResultSetSize="<?php echo $num; ?>"></gcse:searchresults-only>
↓
<gcse:searchbox-only filtered_cse=1 resultsUrl="?num=<?php echo $num; ?>"></gcse:searchbox-only>
<gcse:searchresults-only webSearchResultSetSize="<?php echo $num; ?>"></gcse:searchresults-only>

<a href="?q=<?php echo $q; ?>&num=5" id="page_s" class="page_size<?php if($num == 5){ echo ' active'; } ?>">5</a>
<a href="?q=<?php echo $q; ?>&num=10" id="page_m" class="page_size<?php if($num == 10){ echo ' active'; } ?>">10</a>
<a href="?q=<?php echo $q; ?>&num=20" id="page_l" class="page_size<?php if($num == 20){ echo ' active'; } ?>">20</a>
↓
<a href="?num=5&q=<?php echo $q; ?>" id="page_s" class="page_size<?php if($num == 5){ echo ' active'; } ?>">5</a>
<a href="?num=10&q=<?php echo $q; ?>" id="page_m" class="page_size<?php if($num == 10){ echo ' active'; } ?>">10</a>
<a href="?num=20&q=<?php echo $q; ?>" id="page_l" class="page_size<?php if($num == 20){ echo ' active'; } ?>">20</a>

こうすると、クエリパラメータは「/?num=5&q=aa」となる。
resultsUrl="?q=<?php echo $q; ?>&num=<?php echo $num; ?>"とすればいいのでは？と思ったが、こうすると
クエリパラメータは「/?q=aa&num=5&q=aa」となるみたい。なので、どうしてもnumを最初にするしかなかった。
まあクエリパラメータの順番にまで口を出す人はいないでしょう。多分。
もっといい方法あったら教えてください。ひとまずはこれで。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1