LANG SELRCT

コードを書く場所についてはこちら

2018年5月4日金曜日

Custom Search APIで画像の検索結果を取得する


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で試したときの検索例を書き残しておきます

このアプリケーションでできること

  1. テキストボックスに検索テキストを入力して
  2. 検索ボタンを押すと
  3. 検索URLをUrlFetchして内容を取得して
  4. title, link, snippet, contextLinkなどを取得して
  5. 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>