Skip to content

Instantly share code, notes, and snippets.

@sam-ple

sam-ple/_javascript.html Secret

Last active March 22, 2019 08:50
Show Gist options
  • Save sam-ple/e1e948ed1c68e54352cf4b94c8f4062a to your computer and use it in GitHub Desktop.
Save sam-ple/e1e948ed1c68e54352cf4b94c8f4062a to your computer and use it in GitHub Desktop.
Download ZIP
会食アプリ
Raw
_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.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></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 src="https://************/jquery.ex-table-filter.js"></script>
<script type="text/javascript">
//$(function(){$('input#id_search').quicksearch('table tbody tr');});
$(function(){$("#result").tablesorter();});
$('table.data').exTableFilter({
filters : {
0 : {
append : {
to : 'div.filter0',
type : 'select'
}
},
2 : {
append : {
to : 'div.filter2',
type : 'select'
}
},
}
});
</script>
Raw
_stylesheet.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="apple-touch-icon" href="" />
<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; padding: 20px; }
table { width: 100%; table-layout: fixed; word-break: break-all; word-wrap: break-all; }
td, th { font-size:0.8em; border: 1px solid #ccc; padding: 10px; }
thead { background: #fcfcfc; }
input { width:100%; margin-bottom:20px; border: 5px solid #eee; font-size:16px; }
.table td:first-child { background: #fbf5f5; }
@media screen and (max-width: 896px) {
input { width:100%; margin-bottom:20px; height:50px; border: 5px solid #eee;}
input[type=text] { font-size: 16px; transform: scale(0.8); }
.table { width: 100%; font-size: 16px; }
.table .thead { display: none; }
.table tr { width: 100%; }
.table td { display: block; text-align: right; width: 100%; }
.table td:first-child { background: #e9727e; color: #fff; font-weight: bold; text-align: center; }
.table td:before { content: attr(data-label); float: left; font-weight: bold; margin-right: 10px; }
}
-->
</style>
Raw
code.gs
function doGet(e) {
var tpl = HtmlService.createTemplateFromFile('index');
return tpl.evaluate().setTitle('会食アプリ').setFaviconUrl('https://drive.google.com/uc?id=********&.png').addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function getData(sheetname){
var ss = SpreadsheetApp.getActive();
var values = ss.getSheetByName(sheetname).getDataRange().getDisplayValues();
return values;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('_stylesheet').getContent(); ?>
</head>
<body>
<!--<input type="text" name="search" value="" id="search" />-->
<h5>店舗名</h5>
<div class="filter0"></div>
<h5>格付け</h5>
<div class="filter2"></div>
<table id="result" class="table data">
<?
var sheet = "会食リスト";
var data = getData(sheet);
output.append('<thead class="thead">')
output.append('<tr>'); for(var j=0;j<=14;j++){ output.append('<th>' + data[2][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<=5;j++){ output.append('<td>' + data[i][j] + '</td>'); } output.append('</tr>'); }
for(var i=3;i<data.length;i++){
output.append('<tr>');
output.append('<td data-label="店舗名">' + data[i][0] + '</td>');
output.append('<td data-label="No">' + data[i][1] + '</td>');
output.append('<td data-label="格付">' + data[i][2] + '</td>');
output.append('<td data-label="ジャンル">' + data[i][3] + '</td>');
output.append('<td data-label="エリア">' + data[i][4] + '</td>');
output.append('<td data-label="住所"><a href="https://maps.google.co.jp/maps?q=' + data[i][5] + '" target="_blank">' + data[i][5] + '</a></td>');
output.append('<td data-label="電話">' + data[i][6] + '</td>');
output.append('<td data-label="URL"><a href="' + data[i][7] + '" target="_blank">' + data[i][7] + '</a></td>');
output.append('<td data-label="個室">' + data[i][8] + '</td>');
output.append('<td data-label="予算">' + data[i][9] + '</td>');
output.append('<td data-label="定休日">' + data[i][10] + '</td>');
output.append('<td data-label="営業時間">' + data[i][11] + '</td>');
output.append('<td data-label="喫煙">' + data[i][12] + '</td>');
output.append('<td data-label="備考">' + data[i][13] + '</td>');
output.append('<td data-label="訪問履歴">' + data[i][14] + '</td>');
output.append('</tr>');
}
output.append('</tbody>')
?>
</table>
<?!= HtmlService.createHtmlOutputFromFile('_javascript').getContent(); ?>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment