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 を作成
![Screenshot 2020-03-01 at 21.14.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/cfde4b8d-c12d-623f-6c46-ddfeceef92d7.png)

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

```javascript
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
![Screenshot 2020-03-01 at 21.18.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/e558f15b-2c30-8b8d-f510-8cd841eb4057.png)

Deployはこのように設定しましょう
- Execute the app:User accessing the web app
- Who has access to the app: Anyone

![Screenshot 2020-03-01 at 21.49.30 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/a61f105f-0a5f-8343-d321-2ce6689c6273.png)


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" を選択

![Screenshot 2020-03-01 at 21.25.32 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/ac64bb1c-d71a-e7ab-0936-56dcbad79173.png)

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

https://rental-device-tool.glideapp.io/

![ezgif-1-6a420e1ed3e4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/348f5f4f-da2d-44a0-5d27-3127ab74108d.gif)