質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2612閲覧

URL最後尾にパラメーターをつけてそれを利用してWEBページの表示を変更させたい。

Octoputh

総合スコア1

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/09/01 02:32

編集2020/09/01 03:12

前提・実現したいこと

GAS、HTML、Google スプレッドシートを用いてHTMLを作成しています。
スプレッドシートには
A列:受付番号
B列:所属
C列:氏名
が入力されており、htmlのWEBページの「受付番号から検索」のテキストボックスに受付番号を入力して
隣のボタンを押下するとjavascriptとGASを通してスプレッドシートを検索して該当行の所属と氏名を返すGASを作成しました。

実現したいのはテキストボックスに入力せず、URLのパラメータに受付番号をつけてWEBページを開いたときに
パラメータの受付番号で検索した状態を表示させたいのです。

該当のソースコード

GAS

1function doGet(e) { 2 const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); 3 return htmlOutput; 4} 5 6 var id = "スプレッドシートのID"; 7 8function readSS(num) { 9 var rowdata = []; 10 var datasheet = SpreadsheetApp.openById(id).getSheetByName("シート1"); 11 const columnBVals = datasheet.getRange("A:A").getValues(); 12 const LastRow = columnBVals.filter(String).length; 13 for (let i = 1; i <= LastRow; i++) { 14 if(datasheet.getRange(i, 1).getValue() == num){ 15 rowdata = datasheet.getRange(i, 1, 1, 3).getValues(); 16 return {data: rowdata}; 17 break; 18 } 19 } 20}

html

1<html> 2<head> 3 <script> 4 // 【関数】受付番号から読み込む 5function readSS(num) { 6 const result = "スプレッドシートのID"; 7 8 var searchNum = document.getElementById("searchNum").value; 9 google.script.run.withSuccessHandler(function(result) { 10 document.getElementById('id1').value = result.data[0][ 0] ; 11 document.getElementById('id2').value = result.data[0][ 1] ; 12 document.getElementById('id3').value = result.data[0][ 2] ; 13 }) 14 .readSS(searchNum); 15 } 16 </script> 17 </head> 18 <body> 19 <form name="sendForm"> 20 <table cellspacing="0" cellpadding="0" border="0" > 21 <tr> 22 <td><input type="text" id="searchNum" style="width:50%"> <input type="button" value="受付番号から検索" onclick="readSS(searchNum);"></td> 23 <td></td> 24 </tr> 25 <tr> 26 <td > ・受付番号(入力不可)</td> 27 <td><input type="text" id="id1" readonly="readonly" /> </td> 28 </tr> 29 <tr> 30 <td> ・所属</td> 31 <td><input type="text" id="id2"> </td> 32 </tr> 33 <tr> 34 <td> ・氏名</td> 35 <td><input type="text" id="id3"> </td> 36 </tr> 37 </table> 38 </form> 39 </body> 40</html>

試したこと

下記サイトを参考できないか試してみましたがうまく行きませんでした。
GASでURLを踏んでスクリプトを動作させたときにパラメータを渡す方法

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/09/01 02:48

タグにある内容をタイトルに含む必要はないですし(むしろタイトルが無駄に長くなる)、「初心者アイコン」を質問につけられるのでわざわざ書かなくても良いです。 質問は編集できますので適宜調整してください。
Octoputh

2020/09/01 03:13

ご指摘ありがとうございます。 質問内容を変更しました。
guest

回答1

0

ベストアンサー

質問のリンク先にあるように、e.parametersからクエリパラメータを取得できます。
HTML側に引き渡すには、HTMLTemplate.evaluate()を呼び出す前にパラメータを設定し、HTMLテンプレート側でそのパラメータを利用してアウトプットするHTMLを変更すればいいです。

JavaScript

1function doGet(e) { 2 const template = HtmlService.createTemplateFromFile("index"); 3 template.id = ""; 4 template.group = ""; 5 template.name = ""; 6 7 const id = e.parameters["id"]; //e.parameters.id でも可 8 if (id) { 9 const result = readSS(id); 10 template.id = id; 11 if (0 < result.data.length) { 12 template.group = result.data[0][1]; 13 template.name = result.data[0][2]; 14 } 15 } 16 return template.evaluate(); 17} 18 19function readSS(num) { 20 /* 省略*/ 21}

HTML

1 <script> 2 <? if(id) { ?> 3 window.addEventListener("DOMContentLoaded", () => { 4 document.getElementById("id1").value = <?= id ?>; 5 document.getElementById("id2").value = '<?= group ?>'; 6 document.getElementById("id3").value = '<?= name ?>'; 7 }); 8 <? } ?> 9 10 // 【関数】受付番号から読み込む 11 function readSS(num) { 12 /* 省略 */ 13 } 14 </script> 15

投稿2020/09/01 10:11

draq

総合スコア2573

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Octoputh

2020/09/02 01:16

ご回答ありがとうございます。 私がやりたい動きができているのを確認できました。 一つ一つの動きで理解できていないことはありますが身につけていきます。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問