LANG SELRCT

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

2018年1月13日土曜日

if, switch, indexOf, Objectで試したコード


特定のサイト内で検索するボタンを作りたい(複数ボタン)
を書いている時に実現する方法が幾つかあったので思いつくままに書いてみました


最初は if でやろうと思って
いや、switchでやったほうが良いかもと思い
いやむしろ Objectにしたほうが良くないかと思い
上記の記事ではObjectでやりました

このブログを書きながらそういえば indexOf もあったなと思い出して
コードを全部書き出してそれぞれ試してみました

結果はどれも同じですが、個人的には Object がスッキして見やすい

それぞれの処理を深く掘り下げてはいませんが、実現できる方法を試したコードを備忘録として残しておきます


実現したいのは上記のリンク先にあるものと同じこの機能







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



if文で書く場合

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 = get_base_url(id);
      var keyword = document.getElementById("tb").value;
      var url = base_url + keyword;
      window.open(url, "_blank");
    }

    function get_base_url(id) {
    var base_url = "";
      if (id == "bt_search") {
        base_url = "https://www.google.co.jp/search?q=";
      } else if (id == "bt_youtube") {
        base_url = "https://www.youtube.com/results?search_query=";
      } else if (id == "bt_drive") {
        base_url = "https://drive.google.com/drive/search?q=";
      }
      return base_url;
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


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

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


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


この機能がやること
base_urlの入れ物を用意して
もしidがbt_searchなら
base_url に "https://www.google.co.jp/search?q="を入れて
bt_youtubeなら
base_url に "https://www.youtube.com/results?search_query="を入れて
bt_driveなら
base_url に "https://drive.google.com/drive/search?q="を入れて

返す





switch文で書く場合

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 = get_base_url(id);
      var keyword = document.getElementById("tb").value;
      var url = base_url + keyword;
      window.open(url, "_blank");
    }

    function get_base_url(id) {
      var base_url = "";
      switch (id) {
        case "bt_youtube":
          base_url = "https://www.youtube.com/results?search_query=";
          break;
        case "bt_drive":
          base_url = "https://drive.google.com/drive/search?q=";
          break;
        default:
          base_url = "https://www.google.co.jp/search?q=";
          break;
      }
      return base_url;
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


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

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


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


この機能がやること
base_urlの入れ物を用意して
受け取ったidによって場合分けをする
bt_youtubeの場合
base_url に "https://www.youtube.com/results?search_query="を入れて

bt_driveの場合
base_url に "https://drive.google.com/drive/search?q="を入れて

上記以外の場合
base_url に "https://www.google.co.jp/search?q="を入れて


返す






indexOfで書く場合

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 = get_base_url(id);
      var keyword = document.getElementById("tb").value;
      var url = base_url + keyword;
      window.open(url, "_blank");
    }

    function get_base_url(id) {
      var ids = [
        "bt_search",
        "bt_youtube",
        "bt_drive"
      ];
      var urls = [
        "https://www.google.co.jp/search?q=",
        "https://www.youtube.com/results?search_query=",
        "https://drive.google.com/drive/search?q="
      ]
      var index = ids.indexOf(id);
      var base_url = urls[index];
      return base_url;
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


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

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


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


この機能がやること
idsの配列を用意する




urlsの配列を用意する




id が idsの中の何番目の要素にあるか見つけて
urlsの同じ番号の要素をbase_urlに入れて
返す






Objectで書く場合

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>
意訳
これは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="








関連記事

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