【Google Apps Script】複製貼上讓試算表變身成網頁表格秀爆你的客戶朋友！

直接把整個試算表連結發給別人除了要載入很久且會出現一堆不需要的按鍵，整個畫面很醜很沒有質感。而且如果你把其他隱私的資料也放在裡面，都會被一次看光光。那我們就來幫試算表包個糖衣吧

當你要分享表格給其他人看時，使用 Google 試算表把連結貼給別人是一個簡單快速的方法。除了可以套各種公式，修改資料會馬上同步，也可以開設權限讓其他人一起編輯。

罷特如果只是要給別人看資料比如說客戶名單、訂單資訊、直接把整個試算表連結發給別人除了要載入很久且會出現一堆不需要的按鍵，整個畫面很醜很沒有質感。而且如果你把其他隱私的資料也放在裡面，都會被一次看光光。試算表不難看但沒什麼質感

怎麼辦？幫它抹上一層糖衣！

我們來做一個超簡單的小網頁讓它自己去表格抓你要的資料來顯示。我們會寫一些程式 (HTML,CSS,Js）不過如果你不會也沒關系 w 只要跟著步驟複製貼上就可以了。今天我要來幫我的畫家朋友薩波來做一個網站讓他的委託人可以查看他畫圖的進度，還要讓電腦排序讓已經完成的委託排在下面。

💬 Note

薩波委託進度

開發者：毛哥EM(我) 類型：網站網址：毛哥EM 的基地

架一個網站！

你可以使用任何一個可以給你存放網站程式的地方，比如說GitHub。

我從Codepen上找到了一個很好看的表格模板來做修改。它在螢幕尺寸太窄的時候會用不同的版面來顯示，保持使用者體驗。你也可以找其他的模板或者是自己建立一個。

See the Pen Responsive Tables using LI by Faiz Ahmed (@faaezahmd) on CodePen.

我在網站上增加了一點文字、顏色 (CSS)、超連結 (<a>)、還有圖片、縮圖。以及簡單的出場動畫 (animate.css)~~來炫技~~。

HTML

<!doctype html><head>	    	<meta charset="utf-8" />	<!--下面這行是標題-->	    	<title>薩波進度查詢表</title>	    	<meta name="viewport" content="width=device-width, initial-scale=1" />	<!--下面這行是縮圖，可以換網址-->	    	<link href="https:/elvismao.com/code/sabooo/thumbnail.webp" rel="icon" type="image/x-icon" />	    	<link rel="stylesheet" type="text/css" href="https:/g.elvismao.com/css/Animate.css" media="screen" />	<!--下面這行是主題顏色，可以自由更換（支援 HEX）-->	    	<meta name="theme-color" content="orange" />	    	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>	<!--下面這些是樣式，可以自由更換顏色之類的-->	    	<style>		        @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);		        body {		            font-family: "Arial","cwTeXYen","微軟正黑體";		            background-color: #fee5bd;		        }		        .container {		            max-width: 1000px;		            margin-left: auto;		            margin-right: auto;		            padding-left: 10px;		            padding-right: 10px;		            font-size: 25px;		        }		        h2 {		            font-size: 23px;		            margin: 0;		            text-align: center;		            font-weight: 150;		            color: #e69137;		            animation: fadeIn;		            animation-duration: 1.5s;		            animate-delay: 0.9s;		        }		        h1 {		            font-size: 35px;		            margin: 20px 0 0 0;		            text-align: center;		            size: 30px;		            color: #351c75;		            animation: zoomIn;		            animation-duration: 1s;		        }		        li {		            border-radius: 3px;		            padding: 25px 30px;		            display: flex;		            justify-content: space-between;		            margin-bottom: 25px;		        }		        .responsive-table .table-header,		        .table-note {		            background-color: #f9a756;		            font-size: 30px;		            margin-top: 0px;		            padding: 25px 30px 25px 30px;		            animation: slideInUp;		            animation-duration: 1.5s;		        }		        .table-note {		            font-size: 20px;		            display: none;		        }		        .responsive-table {		            margin: 0;		            padding: 0;		        }		        .responsive-table .table-row {		            background-color: #fff;		            box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);		            animation: backInLeft;		            animation-duration: 1.5s;		        }		        .table-row{}		        .responsive-table .col-1 {		            flex-basis: 25%;		        }		        .responsive-table .col-2 {		            flex-basis: 30%;		        }		        .responsive-table .col-3 {		            flex-basis: 30%;		        }		        .responsive-table .col-4 {		            flex-basis: 15%;		        }		        @media all and (max-width: 767px) {		            .responsive-table .table-header {		                display: none;		            }		            .table-note {		                display: block;		            }		            .responsive-table li {		                display: block;		            }		            .responsive-table .col {		                flex-basis: 100%;		            }		            .responsive-table .col {		                display: flex;		                padding: 10px 0;		            }		            .responsive-table .col:before {		                color: #6c7a89;		                padding-right: 10px;		                content: attr(data-label);		                flex-basis: 50%;		                text-align: right;		            }		        }		        .header {		            width: 150px;		            display: block;		            margin: auto;		            animation: slideInUp;		            animation-duration: 1.5s;		        }		        .finished {		            color: green;		        }		        p,		        a {		            text-align: center;		            font-size: 15px;		            color: #6c7a89;		            text-decoration: none;		            animation: fadeIn;		            animation-duration: 1.5s;		        }		    	</style></head><body>	    	<div class="container">		        		<h1>薩波 2022 委託與贈圖表</h1>		        		<h2>這些不代表畫的順序 會跳著畫</h2>		        		<img src="header.png" class="header" />		        		<li class="table-note">            如果要一次看完整表格請切換到電腦版網頁喔         </li>		        		<ul class="responsive-table">			            			<li class="table-header">				                				<div class="col col-1">委託人姓名</div>				                				<div class="col col-2">委託項目</div>				                				<div class="col col-3">付款狀態</div>				                				<div class="col col-4">進度狀態</div>				            			</li>			            資料載入中         		</ul>		<p>			<a href=""></a>			· Facebook			<a href="https://instagram.com/">Instagram</a>			<br />			Made by 			<a href="https://github.com/elvisdragonmao">Edit Mr.</a>			 with❤		</p>		    	</div></body>

後端 GAS! GAS!

好了前端做好了接下來我們來建另一個網站讓剛才那個網站來這裡讀取資料。為了方便起見我們在給資料的時候直接給一個做好的表格讓網站貼上。

我們先看一下試算表。在這裡我們可以看到每一行資料有 5 項，其中我希望第 5 項的資料可以放在付款狀態後面。現在請你先請你複製這個試算表的 ID，也就是網址https://docs.google.com/spreadsheets/d/和/之間那一串 (如1fjX-prGu0hfb65LCQkrktWa-JavvjSz7tWMmYWAb7RA)。等一下會用到。

我們會使用 Google Apps Script 來建立網頁應用程式來讀取表格資料。

💬 Note