G Suite（Google Apps Script）とVue.jsとSpreadsheetによる、アクセスユーザーに関連するデータを表示させるツール

# 課題
アクセスしたユーザーを特定してそのユーザーごとに表示されるデータを制御したい。

# 解決策
- Spreadsheetに、メールアドレスをキーにして行データを記述。
- Google Apps Scriptを使ってSpreadsheetのデータを読み込む。
- アクセスしたユーザーのメールアドレスを取得。
- メールアドレスをキーにして、読み込んだデータを検索して、ヒットした行データを抽出。
- 抽出したデータをVueのdataに格納し、Vue経由でHTMLに返却して表示。

# 利用サービス
- Spreadsheet
- Google Apps Script
- Vue.js

# 設定例
## Spreadsheet
###### Spreadsheetのファイル設定例
 
| SpreadsheetID | SheetName |
|:-----------------|:-----------------|
| 123456789012345678901234567890123456789012345 | UserList |

###### Spreadsheetのデータセット例

| ID | Name | Department |
|:-----------------|:-----------------|:-----------------|
| xxx@test.com           | xxx           | Sales           |
| yyy@test.com           | yyy           | Development           |
| zzz@test.com           | zzz           | Marketing           |

※IDのうち１行は、デプロイしたアプリケーションにアクセスするユーザーのメールアドレスを入力しておく。


## Google Apps Script + Vue.js

以下の項目は、SpreadsheetおよびそのSheetNameを変数にセットする箇所のため、
読み込みたいファイル設定に合わせて書き直す。


- var SSID = "123456789012345678901234567890123456789012345";
- var SN = "UserList;

※それぞれ""の中を書き換える。

```ruby:コード.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  return html;
}


function getSS(spreadSheetID, sheetName){

  var res = SpreadsheetApp.openById(spreadSheetID)
    .getSheetByName(sheetName).getDataRange().getDisplayValues();
  
  var keys = res.splice(0, 1)[0];
  
  return value = res.map(function(row) {
    var obj = {}
    row.map(function(item, index) {
      obj[keys[index]] = item;
    });
    return obj;
  });
}


function getUserList() {
  
  var SSID = "123456789012345678901234567890123456789012345";
  var SN = "UserList";
  
  var userList = getSS(SSID, SN);
  Logger.log(userList);
  
  return userList; 
}


function getUserData() {
  var email = Session.getActiveUser().getEmail();
    
  var userList = getUserList();
  
  return filterdData = userList.filter(function(item, index){
    if (item.ID == email) return true;
  });
}
```

```ruby:vue.html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<script>  
  var app = new Vue({
    el: '#app',
    data: {
      loginUserEmail: '',
      logoinUserName:'',
      logoinUserDept:'',
    },
    methods:{
      setLoginUser: function(loginUser){
        this.loginUserEmail = loginUser[0].ID;
        this.logoinUserName = loginUser[0].Name;
        this.logoinUserDept = loginUser[0].Department; 
      },           
    },
    created: function(){
      google.script.run
        .withSuccessHandler(this.setLoginUser).getUserData ();
    },
  })
</script>
```


```ruby:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="app">
    <p>User Data</p>
    
    <ul>
      <li>{{  loginUserEmail  }}</li>
      <li>{{  logoinUserName  }}</li>
      <li>{{  logoinUserDept  }}</li>
    </ul>
  
  </div>
  </body>
  <?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>
</html>
```

# 処理の流れ
1. [コード.gs] `doGet()` …引数に指定されたHTMLを返却する。この場合は、[index.html]が返却される。
2. [index.html]`<?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>`…［vue.html］が読み込まれる。
3. [vue.html] `created`…gs内のメソッドが起動。
4. [コード.gs]`getUserData ()`…（1）アクセスしたユーザーのメールアドレスを取得（2）Spreadsheetのデータを取得（3）メールアドレスと一致する行データを取得
5. [vue.html] `methods:setLoginUser`…行データをvueのdataに格納
6. [index.html] `{{  loginUserEmail  }}{{  logoinUserName  }}{{  logoinUserDept  }}`…HTMLに表示

# アウトプット
アプリケーションにアクセスすると、アクセスしたユーザーのメールアドレスに該当するデータが表示される。
例えば、アクセスユーザーのメールアドレスが［xxx@test.com］の場合、
［xxx@test.com］［xxx］［Sales］のデータがHTMLに表示される。