gasでQRコード資材管理の続き

だいぶ前ですが、QRコードで資材管理のGASを紹介しましたが、更に、HTMLで誰でも今の在庫数を確認できるようになる方法があったので、紹介します。ちなみに、参考となったブログはこちら

(Googleスプレッドシートで作る用語集アプリ)

前回の投稿

前回のgasの中で、資材の変化なしに再度更新すると、数字が消える現象があったので、if文を追加しました。最終行は1を入力しない。最後だけ取得すればいい感じもしてきたけど。

黄色部分が追加分

今回は、下記のような画面を表示できるようになります。

検索する場合は、品名で検索かけれます。

元々のブログで検索機能があったので、そのまま使いました。

ブログのままでは、今のコードにあっていなくて、動かなかったので、一部修正はしました。

最初、数字の検索をかけていて、どうにかできないかと思ったのですが、ちょっと無理でした。replaceを使用しているので、文字列しか操作できなくて、数字を文字列に変えたりを試みましたが、勉強不足で無理でした。もうちょっと頑張りたいと思います。

時間もアメリカ東部標準時刻になっているので、形式も含めて変えたですよね。

今後、変えれるように頑張ってみよう。

あと、スプレッドシートで見る形になっていたので、変化あったら、更新するようにトリガーいれないと、在庫数が最新ではない不具合が生じますね。最終更新日を追加する必要がありそうです。

今回、この形式を作れるようになったので、見た目はシンプルですが、いろいろと使えそうな気がしてきました。今、Pythonもちょっと初めているので、読めるようにはなりたいですね。

気象庁のデータとかの解析はしてみたいです。がんばるぞー!

参考にコード等を載せておきます。

今回、index.htmlとsearch.gsを追加

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 {
            '&': '&amp;',
            "'": ''',
            '`': '`',
            '"': '&quot;',
            '<': '&lt;',
            '>': '&gt;',
            }[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件のフィードバック

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中