だいぶ前ですが、QRコードで資材管理のGASを紹介しましたが、更に、HTMLで誰でも今の在庫数を確認できるようになる方法があったので、紹介します。ちなみに、参考となったブログはこちら。
（Googleスプレッドシートで作る用語集アプリ）
前回のgasの中で、資材の変化なしに再度更新すると、数字が消える現象があったので、if文を追加しました。最終行は1を入力しない。最後だけ取得すればいい感じもしてきたけど。
今回は、下記のような画面を表示できるようになります。
検索する場合は、品名で検索かけれます。
元々のブログで検索機能があったので、そのまま使いました。
ブログのままでは、今のコードにあっていなくて、動かなかったので、一部修正はしました。
最初、数字の検索をかけていて、どうにかできないかと思ったのですが、ちょっと無理でした。replaceを使用しているので、文字列しか操作できなくて、数字を文字列に変えたりを試みましたが、勉強不足で無理でした。もうちょっと頑張りたいと思います。
時間もアメリカ東部標準時刻になっているので、形式も含めて変えたですよね。
今後、変えれるように頑張ってみよう。
あと、スプレッドシートで見る形になっていたので、変化あったら、更新するようにトリガーいれないと、在庫数が最新ではない不具合が生じますね。最終更新日を追加する必要がありそうです。
今回、この形式を作れるようになったので、見た目はシンプルですが、いろいろと使えそうな気がしてきました。今、Pythonもちょっと初めているので、読めるようにはなりたいですね。
気象庁のデータとかの解析はしてみたいです。がんばるぞー！
参考にコード等を載せておきます。
index.htmlの中身
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<style>
#header-fixed{
border: 5px solid #fff; /* 表示領域を白枠で囲う */
position: fixed; /* ヘッダーの固定 */
padding:10px 0 10px; /* 上10px、下20pxをあける */
top: 0px; /* 位置(上0px) */
left: 10px; /* 位置(右0px) */
width: 100%; /* 横幅100% */
height:50px; /* 縦幅50px */
background-color:#FFF /* バックの色 */
}
#content{
top: 70px; /* 位置(上0px) */
left: 10px; /* 位置(右0px) */
padding:60px 0 0px;
width: 100%; /* 横幅100% */
background-color: "#000000" /* バックの色 */
}
#menu{
font-size : 15px;
border : 1px;
padding : 10px 20px 0px 0px;
}
table.search {
border: solid 1px #000000;
border-collapse: collapse;
}
</style>
<div id='header-fixed'>
<form name="serchForm" action="https://script.google.com/macros/s/アプリケーションID/exec?name=search">
<a id='menu' href="https://script.google.com/macros/s/アプリケーションID/exec">全件表示</a>
検索文字：<input type="text" width="30%" name="searchWord" required>
<input type="submit">
<font size="1px"> 現在の時刻：<span id="clock_time"></span></font>
</form>
<script>
function clock()
{
// 現在日時を表すインスタンスを取得
var now = new Date();
var dateTime = now.getTime();
var year = now.getFullYear();
var month = now.getMonth()+1;
var day = now.getDate();
var h = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
document.getElementById("clock_time").innerHTML = year + "年" + month + "月" + day + "日 " + h + "時" + mi + "分" + s + "秒";
}
setInterval(clock, 1000);
</script>
</div>
<div id='content'>
<ul>
<?
// シートからを表示する
var id ='[https://docs.google.com/spreadsheets/d/スプレッドシートID/edit#gid=0]';
var mySheet = SpreadsheetApp.openById('スプレッドシートID').getSheetByName("シート1");
var endrow = mySheet.getLastRow();
var myData = mySheet.getRange(2, 1 , endrow-1 , 3).getValues();
myMail = Session.getActiveUser().getEmail();
search = getSearch();
output._=('検索文字='+ escape_html(search));
output._=('<table class="search" border="1">');
output._=('<tr bgcolor="#aaccff"><th>品名</th><th>最終使用年月日</th><th>個数</th><th>検索</th></tr>');
y=0; //検索結果のカウンタ
for(var i=0;i<myData.length;i++){
category = myData[i][0];
end_time = myData[i][1];
lot_number = myData[i][2];
url = myData[i][3];
if(search !== undefined){
if (String(category).indexOf(search) !== -1){
replace = category.replace(search, '<font color="#ff0000" size="2px"><b>' + search + '</b></font>');
output._=('<tr>');
output._=('<td width="10%" valign="top"><font color="#000000" size="2px">'+ replace +'</font></td>');
output._=('<td width="20%" align="left" valign="top"><font size="2px">'+ end_time +'</font></td>');
output._=('<td valign="top"><font style="bold" size="2px" color="#000000">'+ lot_number +'</font></td>');
output._=('<td valign="top"><font style="bold" size="2px" color="#000000">'+ search +'</font></td>');
output._=('</tr>');
y ++;
}
}else{
output._=('<tr>');
output._=('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
output._=('<td width="20%" align="left" valign="top"><font color="#000000" size="2px">'+ end_time +'</font></td>');
output._=('<td valign="top"><font style="bold" size="2px" color="#000000">'+ lot_number +'</font></td>');
output._=('<td valign="top"><font style="bold" size="2px" color="#000000">'+ search +'</font></td>');
output._=('</tr>');
}
}
output._=('</table>');
if (y == 0){
output._=('検索できませんでした。キーワードを変えてもう一度検索してください。');
}
?>
<?
function escape_html (string) {
if(typeof string !== 'string') {
return string;
}
return string.replace(/[&'`"<>]/g, function(match) {
return {
'&': '&',
"'": ''',
'`': '`',
'"': '"',
'<': '<',
'>': '>',
}[match]
});
}
?>
</ul>
</div>
</body>
</html>
search.gaの中身
search = "";
var id ='[スプレッドシートのURL]';
var sheet = SpreadsheetApp.openById('スプレッドシートID').getSheetByName("シート1");
function doPost(e){
doGet(e);
return HtmlService.createTemplateFromFile("index").evaluate();
}
function doGet(e) {
search = e.parameter.searchWord;
if (e.parameter.name == undefined) {
//初期表示はビューのみ
return HtmlService.createTemplateFromFile("index").evaluate();
}
if (e.parameter.searchWord !== undefined) {
//検索時も同じ画面に返します
return HtmlService.createTemplateFromFile("index").evaluate();
}
}
function getSearch(){
return search;
}いろんなものを皆さんが、公開してくれるので、面白いものですね。
ブログ、なんとか続けてる 
“gasでQRコード資材管理の続き” への1件のフィードバック