Custom Search APIの設定をしてから
以下の検索URLの「取得したAPIKEY」「取得したCSE_ID」「検索したいテキスト」を置き換えてブラウザで開くと検索結果を得られる
検索URL：
https://www.googleapis.com/customsearch/v1?key=取得したAPIKEY&cx=取得したCSE_ID&searchType=image&q=検索したいテキスト
Google Custom Search APIの設定
1日あたり100件の検索クエリまでは無料など、利用上の制限もあるようです
http://www.pre-practice.net/2017/12/google-custom-search-api.html#limit
HTML Serviceで試したときの検索例を書き残しておきます
このアプリケーションでできること
- テキストボックスに検索テキストを入力して
- 検索ボタンを押すと
- 検索URLをUrlFetchして内容を取得して
- title, link, snippet, contextLinkなどを取得して
- HTML要素を作って結果を表示する
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
var API_KEY = "取得したAPI_KEY";
var CSE_ID = "取得したCSE_ID";
var BASE_URL = "https://www.googleapis.com/customsearch/v1?key=";
var CX = "&cx=";
var IMAGE = "&searchType=image";
var Q = "&q=";
function get_value_gs(query) {
var url = BASE_URL + API_KEY + CX + CSE_ID + IMAGE + Q + encodeURIComponent(query);
var fetch = UrlFetchApp.fetch(url).getContentText();
var obj = JSON.parse(fetch);
var items = obj["items"];
var array = [];
for (var i = 0; i < items.length; i++) {
var obj_items = {};
var item = items[i];
var title = item["title"];
var link = item["link"];
var snippet = item["snippet"];
var context_link = item["image"]["contextLink"];
obj_items["title"] = title;
obj_items["link"] = link;
obj_items["snippet"] = snippet;
obj_items["contextLink"] = context_link;
array.push(obj_items);
}
return array;
}
|
意訳この機能がやること
指定したHTMLファイルを表示する
取得したAPI_KEY
取得したCSE_ID
BASE_URL
CX
IMAGE
Q
この機能がやること
受け取ったqueryでurlを作ってエンコードして
customsearchAPIから返ってきた内容を取得して
JSONを解析してオブジェクトに変換して
itemsを取得して
結果の入れ物を配列で用意して
itemsの数だけ以下を繰り返す
obj_itemsという名で新規オブジェクトを作る
itemsを一つずつ取得して
titleを取得して
linkを取得して
smippetを取得して
imageのcontextLinkを取得して
obj_items { "title": title,
"link": link,
"snippet": snippet,
"contextLink": contextLink} を作る
array配列にobj_itemsを追加する
出来上がったarrayを返す
|
上のコード.gsはHTML Serviceで使うためにqueryを受け取ってarrayを返してしています
HTML ServiceでUIを作る
index.html<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 25%;
height: auto;
padding: 15px;
border-radius: 2px;
border: solid 1px lightgray;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
overflow-wrap: break-word;
}
.break_word {
overflow-wrap: break-word;
}
.flex_div {
display: flex;
flex-direction: row;
}
.img_size {
width: 60%;
height: auto;
}
.underline_none {
text-decoration: none;
}
</style>
</head>
<body>
<input type="text" id="tb">
<button id="bt">画像検索</button>
<div id="main_div"></div>
<script>
var bt = document.getElementById("bt");
var tb = document.getElementById("tb");
bt.onclick = bt_clicked;
function bt_clicked() {
var value = tb.value;
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.get_value_gs(value);
}
function onSuccess(array) {
create_elements(array);
}
function onFailure(e) {
alert(["error" + e.message, e.stack]);
}
function create_elements(array) {
for(var i = 0; i < array.length; i++){
var div_h = create_div_horizontal();
var div_img_card = create_card(div_h);
create_image(div_img_card, array[i]["link"]);
var div_link_card = create_card(div_h);
create_link(div_link_card, array[i]["title"], array[i]["contextLink"]);
var div_text_card = create_card(div_h);
create_text_div(div_text_card, tb.value);
}
}
function create_div_horizontal() {
var main_div = document.getElementById('main_div');
var div_h = document.createElement("div");
div_h.setAttribute("class", "flex_div");
main_div.appendChild(div_h);
return div_h;
}
function create_card(div_h) {
var div_link_card = document.createElement("div");
div_link_card.setAttribute("class", "card");
div_h.appendChild(div_link_card);
return div_link_card
}
function create_link(div_h, title, item) {
var link = document.createElement("a");
link.setAttribute("class", "underline_none");
link.setAttribute("href", item);
link.setAttribute("target", "_blank");
link.textContent = title;
div_h.appendChild(link);
}
function create_image(div_img_card, item) {
var link = document.createElement("a");
var img = document.createElement("img");
link.setAttribute("href", item);
link.setAttribute("target", "_blank");
img.setAttribute("class", "img_size");
img.setAttribute("src", item);
img.textContent = item;
link.appendChild(img);
div_img_card.appendChild(link);
}
function create_text_div(div_h, text) {
var div = document.createElement("div");
div.textContent = text;
div_h.appendChild(div);
}
</script>
</body>
</html>
|
