LANG SELRCT

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

2018年1月13日土曜日

指定したサイト内で検索するボタンを作りたい(複数ボタン)


Google検索とYoutube検索とDrive検索がそれぞれできるボタンを作ってみる





キーワードの入力欄に検索したいテキストを入力して
それぞれのボタンをクリックすると
新規ウィンドウでその結果画面が開きます



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <input type="text" id="tb" placeholder="キーワード">
  <button id="bt_search">Google検索</button>
  <button id="bt_youtube">Youtube検索</button>
  <button id="bt_drive">Drive検索</button>
  <script>
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
      document.getElementById(buttons[i].id).onclick = bt_clicked;
    }

    function bt_clicked() {
      var id = this.id;
      var base_url = base_url_obj[id];
      var keyword = document.getElementById("tb").value;
      var url = base_url + keyword;
      window.open(url, "_blank");
    }

    var base_url_obj = {
      "bt_search": "https://www.google.co.jp/search?q=",
      "bt_youtube": "https://www.youtube.com/results?search_query=",
      "bt_drive": "https://drive.google.com/drive/search?q="
    }
  </script>
</body>
</html>
<script>
意訳
これはHTML5文書です


テキストボックスを置く
Google検索ボタン
Youtube検索ボタン
Drive検索ボタン

buttonタグをすべて取得する
buttonタグの数だけ以下を繰り返す
クリックされたらbt_clickedを実行する


この機能がやること
クリックされたボタンのidを取得して
base_urlを取得して
idがtbの要素の値を取得して
基準のURL+値をurlにして
新規タブで開く


ボタンのidと基準になるURLのセットをオブジェクトで用意する
base_url_obj["bt_search"]は"https://www.google.co.jp/search?q="









関連記事

指定したサイト内で検索するボタンを作りたい
if, switch, indexOf, Objectで試したコード