課題

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

解決策

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;

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

コード.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;
  });
}

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>

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>

処理の流れ

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

アウトプット

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

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

課題

解決策