人事労務管理マスタ

_javascript.html

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.basictable/1.0.8/jquery.basictable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.4.0/jquery.quicksearch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>

<script>
;(function($) {
    $.fn.tableColSwitcher = (function(){
        var menu = "",
            items = [];
        var $element = $(this);

        // first row add to menu
        $tr = $element.find("tr").eq(0);
        var i = 0;
        $tr.children().each(function(){
            items.push($(this).text());
            $(this).html('<a href="javascript:;" id="check_head' + i++ + '">' + $(this).html() + '</a>');
        });

        menu += '<form name="check_form" id="check_form">';
        for (var i= 0; i < items.length; i++) {
            check = (localStorage.getItem("check" + i)) ? " checked" : "";
            menu += '<label>'
                + '<input'
                + ' checked="checked"'
                + ' id="check' + i +'" '
                + ' type="checkbox"'
                + ' name="check[]"'
                + ' value="'+ i + '" '
                + check
                + ' />'
                + items[i]
                + '</label>';
        }
        menu += '</form>';
        $element.before(menu);

        var init = (function(){
            $("input[id^='check']").each(function(){
                colSwitch($(this));
            });
            // resetup click event
            $("a[id^='check_head']").on("click", function(){
                sortRows($(this));
            });
        });

        // change cell display
        var colSwitch = (function($cell){
            id = $cell.attr("id").replace("check", "");
            if ($cell.is(":checked")) {
                localStorage.setItem("check" + id, true);
                changeDisplay(id, "");
            } else {
                localStorage.removeItem("check" + id);
                changeDisplay(id, "none");
            }            
        });

        // change attribute:display func
        var changeDisplay = (function(rowIndex, display){
            $element.find("tr").each(function(){
                $(this).children().eq(rowIndex).css("display", display);
            });
        });

        // check checkbox event
        $("input[id^='check']").on("change", function(){
            colSwitch($(this));
        });

        $("a[id^='check_head']").on("click", function(){
            sortRows($(this));
        });
        var sortRows = (function($head){
            order = localStorage.getItem("order");
            sort_key = localStorage.getItem("sort_key");

            id = $head.attr("id").replace("check_head", "");

            if (id == sort_key){
                sort = (order == "desc") ? "asc" : "desc";
            } else {
                sort = "asc"; 
            }
            localStorage.setItem("sort_key", id);
            localStorage.setItem("order", sort);

            $.ajax({
                url: "index.php",
                type: "POST",
                data: {
                    "id": id,
                    "sort": sort
                },
                async: false,
                cache: false,
                dataType: "JSON",
                success: function(json_data){   
                    data_table = "<tr>";
                    $tr = $element.find("tr").eq(0);
                    $tr.each(function(){
                        data_table += $(this).html();
                    });
                    data_table += "</tr>";
                    for (var i = 0; i < json_data.length; i++) {
                        data_table += "<tr>";
                        for (var j = 0; j < json_data[i].length; j++) {
                            data_table += "<td>" + json_data[i][j] + "</td>";
                        }
                        data_table += "</tr>";
                    }

                    $element.html(data_table);
                    init();
                }
            });
        });
        init();
    });
})(jQuery);
</script>

<script type="text/javascript">
$(function(){$('.select').select2();});
$(function(){$('table').basictable();});
$(function(){$('input#id_search').quicksearch('table tbody tr');});
$(function(){$("#result").tableColSwitcher();});
$(function(){$("#result").tablesorter();});
</script>

_stylesheet.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.basictable/1.0.8/basictable.min.css" rel="stylesheet" />

<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
    font-family: 'Noto Sans Japanese', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body { padding: 20px; }
td, th { font-size:0.8em; border: 1px solid #ccc; width: 150px !important; padding: 10px; }

thead { background: #fcfcfc; }

.select2-container { width: 200px !important; }

h1 {
}

h2 {
    margin-top:30px;
    margin-bottom:-20px;
    line-height: 1.7;
    text-align: justify;
    letter-spacing: -0.02em;
}

h3 {
    margin-top:50px;
    margin-bottom:20px;
    border-left: 3px solid rgb(70,70,70);
    padding: 15px;
    background: #f6f6f6;
    line-height: 1.7;
    letter-spacing: -0.02em;
}

h4 {
    margin-top:50px;
    margin-bottom:20px;
    border-left: 5px solid #e5e5e5;
    padding: 0 13px;
}
-->
</style>

appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "webapp": {
    "access": "DOMAIN",
    "executeAs": "USER_DEPLOYING"
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": ["https://www.googleapis.com/auth/spreadsheets.currentonly", "https://www.googleapis.com/auth/spreadsheets"]
}

code.gs

var url = "https://script.google.com/a/hitotomirai.co.jp/macros/s/**********/exec";
//var url = "https://script.google.com/a/hitotomirai.co.jp/macros/s/**********/dev"

//本ファイル
var file_jinji =　'**********'
var url_jinji =　"https://docs.google.com/spreadsheets/d/" + file_jinji + "/edit";
//人事管理マスタ
var file_jinji =　'**********'
var url_jinji =　"https://docs.google.com/spreadsheets/d/" + file_jinji + "/edit";
//総務管理マスタ
var file_soumu = '**********'
var url_soumu =　"https://docs.google.com/spreadsheets/d/" + file_soumu + "/edit";
//契約書管理マスタ
var file_keiyaku = '**********'
var url_keiyaku =　"https://docs.google.com/spreadsheets/d/" + file_keiyaku + "/edit";
    

function doGet(e) {
  var page = e.parameter["p"];
  if( page == "index" || page == null ){
    var tpl = HtmlService.createTemplateFromFile('index'); 
//    return tpl.evaluate(); 
    return tpl.evaluate().setTitle('社内管理システム'); 
  }
  else if( page == "memberinfo" ) {
    var tpl = HtmlService.createTemplateFromFile(page); 
    var s = e.parameter.s; //?s=の形でURLに後ろついたパラメータを受け取る。 
    tpl.s = s; //sをindexhtmlに渡す。 
    return tpl.evaluate();
  }
  else {
    var tpl = HtmlService.createTemplateFromFile(page); 
    return tpl.evaluate();
  }
}

function getData(id,sheetname){
  if( id == "jinji" ){ var SPREAD_ID = file_jinji; } 
  else if( id == "soumu" ){ var SPREAD_ID = file_soumu; } 
  else if( id == "keiyaku" ){ var SPREAD_ID = file_keiyaku; } 
  ss = SpreadsheetApp.openById(SPREAD_ID);
//  var ss = SpreadsheetApp.getActive();
  var values = ss.getSheetByName(sheetname).getDataRange().getDisplayValues();
  return values;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

contract.html

<!DOCTYPE html>
<html lang="ja">
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('_stylesheet').getContent(); ?>
</head>
<body>

<section id="header">
<h1>契約書一覧</h1>
</section><!-- #header -->

<section id="contents">
  
<form action="#">
  <input type="text" name="search" value="" id="id_search" />
</form>

<table id="result">
<?
  var id = "keiyaku"; 
  var sheet = "シート1";
  var data = getData(id,sheet);
  output.append('<thead>')
  output.append('<tr>'); for(var j=0;j<=20;j++){  output.append('<th>' + data[0][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=1;i<data.length;i++){ output.append('<tr>'); for(var j=0;j<=20;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }
  
  var sheet = "シート2";
  var data = getData(id,sheet);
  for(var i=1;i<data.length;i++){ output.append('<tr>'); for(var j=0;j<=20;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }
  
  var sheet = "シート3";
  var data = getData(id,sheet);
  for(var i=1;i<data.length;i++){ output.append('<tr>'); for(var j=0;j<=20;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }
  
  var sheet = "シート4";
  var data = getData(id,sheet);
  for(var i=1;i<data.length;i++){ output.append('<tr>'); for(var j=0;j<=20;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }
  output.append('</tbody>')
?>
</table>

</section><!-- #contents -->

<section id="footer">
</section><!-- #footer -->

<?!= HtmlService.createHtmlOutputFromFile('_javascript').getContent(); ?>
</body>
</html>

corporegist.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <base target="_top">
  <?!= HtmlService.createHtmlOutputFromFile('_stylesheet').getContent(); ?>
</head>
<body>

<section id="header">
<h1>データ読み込み</h1>
</section><!-- #header -->

<section id="contents">

<h2></h2>

<? var id = "soumu"; var sheet = "謄本等"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<form action="#">
  <input type="text" name="search" value="" id="id_search" />
</form>

<table id="result">
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=2;i<data.length;i++){ output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }
  output.append('</tbody>')
?>
</table>

</section><!-- #contents -->

<section id="footer">
</section><!-- #footer -->

<?!= HtmlService.createHtmlOutputFromFile('_javascript').getContent(); ?>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('_stylesheet').getContent(); ?>
</head>
<body>

<section id="header">
<h1>社内システム</h1>
</section><!-- #header -->

<section>
<h2 style="margin-bottom:10px;">メニュー</h2>
  <ul>
    <li><a href="<?= url ?>?p=memberlist" target="_blank">メンバーリスト</a></li>
    <li><a href="<?= url ?>?p=memberinfo" target="_blank">メンバー情報</a></li>
    <li><a href="<?= url ?>?p=corporegist" target="_blank">謄本等</a></li>
    <li><a href="<?= url ?>?p=contract" target="_blank">契約書</a></li>
    <li><a href="<?= url ?>?p=change" target="_blank">ステータス変更</a></li>
  </ul>
</section><!-- #contents -->

<section>
<h2 style="margin-bottom:10px;">スプレッドシート</h2>
  <ul>
    <li><a href="<?= url_main ?>" target="_blank">システムマスタ</a></li>
    <li><a href="<?= url_jinji ?>" target="_blank">人事管理マスタ</a></li>
    <li><a href="<?= url_soumu ?>" target="_blank">総務管理マスタ</a></li>
    <li><a href="<?= url_keiyaku ?>" target="_blank">契約書管理マスタ</a></li>
  </ul>
</section><!-- #contents -->

<section id="footer">
</section><!-- #footer -->

<?!= HtmlService.createHtmlOutputFromFile('_javascript').getContent(); ?>
</body>
</html>

memberinfo.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('_stylesheet').getContent(); ?>
</head>
<body>

<section id="header">
<p style="text-align:right;font-size:small;"><a href="<?= url ?>">トップページ</a></p>
<h1>データ読み込み</h1>
</section><!-- #header -->

<section>

<form>
<!-- <select onChange="top.location.href=value"> -->
<select name="sel" class="select">
<option value="">氏名を選択</option>
<?
   var id = "jinji";
   var sheet = "マスタ情報";
   var data = getData(id,sheet);
   for(var i=3;i<data.length;i++){ if(data[i][3] === "在職中"){ output.append('<option value="' + url + '?p=memberinfo&s=' + data[i][1] + '">' + data[i][1] + '</option>');}}
?>
</select>
<input type="button" onClick="top.location.href=sel.value" value="移動">
</form>

</section>

<section id="contents">

<h2><?= s ?>さんの情報</h2>

<? var id = "jinji"; var sheet = "マスタ情報"; ?>
<h3><?= sheet; ?></h3>

<? var data = getData(id,sheet); ?>

<table id="table">
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<10;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<10;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=10;j<20;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=10;j<20;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=20;j<26;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=20;j<26;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>


<? var id = "jinji"; var sheet = "ステータス変更"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<14;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<14;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

<h4>産休・育休</h4>


<? var id = "jinji"; var sheet = "賞与関係"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>


<? var id = "jinji"; var sheet = "従業員番号"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>


<? var id = "jinji"; var sheet = "履歴書"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<9;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

<? var id = "jinji"; var sheet = "連絡先"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<5;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<5;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

<h4>住所</h4>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=5;j<11;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=5;j<11;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=11;j<17;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=17;j<23;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

<h4>緊急連絡先</h4>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=24;j<31;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=24;j<31;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=31;j<38;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=38;j<45;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=45;j<52;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

<? var id = "jinji"; var sheet = "扶養関係等"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<10;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<10;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>


<? var id = "jinji"; var sheet = "資格免許等"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<7;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<7;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>


<? var id = "jinji"; var sheet = "評価関係"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<11;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<11;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>


<? var id = "jinji"; var sheet = "社外研修"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<table>
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<7;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=0;i<data.length;i++){ if(data[i][1] === s){ output.append('<tr>'); for(var j=0;j<7;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }}
  output.append('</tbody>')
?>
</table>

</section><!-- #contents -->

<section id="footer">
</section><!-- #footer -->

<?!= HtmlService.createHtmlOutputFromFile('_javascript').getContent(); ?>
</body>
</html>

memberlist.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('_stylesheet').getContent(); ?>
</head>
<body>

<section id="header">
<h1>データ読み込み</h1>
</section><!-- #header -->

<section id="contents">

<h2></h2>

<? var id = "jinji"; var sheet = "マスタ情報"; ?>
<h3><?= sheet ?></h3>

<? var data = getData(id,sheet); ?>

<form action="#">
  <input type="text" name="search" value="" id="id_search" />
</form>

<table id="result">
<?
  output.append('<thead>')
  var i=1; output.append('<tr>'); for(var j=0;j<20;j++){  output.append('<th>' + data[i][j] + '</th>'); } output.append('</tr>');
  output.append('</thead>')
  output.append('<tbody>')
  for(var i=2;i<data.length;i++){ output.append('<tr>'); for(var j=0;j<20;j++){  output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }
  output.append('</tbody>')
?>
</table>

</section><!-- #contents -->

<section id="footer">
</section><!-- #footer -->

<?!= HtmlService.createHtmlOutputFromFile('_javascript').getContent(); ?>
</body>
</html>