特定のサイト内で検索するボタンを作りたい（複数ボタン）
を書いている時に実現する方法が幾つかあったので思いつくままに書いてみました
最初は 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=" |
関連記事
特定のサイト内で検索するボタンを作りたい（複数ボタン）
