今回はCustom Search APIについて紹介します。
■Custom Search APIとは
その名の通り、カスタム検索から結果を取得・表示できるAPIです。
このAPIはWebサイトやアプリケーションに組み込むことができます。
検索結果はJSONまたはAtom形式で取得できます。
■無料版と有料版の違い
このAPIには無料版と有料版があります。
無料版では1日100回検索でき、100回以上は1000回当たり5ドル費用がかかります。
有料版ではGoogleと同じ検索技術を使うことができます。
価格形態は、個人サイト用から大規模ビジネス用まで用意されています。
■Custom Search APIを使用するには
Google Developers Consoleで「Custom Search API」を有効にし、API KEYを作成する必要があります。
※Google Developers ConsoleでAPIを有効にする方法とAPI KEYを作成する方法は参考サイトにあるGoogle API 第6回を参照してください。
■Custom Search APIの使い方
まずカスタム検索を行うためにコントロールパネルに移動します。
※コントロールパネルのURLは参考サイトにあります。
Addボタンを押してカスタム検索を行うための設定をします。
検索サイトには「個々のページ、サイト全体、サイトの一部、ドメイン全体」を指定ができ、複数指定することもできます。ここでは「http://vintage.ne.jp/」を指定しています。
言語は38種ありその中から選べます。
検索エンジンの名前は検索画面で表示されるタイトルです。
作成ボタンを押したら設定完了です。
設定完了画面からサイトに組み込むためのコードまたは公開するためのURLを取得することができます。
サイトに組み込むためのコードは下記のような形で取得できます。
コードをサイトの <body> セクションの <div> 要素に貼り付つけることで
検索ボックスが表示されて検索が行えるようになります。
<script>
(function() {
var cx = '009087796402428380116:xxxxxxxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
公開するためのURLは下記のような形で取得できます。
https://cse.google.com/cse/publicurl?cx=009087796402428380116:xxxxxxxxxx
カスタム検索で「Google API」を検索すると、検索結果がポップアップで表示されます。
■JSONで検索結果を取得
JSONで検索結果を取得する場合、下記のようなURLをスクリプトに指定します。
<script src=https://www.googleapis.com/customsearch/v1?key={API_KEY}&cx={ID}&q={PARAM}&callback={HNDLR}">
keyにはGoogle Developers Consoleで作成したAPI KEYを割り当てます。
cxにはCustom search engine IDを指定します。
qには検索文字列を指定します。
callbackにはコールバック関数名を指定します。
コールバック関数名を指定することでJSONで取得したデータを処理することができます。
検索結果は下記のような形で取得されます。
{
・・・
"items": [
{
"kind": "customsearch#result",
"title": "「ゆめと」「みると」「らいと」台東区社会福祉協議会様へ導入致しました！",
"htmlTitle": "「ゆめと」「\u003cb\u003eみると\u003c/b\u003e」「\u003cb\u003eらいと\u003c/b\u003e」\u003cb\u003e台東区\u003c/b\u003e社会福祉協議会様へ導入致しました！",
"link": "http://vintage.ne.jp/blog/index.php?itemid=394",
"displayLink": "vintage.ne.jp",
"snippet": "2015年3月31日 ... ゆめと」「みると」「らいと」台東区社会福祉協議会様へ導入致しました！ 平成27年3月に\n東京都の台東区社会福祉協議会様へ下記弊社製品の導入を行いました。 □相談管理 \n... らいと」 □法人後見・市民後見業務支援システム「みると」.",
"htmlSnippet": "2015年3月31日 \u003cb\u003e...\u003c/b\u003e ゆめと」「\u003cb\u003eみると\u003c/b\u003e」「\u003cb\u003eらいと\u003c/b\u003e」\u003cb\u003e台東区\u003c/b\u003e社会福祉協議会様へ導入致しました！ 平成27年3月に\u003cbr\u003e\n東京都の台東区社会福祉協議会様へ下記弊社製品の導入を行いました。 □相談管理 \u003cbr\u003e\n... らいと」 □法人後見・市民後見業務支援システム「みると」.",
"cacheId": "sydwMYcq7loJ",
"formattedUrl": "vintage.ne.jp/blog/index.php?itemid=394",
"htmlFormattedUrl": "vintage.ne.jp/blog/index.php?itemid=394",
"pagemap": {
"metatags": [
{
"name": "Vintage Blog"
},
・・・
]
}
}
}
検索結果は全てitemsに配列として格納されています。
検索結果を処理するコールバック関数は下記のようになります。
function hndlr(response) {
for (var i = 0; i < response.items.length; i++) {
var item = response.items[i];
document.getElementById("content").innerHTML += "<br>" + item.htmlTitle;
}
}
コールバック関数で検索結果を引数として取得できます。
この引数はJSON形式なのでJavaScriptで簡単に処理することができます。
ここでは「response.items」の数だけ「htmlTitle」を書き出す処理をしています。
以上がCustom Search APIの説明になります。
個人的は簡単にサイト内検索や画像検索ができ、すごく使いやすいAPIだと思います。WebサイトにAPIを組み込む手間がかからないのも魅力的です。
APIを組み込むコードを自動で生成してくれるのでコピー&ペーストのみで組み込みが終わります。カスタム検索の使用を検討されている方は無料版があるので是非試していただきたいです。
次回は、Google Analytics APIについて紹介します。
＜参考サイト＞
・Custom Search API
・コントロールパネル
・Google API 第6回