サーバー側とクライアント側のJavaScriptでデータを連携する
Google App ScriptはGoogleのサーバー内で動作します。
つまり、JavaScriptを埋め込んだHTMLをユーザーのPCブラウザに渡して何かしらの処理をブラウザ上でさせることができます。
上記の画像のようにGoogle App Scriptではクライアント側とサーバー側とで相互に連携をさせて動作をさせることができます。
クライアント側でJavaScriptができること
クライアント側でJavaScriptを使ってユーザーのブラウザ上で動作させることができるのは以下の内容です。
- Webページやその要素に動きをつける
- ページを切り替えずに表示の一部を更新する
- リアルタイムに入力値のチェックや計算を行う
- Webページで発生したイベントを受けて処理を呼び出す
Vue.jsを使えばよりリッチな表現のアプリケーションを作ることができます。
サーバー側でJavaScriptができること
今回、DBをスプレッドシートにしてフロント側からスプレッドシートに記載されているデータを読み出しを行います。
DBをスプレッドシートにすることによって社内ツールなど簡単なものはお金をかけずにアプリとして構築することができます。
Google App Scriptのプロジェクトを用意する
まずはスプレッドシートを用意して連携したGoogle App Scriptを作ります。
そしてGoogle App Scriptにhtmlを表示する処理を書いてindex.htmlを作成します。
// main.gs
const doGet = () => {
var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput
.setTitle('GAS+Vue.js')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
return htmlOutput;
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
</body>
</html>
このように書いたらデプロイから公開ウェブアプリケーションとしてデプロイすると、ウェブアプリのURLが表示されるのでブラウザで開くと先ほどのHTMLが表示されるようになります。
index.htmlのbodyには何も書いていないのですがこのように表示されます。
vue.jsを使えるようにする
HTMLを表示できるようになったのでVue.jsを使えるようにしていきます。
GASでVuetifyを使う場合はVuetifyのCDNを読み込む必要がありますが、最新バージョンを使うので公式サイトから最新バージョンのCDNを確認していきます。
これでvue.jsを使えるようになったのでindex.htmlを下記のように書き換えます。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>
次にGoogle App Scriptから追加してjs.htmlを作成していきます。
css.htmlもデフォルトテンプレートで良いので作らないとエラーが出るので作っていきます。
<!-- js.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
<!-- css.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
</body>
</html>
これで下記のようにメッセージが表示されたと思います。
クライアント側Javascriptからサーバー側の関数を呼び出す
現在はmain.gsのURLリクエストによってdoGet関数が動作し、ユーザーのブラウザいにindex.htmlを元にしたWebページが表示されています。
ここからスプレッドシート情報を参照していきます。
このようにするためにはクライアント側のJavaScriptがユーザーのブラウザに展開された時点で、何らかの方法でサーバー側のGASの処理を呼び出す必要があります。
クライアント側のJavaScriptからのサーバー側の関数を呼び出すにはgoogle.script.runオブジェクトを使う
Google App Scriptを使うにはクライアントからサーバー側の関数を呼び出すためのオブジェクトであるgoogle.script.runを使っていきます。
google.script.runの使い方
google.script.run.関数(引数1, 引数2, ....)
関数はサーバー側のgsファイルに記述された関数名となっています。
引数は必要であれば記述しますが、必要がなければ省略が可能です。
google.script.runの呼び出しは非同期なので注意が必要
google.script.runはGoogleのサーバー処理と返事を待たずにクライアント側のJavaScriptは次のスクリプトを実行しています。
つまり非同期通信を行なってデータを取得しています。
なのでブラウザの処理を待ってもらうためにgoogle.script.run.withSuccessHandlerを使う
サーバー側の関数の呼び出しが成功したらクライアント側関数を呼び出す
google.script.runオブジェクトのwithSuccessHandlerメソッドを使って処理を行います。
google.script.run.withSuccessHandlerの書き方
google.script.run.withSuccessHandler(コールバック関数).関数(引数1, 引数2, ...)
このメソッドはサーバー側関数が正常に実行された場合、その戻り値をコールバック関数に渡して実行するように設定をするものです。
コールバック関数はクライアント側のJavaScriptに記述していきます。
これを使うことでサーバー側の処理完了時にクライアント側の必要な関数を呼び出すことができるようになります。
また、サーバー側の関数呼び出しが失敗した時に、クライアント側関数を呼び出すwithFailureHandlerメソッドも用意されています。
クライアント側JavaScriptを経由してスプレッドシートのデータを呼び出す
google.script.runオブジェクトを使ってサーバー側のスクリプトを呼び出しましょう。
// main.gs
const doGet = () => {
let htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput
.setTitle('GAS+Vue.js')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
return htmlOutput;
}
const getSpreadsheetName = () => {
return SpreadsheetApp.getActiveSpreadsheet().getName();
}
次にjs.htmlを作っていきます。
<!-- js.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
google.script.run.withSuccessHandler(initializeVue).getSpreadsheetName();
function initializeVue(ssName){
new Vue({
el: '#app',
data: {
ssName: ssName
}
});
}
</script>
google.run.scriptオブジェクトを使ってgetSpreadSheetNameメソッドを呼び出します。
そして呼び出しが成功した時点で戻り値をinitializeVue関数に渡して実行します。
そしてssNameをindex.htmlに参照します。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<div id="app">
<p>{{ ssName }}</p>
</div>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>
するとこのようにスプレッドシートのデータを引っ張ってくることができます。
スプレッドシートのデータを使ってWebページを生成する
スプレッドシートを読み込むことに成功したので下記のようなデータをスプレッドシートに記載していきます。
次にGoogle App Scriptを下記のように書き換えてスプレッドシートのデータを取得します。
// main.gs
const doGet = () => {
let htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
htmlOutput
.setTitle('GAS+Vue.js')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
return htmlOutput;
}
const getSpreadsheetValues = () => {
return SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues();
}
SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues()を使うことによってスプレッドシートの全てのデータを取得することができます。
次にjs.htmlを下記のように書き換えます。
<!-- js.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
google.script.run.withSuccessHandler(initializeVue).getSpreadsheetValues();
function initializeVue(values){
values.shift();
new Vue({
el: '#app',
data: {
title: 'google app script✖︎vueのテストタイトル',
description: 'google app script✖︎vueのテストディスクリプション',
lists: values
}
});
}
</script>
最後にindex.htmlを書き換えていきます。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<div id="app">
<h2>{{ title }}</h2>
<p>{{ description }}</p>
<ul>
<li v-for="list in lists">
<a :href="list[1]">
{{ list[0] }}
</a>
</li>
</ul>
</div>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</body>
</html>
するとこのようにスプレッドシートの内容がブラウザに表示されました。
まとめ
Google App Scriptとスプレッドシート、vue.jsを使えば社内ツールや個人アプリも簡単に作ることができます。
DBの費用もかからずに作成することができるのでぜひ挑戦してみてください。