このページには、検索要素のコールバックの使用例が掲載されています。Custom Search Element API ドキュメントの
コールバックのセクション にある例を補完するものです。
注: このページの実行可能なサンプルは、JSFiddle ウェブサイトで実行されます。コードブロックの右上で JSFiddle ボタン を探します。これを押すと JSFiddle ページが開き、HTML
、JavaScript
、css
、run の各ペインにサンプルが表示されます。起動が「alive」になっているため、実行ペインの検索ボックスにクエリを入力するとコールバックが実行されます。
このドキュメントの例は、そのタイプと機能に基づいて部分に分かれていますが、以下の点に留意してください。
サンプルのすべての部分は JSFiddle に一緒に送信されます。
この例の各部分には JSFiddle ボタンがあります。どのモデルもやり方は同じです。
これは JSFiddle なので、コードで遊んでみます。JSFiddle で行った変更は、このドキュメントには反映されません。
検索開始コールバックの例
検索開始 コールバックは、検索に使用される前にクエリを変更できます。
プログラム可能検索エンジンは、クエリに事前に定義された用語を含めるように設定できますが、このコールバックはコールバック関数が利用可能な任意の情報に基づいてクエリを変更できます。
次の検索開始 コールバックは、各クエリを現在の曜日で装飾します。
検索開始コールバックの例
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const mySearchStartingCallback = (gname, query) => {
const dayOfWeek = new Date().getDay();
console.log(dayOfWeek);
var days = {
"0": "Sunday",
"1": "Monday",
"2": "Tuesday",
"3": "Wednesday",
"4": "Thursday",
"5": "Friday",
"6": "Saturday"
};
return query + ' ' + days[dayOfWeek];
};
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
image: {
starting: mySearchStartingCallback,
},
web: {
starting: mySearchStartingCallback,
},
};
HTML に次の要素を含めます。
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
レンダリングされたコールバックの例
レンダリングされた結果コールバックは、結果が読み込まれた後にページを変更する場合に適しています。コールバックが結果のレンダリングをすべて担うことなく、結果の表示を簡単に変更できるように設計されています。
次の例は、結果に対してオペレーションを実行しない、レンダリングされたコールバックの結果の 2 つのアプリケーションを示しています。
最後の結果ページを特定する
この「結果レンダリング 」コールバックは、結果の最後のページを表示していることを通知し、ユーザーに知らせるアラートをポップアップします。
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
var searchresults= document.getElementsByClassName("gsc-cursor-page");
var index= document.getElementsByClassName("gsc-cursor-current-page");
if(index.item(0).innerHTML == searchresults.length){
alert("This is the last results page");
}
};
コールバックをインストールする
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
// Since the callback is in the global namespace, we can refer to it by name,
// 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
rendered: myWebResultsRenderedCallback,
},
};
HTML に次の要素を含めます。
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
「カーソル」リンクのフォントサイズを大きくする
この結果のレンダリング のコールバック デモでは、検索結果ページを選択する「カーソル」番号のフォントサイズを大きくしています。
デフォルトのフォントサイズは 12 px です。ここでは 20px に増やします。
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};
コールバックをインストールする
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
// Since the callback is in the global namespace, we can refer to it by name,
// 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
rendered: myWebResultsRenderedCallback,
},
};
HTML に次の要素を含めます。
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
「カーソル」ラベルに文字を使用する
この「レンダリングされた結果」 コールバックは、「カーソル」内のページリンクを数字から文字に変更します。
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
var arr = document.getElementsByClassName('gsc-cursor-page');
var alp = ['A','B','C','D','E','F','G','H','I','J','K','L',
'M','N','O','p','Q','R','S','T','U','V','W','X','Y','Z'];
for (var i = 0; i < arr.length; i++) {
arr[i].innerHTML = alp[i];
}
};
コールバックをインストールする
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
// Since the callback is in the global namespace, we can refer to it by name,
// 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
rendered: myWebResultsRenderedCallback,
},
};
HTML に次の要素を含めます。
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
結果準備完了コールバックの例
交互の背景色で結果を表示する
このコールバックでは、明るい背景と暗い背景が交互にフォーマットされます。
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
注: このコードは JavaScript/ES6 で記述されています。ほとんどのブラウザで動作しますが、Internet Explorer やその他いくつかの古いブラウザでは JavaScript または ES5 に変換する必要があります。
barredResultsRenderedCallback = function(gname, query, promoElts, resultElts){
const colors = ['Gainsboro', 'FloralWhite'];
let colorSelector = 0;
for (const result of resultElts) {
result.style.backgroundColor = colors[colorSelector];
colorSelector = (colorSelector + 1) % colors.length;
}
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
rendered: barredResultsRenderedCallback,
},
};
HTML に次の要素を含めます。
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
ワードクラウド
結果の準備完了 コールバックの明らかな応用例は、結果レンダリング コールバックを使用して HTML を調整することによりアクセスしにくい形式で検索結果を表示することです。結果の準備完了 コールバックは、空の div
で開始されます。Search Element API ドキュメントの一例 では、コールバックを使用して非常にシンプルな結果をレンダリングする方法が示されています。
別の例 では、結果の準備完了 コールバックからの結果データを保持し、結果レンダリング コールバックに渡して、標準の結果表示を装飾するために使用しました。
次の results ready コールバックは、検索結果が結果のリストでなくてもよいことを示しています。通常の検索結果表示が、検索結果のタイトルとコンテンツに含まれる単語のワードクラウドに置き換えられます。結果のリストがユーザーにとって中間ステップにすぎない場合、このようなコールバックはそのステージをバイパスし、結果を使用してユーザーが必要とするレポートを表示できます。
検索結果のコンテンツからワードクラウドを作成する
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<style>
#container {
width: 100%;
height: 4.5in;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>
注: このコードは JavaScript/ES6 で記述されています。ほとんどのブラウザで実行できますが、Internet Explorer およびその他いくつかの古いブラウザでは JavaScript/ES5 への変換が必要になります。
const resultsReadyWordCloudCallback = function(
name, q, promos, results, resultsDiv) {
const stopWords = new Set()
.add('a')
.add('A')
.add('an')
.add('An')
.add('and')
.add('And')
.add('the')
.add('The');
const words = {};
const splitter = /["“”,\?\s\.\[\]\{\};:\-\(\)\/!@#\$%\^&*=\+\*]+/;
if (results) {
for (const {contentNoFormatting, titleNoFormatting} of results) {
const wordArray = (contentNoFormatting + ' ' + titleNoFormatting)
.split(splitter)
.map(w => w.toLowerCase());
for (const w of wordArray) {
if (w && !stopWords.has(w)) {
words[w] = (words[w] + 1) || 1;
}
}
}
}
const dataForChart = [];
for (const key in words) {
const val = words[key];
dataForChart.push({
'x': key,
'value': val,
});
}
const container = document.createElement('div');
resultsDiv.appendChild(container);
container.id = 'container';
// create a tag (word) cloud chart
const chart = anychart.tagCloud(dataForChart);
// set a chart title
chart.title(`Words for query: "${q}"`)
// set an array of angles at which the words will be laid out
chart.angles([0, 45, 90, 135])
// display the word cloud chart
chart.container(container);
chart.draw();
return true; // Don't display normal search results.
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: resultsReadyWordCloudCallback,
},
};
HTML に次の要素を含めます。
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
2 部構成のコールバックの例
結果の準備完了 コールバックと結果レンダリング のコールバックを組み合わせて使用することで、前者から後者に情報を渡すことができます。たとえば、結果オブジェクトの配列内の情報は、結果の準備完了 コールバックでは利用できますが、結果レンダリング コールバックでは取得できません。その情報を結果の準備完了 コールバックの一部として配列に保存することで、結果レンダリング コールバックからその情報にアクセスできるようになります。
たとえば、画像がクリックされたときに表示されるプレビュー パネルをバイパスする場合などです。2 パート構成のコールバックにより、クリック時に画像プレビューを表示する代わりに、画像検索の結果から対応するウェブサイトに直接リンクできます。
画像のプレビューをバイパスする
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const makeTwoPartCallback = () => {
let urls;
const readyCallback = (name, q, promos, results, resultsDiv) => {
urls = [];
for (const result of results) {
urls.push(result['contextUrl']);
}
};
const renderedCallback = (name, q, promos, results) => {
const removeEventListeners = element => {
const clone = element.cloneNode(true);
element.parentNode.replaceChild(clone, element);
return clone;
};
for (let i = 0; i < results.length; ++i) {
const element = removeEventListeners(results[i]);
element.addEventListener('click', () => window.location.href = urls[i]);
}
};
return {readyCallback, renderedCallback};
};
const {
readyCallback: imageResultsReadyCallback,
renderedCallback: imageResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
image: {
ready: imageResultsReadyCallback,
rendered: imageResultsRenderedCallback,
},
};
HTML に次の要素を含めます。
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>