backup #GAS - Qiita

index.html

<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link rel="stylesheet" type="text/css" href="https://officeforest.org/wp/library/userlist/css/jquery.dataTables.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf8" src="https://officeforest.org/wp/library/userlist/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="https://officeforest.org/wp/library/userlist/jquery.dataTables.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#table_id').DataTable({
      "pageLength": 15
    });
  } );
</script>	
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(test);

  function test(){
    google.script.run.withSuccessHandler(onSuccess).retdata();
  }
  
  function onSuccess(data){
    //各種データの取得
    var sampleNode=document.getElementById("userlist");
    var json = JSON.parse(data);
    var html = "";
    
    //htmlにテーブルの初期タグ部分を格納する。
    html  = "<table id=" + "table_id" + " class='display' cellspacing='0' width='100%'>"
          + "<thead><tr>";

    for(var a = 0; a < json[0].length; a++){
      html += "<th>" + String(json[0][a]) + "</th>";
    }

    html += "</tr></thead>"			 
          + "<tbody>";
    
    if(json[1][0] == ""){
      html = '<p style="color:black; font-size:18pt;">' + "本日は作業がありません。</p>";
    }else{
      //受信データからHTMLを作成し格納する（最新記事を上にする）
      for(var i = 1; i < json.length; i++){
        //テーブルタグを生成して格納する
        html  += "<tr>"
              + "<td>" + String(json[i][0]) + "</td>"
              + "<td>" + String(json[i][1]) + "</td>"
              + "<td>" + String(json[i][2]) + "</td>"
              + "<td>" + String(json[i][3]) + "</td>"
              + "<td>" + String(json[i][4]) + "</td>"
              + "<td>" + String(json[i][5]) + "</td>"
              + "</tr>";      
      }
      //htmlにテーブルの終了タグを追加
	    html += "</tbody></table>";
    }
    
    //生成したHTMLを置き換え
    sampleNode.innerHTML = html;	

    $(document).ready(function() {
      $('#table_id').DataTable({
        "processing": true,
        "pageLength": 10,
        "order": [[ 0, "desc" ]],
        "language": {
          "searching" : false,
          "emptyTable" : "データが登録されていません。",
          "info" : "_TOTAL_ 件中 _START_ 件から _END_ 件までを表示",
          "infoEmpty" : "",
          "infoFiltered" : "(_MAX_ 件からの絞り込み表示)",
          "infoPostFix" : "",
          "thousands" : ",",
          "lengthMenu" : "1ページあたりの表示件数: _MENU_",
          "loadingRecords" : "ロード中",
          "processing" : "処理中...",
          "zeroRecords" : "該当するデータが見つかりませんでした。",
          "paginate" : {
            "first" : "先頭",
            "previous" : "前へ",
            "next" : "次へ",
            "last" : "末尾"
          }
        }
      });
    } );
    
  }
</script>
</head>
<div id="userlist" style="font-size: 14px;">
<center>
<img border="0" src="https://officeforest.org/wp/library/ProgressSpinner.gif">
<b><div style="color:black; font-family:Arial; font-size:14pt;">しばらくそのままお待ち下さい</div></b>
</center>
</div>

コード.gs

function onOpen(e) {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('▶リンク集作成')
      .addItem('セットアップ', 'setup')
      .addSeparator()
      .addItem('プレビュー', 'pon')
      .addToUi();
}

//セットアップ
function setup(){
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheetId = sheet.getId();
  var Properties = PropertiesService.getScriptProperties();
  var spfile = Properties.setProperty("sheetid",sheetId);
  
  SpreadsheetApp.getUi().alert("セットアップ完了");
}


//プレビュー表示用
function pon(){
  var html =  HtmlService.createHtmlOutputFromFile("linkman").setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(530).setWidth(1000);
  SpreadsheetApp.getUi().showModalDialog(html, "リンク集");
}

web.gs

function doGet(){
  var html =  HtmlService.createHtmlOutputFromFile("linkman")
              .setSandboxMode(HtmlService.SandboxMode.IFRAME)
              .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
              .setHeight(530)
              .setWidth(1000);
  return html;
}


//ウェブアプリケーションへデータをコールバック
function retdata(){
  var Properties = PropertiesService.getScriptProperties();
  var sheetid = Properties.getProperty("sheetid");
  
  //シートデータの取得
  var sheet = SpreadsheetApp.openById(sheetid);
  var ss = sheet.getSheetByName("data");
  var range = ss.getDataRange().getValues();
  return JSON.stringify(range);
}