Google検索とYoutube検索とDrive検索がそれぞれできるボタンを作ってみる
キーワードの入力欄に検索したいテキストを入力して
それぞれのボタンをクリックすると
新規ウィンドウでその結果画面が開きます
コード.gsfunction 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で試したコード
