glideappとGASでつくるかんたんテスト端末貸出ツール

0.はじめに

テストデバイスってどんどん増えていって、誰が使っているかわかんなくなりますよね。
そんなときにデバイス貸出ツールをlowcodeで作ってみたいと思います
材料は

• glideapps
• Google spreadsheet
• GAS

です

1.データの準備

お手持ちのテスト端末を元に
Spread Sheetを用意し
下記をコピペして"devices"というシートに保存してください
(

• 中身は適宜変更してください
• imagesはわかりやすいようにデバイスの写真をとるなりしておくといいでしょう
  )

platform	version	id	vendor	device	Image	user	qrcode	api
iOS	8.4.1	1	Apple	iPhone 6
iOS	10.2.1	2	Apple	iPhone 6S
iOS	12.4.1	3	Apple	iPad mini 2
iOS	13.3	5	Apple	iPhone 7
...	...	...	...	...

このシートが作成し終わったら "history"というシートを空で用意してください

2. GAS を作成

Code.gsを　下記に書き換える
[Your spread sheet] を　このスプレッドシートのID
[Your glide app]を後ほど作成する glideappのID

function doGet(e) {
  //parameter validation
  if(!e || !e.parameter || !e.parameter.id){
    return redirect();
  }
  var user           = Session.getActiveUser().getEmail();
  var devices        = SpreadsheetApp.openById("[Your spread sheet]").getSheetByName("devices");
  var history        = SpreadsheetApp.openById("[Your spread sheet]").getSheetByName("history");
  var historyLastRow = history.getDataRange().getLastRow();
  var values         = devices.getDataRange().getValues();
  var headers        = values.shift();
  
  var idColumn   = -1;
  var userColumn = -1;
  var targetRow  = -1;
  
  //find id column and user column
  headers.forEach(function(header,i){
    if(String(header) == "id"){
      idColumn = i;
    }else if(String(header) == "user"){
      userColumn = i;
    }
  });
  
  //find target row
  values.forEach(function(value,i){
    if(e.parameter.id == value[idColumn]){
      targetRow = i;
    }
  });
  
  //validate
  if(idColumn == -1 || userColumn == -1 || targetRow == -1){
    return redirect();
  }
  
  //edit the sheet
  var range = devices.getRange(targetRow+2,userColumn+1);
  if(range.getValue() == user){
    range.setValue("");
    range.setBackground("white");
    history.insertRowAfter(historyLastRow);
    history.getRange(historyLastRow+1,1,1,4).setValues([[
      e.parameter.id,user,(new Date()).toLocaleString(),"RETURN"
    ]]);
  }else if(range.getValue() == ""){
    range.setValue(user);
    range.setBackground("red");
    history.insertRowAfter(historyLastRow);
    history.getRange(historyLastRow+1,1,1,4).setValues([[
      e.parameter.id,user,(new Date()).toLocaleString(),"LOAN"
    ]]);
  }
  return redirect();
}

//redirect to glideapp
function redirect(){
  return HtmlService.createHtmlOutput(
    "<script>window.top.location.href='https://[Your glide app].glideapp.io/';</script>"
  );
}

3.GASをDeploy

Publish -> Deploy as web app

Deployはこのように設定しましょう

• Execute the app:User accessing the web app
• Who has access to the app: Anyone

Deployしたら
https://script.google.com/macros/s/XXXXXX/exec
の部分をメモる

4. Spread Sheetの apiとqrcode を作る

apiの部分は

=CONCAT("https://script.google.com/macros/s/XXXXXX/exec?id=",C2)

qrcodeは qrserver.com を使って下記のようにする

=CONCAT("https://api.qrserver.com/v1/create-qr-code/?data=",ENCODEURL(I2))

5. glideappを作る

https://go.glideapps.com/
から "From Google Sheet" を選択

すみません glideはなかなか説明しづらいので
デモで見てみてください