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

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

ただいまの
回答率

87.93%

.gs⇒.htmlへ配列の値を渡してプルダウンで表示させる方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,218

score 18

Google Apps Scriptにて、
scriptで配列を作成し、html(ウェブアプリケーションとして導入)にて
プルダウンとして表示させたいです。

そもそもonclickではないのだろうなと気付いておりますが、
どう反映させればいいのか…無知で恐縮ですが、お助け願います。

 仮.gas 

※メモ※昨日papinianus様にご教示いただいた内容は未反映です

function set_availability(sheet, column, id){

//時間の記載されているSS
 var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 var availability_spreadsheet = spreadsheet.getSheetByName('SS');

  var calendar_id = "アドレス1";
  var calendar_id2 = "アドレス2";

  var last_row = availability_spreadsheet.getLastRow()
  var calendar_info = CalendarApp.getCalendarById(calendar_id);
  var calendar_info2 = CalendarApp.getCalendarById(calendar_id2);

  //ステータス列の判定
  var array_data=[];
  var array_data1=[];
  var array_data2=[];

  for(var i = 3; i <= last_row; i++){

   //SS3行目から30分ごとに時間が記載されています
    var start_date_base = availability_spreadsheet.getRange(i, 1).getValue();
    var start_date_tmp = new Date(start_date_base);
    var end_date_tmp = start_date_tmp.setMinutes(start_date_tmp.getMinutes()+30);
    var start_date = new Date(start_date_base);
    var end_date = new Date(end_date_tmp);

    var myEvents= calendar_info.getEvents(start_date, end_date);

    var myEvents2= calendar_info2.getEvents(start_date, end_date);

//予定がなかったら格納    
    if (myEvents.length == 0){
      var start_date_in = Utilities.formatDate(start_date , "Asia/Tokyo", "yyyy/MM/dd HH:mm");
      array_data.push(start_date_in);
    }

//予定がなかったら格納    
     if (myEvents2.length == 0){
      var start_date_in = Utilities.formatDate(start_date , "Asia/Tokyo", "yyyy/MM/dd HH:mm");
      array_data.push(start_date_in);
    }

  }

  var _ =Underscore.load();
  var array_data = _.intersection(array_data1,array_data2);

  Logger.log(array_data);
 return array_data;

//array_dataの中身は
 [2018/10/27 09:00, 2018/10/27 09:30, 2018/10/27 10:00~]のような日付の文字列を想定

  };

 仮.html

<!DOCTYPE html>
<html>
<head>
    <div class="select_style">
     <select id= "start_time" name="start_time" onclick="createSelectBox()" required>
     </select>
    </div>
</head>
</html>

function createSelectBox(){
   google.script.run.withSuccessHandler(
   function(array_data) {
    for(var i=0;i<array_data.length;i++){
      let op = document.createElement("option");
      op.value = array_data[i].val;  //value値
      op.text = array_data[i].txt;   //テキスト値
      document.getElementById("start_time").appendChild(op);
    }
  }).set_availability();
};

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

例えばcreateSelectBox()を次のように変更するのは如何でしょうか。GAS側からの値はwithSuccessHandler()を使用して取得しています。downlist()はサンプルとして使いましたので修正をお願いします。

 GAS側のサンプル

function downlist(){
  var res = [{val: "val1", txt: "txt1"}, {val: "val2", txt: "txt2"}, {val: "val3", txt: "txt3"}];
  return res;
};

 変更したHTML

function createSelectBox(){
  google.script.run.withSuccessHandler(function(res) {
    for(var i=0;i<res.length;i++){
      let op = document.createElement("option");
      op.value = res[i].val;  //value値
      op.text = res[i].txt;   //テキスト値
      document.getElementById("start_time").appendChild(op);
    }
  }).downlist();
};

 追加

  • Web AppsをdoGet()を使ってブラウザから起動している。
  • そちらのHTMLは一部ではなく実際にそのものを使用している。

上記のように仮定して修正したHTMLを下記に記載致します。下記HTML, GASをコピーペーストした後は、Web Appsを新たなバージョンとして再デプロイしてください。

 修正したHTML

下記をHTMLへコピーペーストしてください。

<div class="select_style">
<select id="start_time" name="start_time" onclick="createSelectBox()" required></select>
</div>
<script>
function createSelectBox(){
  google.script.run.withSuccessHandler(function(res) {
    for(var i=0;i<res.length;i++){
      let op = document.createElement("option");
      op.value = res[i].val;  //value値
      op.text = res[i].txt;   //テキスト値
      document.getElementById("start_time").appendChild(op);
    }
  }).downlist();
};
</script>

 GAS側

本質問の回答としてはGAS側のスクリプトは特に問題になりませんのでサンプルとして下記を使用してください。

function downlist(){
  var res = [{val: "val1", txt: "txt1"}, {val: "val2", txt: "txt2"}, {val: "val3", txt: "txt3"}];
  return res;
};

 追加2

ご用意されているHTMLでのop.value = array_data[i].valop.text = array_data[i].txtに合わせるためにGAS側のスクリプトにある最終行のreturn array_data;を次のように変更して動作をご確認ください。スクリプトを変更した際は、新たなバージョンとしてWeb Appsを再デプロイしてから実行してください。これをしないと変更されたスクリプトが反映されませんので注意してください。

return array_data.map(function(e, i){return {val: i, txt: e}});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/18 12:02

    コメントだけで済ませてしまい申し訳ありませんでした。修正したスクリプトを回答へ追記しましたのでご確認頂けないでしょうか。これはサンプルのため、必要であればご自身の仕様に合わせて修正してください。

    キャンセル

  • 2018/10/23 17:38

    何度もご対応いただきありがとうございました。無事解決いたしました。またなにかあればよろしくお願い致します。

    キャンセル

  • 2018/11/06 12:22 編集

    返事が遅くなり申し訳ありません。無事解決してよかったです。

    キャンセル

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

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る