インターネット検索でキーワードを途中まで入力すると自動的に候補が表示されるアレの話です。本日は「bingサジェストを使う(Googleサジェストが使えないから)」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「bingサジェストを使う(Googleサジェストが使えないから)」についてです。
ここでいうサジェストとは、
「入力予測補完」
のことです。
インターネット検索においてキーワードの入力途中で何らかの方法により自動的に予測候補が表示される、という機能は皆さんも使ったことがおありかと思います。
これを自分サイトのサイト内検索に組み込もう、というのが今回のお話です。
以下より説明しますが、formのname値やデザイン部分などは皆さんの環境に置き換えていただければと思います。
参考:
Bing の検索 API を使ってみる | Lonely Mobiler
http://loumo.jp/wp/archive/20141230000008/
Bootstrap styling for jQuery UI autocomplete · GitHub
※sass
※cssにオンラインで変換するならここ
https://gist.github.com/daz/2168334
jQuery UI - オートコンプリート - jQuery 入門
http://jquery.keicode.com/ui/autocomplete.php
動作環境
PHP/jQuery/jQuery-UI/Bootstrap/WordPressという環境を想定。
※皆さんの環境に置き換えてください。
Bing Developer Centerで登録
「5,000トランザクション/月」
を選択
PHP
/common/program/suggest.phpとして保存
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php mb_language("Japanese"); $text = $_GET["query"]; $url = 'http://api.bing.net/osjson.aspx?FORM=OPERAS&Market=ja&Query='.urlencode($text); $json = file_get_contents($url); $json = mb_convert_encoding($json, 'UTF-8', 'auto'); $array = json_decode($json, true); $result = $array[1]; array_unshift($result, $array[0]); echo json_encode($result); ?> |
html
表示対象のhtml・htmlテンプレートに追記
1 2 3 4 |
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="/common/bootstrap/dist/js/bootstrap.min.js"></script> <script src="/common/js/suggest.js"></script> |
javascript
/common/js/suggest.jsとして保存
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
//■検索フォームをbingサジェスト表示 $("input[name=s]").autocomplete({ source: function(req, resp){ $.ajax({ url: location.protocol + "//" + location.hostname + "/common/program/suggest.php?query=" + $("#searchform input[name=s]").val(), type: "GET", cache: false, dataType: "json", data: { param1: req.term }, success: function(o){ resp(o); }, error: function(xhr, ts, err){ resp(['']); } }); }, open: function(){ $(this).autocomplete('widget').css('z-index', 100); return false; }, select: function(event, ui) { //window.location = location.protocol + "//" + location.hostname + "/?s=" + ui.item.value; //return false; } }); $.ui.autocomplete.prototype._renderItem = function(t, n) { //リンクを付ける /* return $("<li></li>") .data("item.autocomplete", n) .append($("<a href='" + location.protocol + "//" + location.hostname + "/?s=" + n.label + "'></a>").html(n.label)) .appendTo(t); */ //リンクを付けない return $("<li></li>") .data("item.autocomplete", n) .append(n.label) .appendTo(t); }; |
css
表示対象のhtml・htmlテンプレートで読み込んでいるCSSに追記
sassの場合は以下
https://gist.github.com/daz/2168334
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
.ui-autocomplete { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; display: none; min-width: 160px; _width: 160px; padding: 4px 0; margin: 2px 0 0 0; list-style: none; background-color: #ffffff; border-color: #ccc; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } .ui-autocomplete .ui-menu-item > a.ui-corner-all { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #555555; white-space: nowrap; } .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-hover, .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-active { color: #ffffff; text-decoration: none; background-color: #0088cc; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background-image: none; } .ui-menu-item { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #555555; white-space: nowrap; } .ui-menu-item.ui-state-focus { color: #ffffff; text-decoration: none; background-color: #0088cc; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background-image: none; } .ui-menu-item.ui-state-focus:hover { cursor: pointer; } |
最後になりますが、
本プログラムは猫ITソリューションズブログ内検索にて稼動しています。
※このページの上の方
余談
今回はサジェストサービス提供元としてMicrosoft(bing Search API)を利用しましたが、事実上の標準としてはGoogle(Autocomplete API)かと思います。
ですが、現在Googleによる検索サジェストはホームページなどへ組み込んで使うことは出来ません。
Google ウェブマスター向け公式ブログ: Autocomplete API の今後のご利用について
http://googlewebmastercentral-ja.blogspot.jp/2015/07/update-on-autocomplete-api.html
どうやら「Google検索キーワードとして」の利用ではない自動入力は意図してないからのようです。確かにGoogle検索キーワードと猫ITブログ内キーワードは完全に一致してませんからね。ただ一致はしていませんがこういう使われ方も有用な用途であることは認めているようです。その考えは誰しも同意かと思いますが、しかしサービス提供を止めたのはGoogle、使わせているのはMicrosoft、という現実がある訳です。無料だと使用回数は5000回までという制限はありますが、Microsoftには感謝しないといけませんね。
更に余談ですが、
インターネット関連にかかわらず「入力予測補完」という意味合いでの単語は、
といくつかありますが、代表齊藤はインクリメンタルサーチ派です。一番使われてない単語のようですが。
皆さんは一般的によく使われていて、かつ意味合い的にも適切な単語を使うようにしましょうね。