常連

注目の的

自己紹介

### 前提・実現したいこと

あるアンケートフォームを作成しているのですが、
都道府県毎に担当するエリアを選択させた後に、
共通のフォームに飛ばしたいと思っています。

アンケートを作成する際に、都道府県ごとのエリアが多く、初めてGASを組んで作成しているのですが、
createChoiceでエリアプルダウンを作成するところまではできたのですが、そのエリアプルダウンに対して
特定のセクションに飛ばすことができず悩んでいます。

addPageBreakItemを使用して回答に応じてセクションに飛ばすことはできたのですが、
すでに存在しているセクションに飛ばすにはどうしたらよいか分からずgetGoToPageを組んでみましたがうまくいきません。

どのように組めば良いかご指摘いただけないでしょうか。

### 該当のソースコード

function addPrefListItem() {
var form = FormApp.openById('hogehoge'); // フォームのID
var item = form.addListItem();
var page2 = form.addPageBreakItem().getGoToPage('既に存在するセクション名');
item.setTitle('タイトル') // フォームの質問のタイトル
.setChoices([
item.createChoice('プルダウンの選択肢',page2),
item.createChoice('プルダウンの選択肢',page2),
item.createChoice('プルダウンの選択肢',page2),
item.createChoice('プルダウンの選択肢',page2),
item.createChoice('プルダウンの選択肢',page2),
item.createChoice('プルダウンの選択肢',page2),
]);
}

Google FormでGASを使用して既にあるセクションに飛ばすにはどうしたら良いですか

ＧＡＳにて入力フォームを作成していますが
ＨＴＭＬのセレクトボックスにて選択した内容をＧＡＳに送って
スプレッドシートから検索して、ヒットする内容をＨＴＭＬの
セレクトボックスの下に表示したいのですがうまく値を渡すことができません。

ちなみにセレクトボックスはスプレッドシート内のマスタより取得しております。

セレクトボックス内の値を選択した瞬間に、その値をＧＡＳへ渡して値を基にスプレッドシート内を検索して
その結果をＨＴＭＬのセレクトボックスの下箇所へ表示させるにはどうしたらよいでしょうか。

宜しくお願いします。

【コード.gs】
```
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setTitle('gas入力フォームサンプル');
}

function registerSSByFormData(data) {

  //Logger.log("data = %s", data);

  var datasheet = SpreadsheetApp.openById('ｽﾌﾟﾚｯﾄﾞｼｰﾄID').getSheetByName('シート1');
  var now = new Date();

  var i = datasheet.getLastRow() + 1; 
  datasheet.getRange(i, 11).setValue(data[11]);
  datasheet.getRange(i,  12).setValue(Utilities.formatDate(now, 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss'));
  result = true;

  return {data: true};
}

function getSelectListFromMasterSS() {
  var selectList = [];

  // マスタデータシートを取得
  var datasheet = SpreadsheetApp.openById('ｽﾌﾟﾚｯﾄﾞｼｰﾄID').getSheetByName('マスタ');
  // B列2行目のデータからB列の最終行までを取得 
  var lastRow = datasheet.getRange("A:A").getValues().filter(String).length - 1;
  //Logger.log("lastRow = %s", lastRow);
  // B列2行目のデータからB列の最終行までを1列だけ取得 
  selectList = datasheet.getRange(2, 1, lastRow, 1).getValues();
  //Logger.log("selectList = %s", selectList); 

  return {data: selectList};
}


function Test(text) {
  // マスタデータシートを取得
  
  
  var datasheet = SpreadsheetApp.openById('ｽﾌﾟﾚｯﾄﾞｼｰﾄID').getSheetByName('マスタ');
	var range = datasheet.getRange("A:A").getValues();　
	var lastRow = range.filter(String).length;
    
	var loginData = datasheet.getRange(2, 1, lastRow, 3).getValues(); //２～lastRow行目、３列分を二次元配列として取得
    
    
	loginData = loginData.filter(function(v) {
		return v[0] == text;
	}); 
    
    Logger.log(loginData)
    //↑ここのログに出力された値（v[1]のみ）をHTML表示したいです
    //return {data: loginData};
	
	


}
```
【javascript.html】
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/7bcbed1321.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.8/validator.min.js"></script>
<script>
/**
 コード.jsのgetSelectListFromSS()を読んで、スプレッドシートのデータをもとに、セレクトボックスを構築する
*/
function getSelectList() {
	try {
		google.script.run
			.withSuccessHandler(function(result) {

				console.log("result", result);

				var select = document.getElementById('select_id3');
				var option = document.createElement('option');
				option.setAttribute('value', '');
				option.setAttribute('selected', true);
				option.innerHTML = '未選択';
				select.appendChild(option);

				for (var i = 0; i < result.data.length; i++) {
					option = document.createElement('option');
					option.setAttribute('value', i + 1);
					option.innerHTML = result.data[i];
					select.appendChild(option);
				}


			})
			.withFailureHandler(function(result) {
				toastr.error('リストの取得に失敗しました。', result);
			})
			.getSelectListFromMasterSS();

	} catch (e) {
		toastr.error(e);
	}
}

/**
 コード.jsのregisterSSByFormData()を呼んで、フォームの内容をスプレッドシートに登録する
*/
function sendData() {

	try {

		processing(true);

		var elemntIFrame = window.parent.document.getElementById('userHtmlFrame');
		elemntIFrame.setAttribute('scrolling', 'no');
		elemntIFrame.setAttribute('frameborder', '0');

		var data = [];
		data[0] = 'dummy';
		data[11] = document.getElementById('select_id3').options[document.getElementById(
			'select_id3').selectedIndex].text;

		console.log("data", data);


		google.script.run
			.withSuccessHandler(function(result) {
				processing(false);
				if (result.data) {
					toastr.info('送信完了');
				} else {
					toastr.error('送信失敗しました');
				}
			})
			.withFailureHandler(function(result) {
				processing(false);
				toastr.error('データ送信に失敗しました。', result);
			})
			.registerSSByFormData(data);

	} catch (e) {
		processing(false);
		toastr.error(e);
	}

}

//ここでHTMLでセレクトした値をGASへ送信
function outputSelectedValueAndText(obj) {
	/* 
	 * obj は select タグであり、selectedIndex プロパティには
	 * 変更後の選択項目のインデックスが格納されています
	 */
	var idx = obj.selectedIndex;
	var text = obj.options[idx].text; // 表示テキスト

	// 値をコンソールに出力 （ここで「コード.gs 」 Testイベントへ）
	google.script.run.Test(text);

}


// 処理中アイコン表示・非表示
function processing(processing) {
	if (processing) {
		document.getElementById('processing').style.visibility = "visible";
		document.getElementById('send_button').setAttribute("disabled", true);
	} else {
		document.getElementById('processing').style.visibility = "hidden";
		document.getElementById('send_button').removeAttribute("disabled");
	}
}

// ロード完了後の処理
$(function() {
	// トースト通知の位置指定
	toastr.options.positionClass = "toast-bottom-left";
	// バリデーションチェック有効化
	$('#myForm').validator();
	// 処理中アイコン非表示
	processing(false);
	// セレクトボックスのリストを動的に取得する
	getSelectList();

	// submit時のイベント登録
	$('#myForm').validator().on('submit', function(e) {
		if (document.getElementById('send_button').className.indexOf("disabled") !=
			-1) {
			// submit用のボタンのスタイルにdisabledが設定されていればバリデーションエラー
		} else {
			// バリデーションエラーでなければ送信
			sendData();
		}
	})
});

</script>

```
【index.HTML】
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
</head>
<body>

  <nav class="navbar navbar-inverse">
    <div class="navbar-header"><a class="navbar-brand" href="#">入力フォーム</a></div>
  </nav>

<div class="container">
    <form class="form-horizontal" id="myForm" name="myForm" onsubmit="return false;">
        <div class="form-group">
            <label class="control-label col-xs-3">セレクトボックス(動的）</label>
            <div class="col-xs-9">
                <select class="form-control" id="select_id3" name="select_id3" onchange="outputSelectedValueAndText(this);"></select>
                <div class="help-block with-errors"></div>
            </div>
        </div>



        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-9">
                <button id="send_button" type="submit" class="btn btn-primary btn-large">
                  <i class="fa fa-send fa-lg"></i>送信
                </button>
            </div>
        </div>
    </form>
<i id="processing" class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
</div>
<?!= HtmlService.createHtmlOutputFromFile('javascript').getContent(); ?>
</body>
</html>
```
【stylesheet.html】
```
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

```

セレクトボックスで選択した値に付随する内容を取得・ＨＴＭＬへ表示したいです

### 前提・実現したいこと

利用ユーザの登録情報を検索・表示させるツールを作成しました。
登録情報はスプレッドシートにまとめられていますが、一覧開示が出来ないため、ユーザIDを入力することで該当の情報のみを表示させます。

該当データがHITした場合に情報を表示させることには成功したのですが、該当データがない場合に何かしらのメッセージを表示させたいのですが、どのようにすればよいでしょうか。
該当データの配列の個数をHTMLページに表示させる方法でも良いです。

Excelマクロ等は利用しておりますが、GASは初心者のため、本サイトなどを参考に切り貼りで作成いたしました。
ご教示いただけますと助かります。

### 発生している問題・エラーメッセージ

HTMLへデータを渡せない

### 該当のソースコード
◎GAS
var sheet = SpreadsheetApp.getActive().getSheetByName('シート1');

function doGet() {
  var tpl = HtmlService.createTemplateFromFile('index');
  return tpl.evaluate();
}

// 結果を返す
function getLoginData(key) {
  var range = sheet.getRange("A:A").getValues();　
  var lastRow = range.filter(String).length;
  var loginData = sheet.getRange(2, 1, lastRow, 3).getValues();
   　　loginData = loginData.filter(function(v){return v[0] == key;});

 Logger.log(loginData.indexOf(key))
 return loginData;
}

◎HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>スプレッド読込みテスト</title>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    var service = null;
        $(function() {
          $('#service').change(function() {
            service = $(this).val();
          }).change();
        });
  </script>

<script>
   function dispLoginData(loginData) { 
      var td = '';
      for (var i = 0, l = loginData.length; i < l; i++) {
         var v = loginData[i];
         td += '<tr>\n<td>' + v[0] + '</td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n</tr>\n';
      }
      $('#loginTr').html(td);
   }
</script>

</head>

<body>
  <div id="container"> 
    <h2>レポート検索</h2> 
    <div class="form-inline text-center"> 
      <div class="form-group"> <label for="namae">ユーザID：</label> 　　<input type="text" id="service" name="service" size="30" maxlength="6"> 　　　</div>
      <div class="form-group"> <input type="button" class="btn btn-success" value="照会" onclick="google.script.run.withSuccessHandler(dispLoginData).getLoginData(service)"> </div>
    </div> <br>
    <table class="table table-bordered table-striped">
      <tr>
        <th>ユーザID</th>
        <th>登録名</th>
        <th>ログインURL</th>
      </tr>
      <tbody id="loginTr"> </tbody>
    </table>
  </div>

</body>
</html>

### 試したこと

ログ上ではデータが正しく取得できていることを確認
htmlファイルに　<?=loginData.length?>　や　<?=l?>　を記載すると
「ReferenceError: 「l」が定義されていません。（行 5、ファイル「コード」）」
とエラーが出てしまう

GAS側で個数のみを取得するfunctionを別途作成したが上手く動作せず、ログにも値が取得出来ていなかった。

該当データの個数とデータの中身をHTMLで表示させたい

### 前提・実現したいこと

Google Formへ回答があった時に、自動的にLINEに通知が来るようにしています。
その際に未入力の欄が空白として認識されてしまいます。

Google FormとLINEの連携については下記のコードを参考にしています。
https://qiita.com/guchimina/items/aa36e27875ae26876d2c

### 該当のソースコード
//spreadsheetからデータを取得
function GoogleFormToLine(){
  var sheet = SpreadsheetApp.getActiveSheet(); //sheetの指定
  var row = sheet.getLastRow(); //行数
  var column = sheet.getLastColumn(); //列数
  var range = sheet.getDataRange(); //sheetから範囲指定するための準備
  var message = "";
  for(var i=1;i<=column;i++){
    var item = range.getCell(1, i).getValue(); //1行目
    var value = range.getCell(row, i).getValue(); //最終行
    message += "\n■"+item+"\n"+value; 
  }
  SendToLine(message);
}

//LINEに通知
function SendToLine(message){
  //ファイル→プロジェクトのプロパティ→スプリクトのプロパティからLINE_TOKENを設定しておく
  var token = PropertiesService.getScriptProperties().getProperty('LINE_TOKEN');
  var op =
    {
      "method" : "post",
      "Content-Type" : "application/x-www-form-urlencoded",
      "payload": "message=" + message,
      "headers":{"Authorization" : "Bearer " + token}
    };
  var res = UrlFetchApp.fetch("https://notify-api.line.me/api/notify",op);
  Logger.log(JSON.parse(res.getContentText())); //Response
}

### 試したこと

Slack版の回答を拝見したのですが、LINEの際にはどのように対応すべきなのか見当がつかず、
質問をさせていただきました。