(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。GASとVue.jsでWebアプリを作る方法をお伝えしています。GASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返し要素を描画する方法GASとVue.jsでWebアプリケーションを作成する方法をお伝えしています。今回はGASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返しで要素を描画する方法をお伝えします。tonari-it.com2018.08.18Vue.jsのv-forディレクティブとdataオプションの配列を使って、DOM要素を繰り返し描画する方法をお伝えしました。HTMLの記述はだいぶスッキリしたのですが、代わりにdataオプションの記述が面倒になってしまいました。ここは、スプレッドシートから引っ張ってこれると便利ですよね...!クライアント側JavaScriptから、サーバー側のGASを呼び出してスプレッドシートのデータを取得してみましょう。google.script.runというオブジェクトを使用します。いうことで、今回はGASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法です。行ってみましょう!目次クライアント側JavaScriptとサーバー側GASの動作の整理クライアント側JavaScriptからサーバー側の関数を呼び出すgoogle.script.runオブジェクトgoogle.script.runによる呼び出しは非同期サーバー側の関数の呼び出しが成功したらクライアント側関数を呼び出すクライアント側JavaScriptからサーバー側関数を呼びだすスクリプトWebページの表示結果まとめ連載目次:GASユーザーのためのVue.js&Webアプリ作成入門クライアント側JavaScriptとサーバー側GASの動作の整理さて、今回やりたいこととその課題を一回整理しておきましょう。GASのプロジェクト構成は以下のようにするとします。index.html内に埋め込むブラウザ(つまりクライアント側)で動作するJavaScriptURLリクエストによりdoGet関数が動作し、ユーザーのブラウザにindex.htmlを元にしたWebページが表示されます。クライアント側にはindex.htmlとjs.htmlが渡されています。その表示する際に、スプレッドシートの情報を参照したいとします。スプレッドシートはGoogleサーバー内にありますから、それにアクセスする処理はgsファイル、つまりサーバー側のGASとして記述する必要があります。クライアント側JavaScriptがユーザーのブラウザに展開された時点に、何らかの方法でサーバー側のGASの処理を呼び出す必要があるのです。クライアント側JavaScriptからサーバー側の関数を呼び出すgoogle.script.runオブジェクトGASでは、クライアント側からサーバー側の関数を呼び出すためのオブジェクトgoogle.script.runが用意されています。クライアント側JavaScriptで以下のように記述することで、サーバー側の関数を呼び出すことができます。引数2,...)関数はサーバー側のgsファイルに記述された関数名です。引数は必要であれば記述しますが、必要がなければ省略可です。実は、もうひと工夫必要です。ブラウザ上で「google.script.run.関数」でサーバー側で呼び出す処理を行うとします。その際に、ブラウザからGoogleサーバーに通信網を介して指示が飛びますよね。Googleサーバー内のgsファイルがその要求を受け取って、関数を実行します。スプレッドシートのデータを取得するわけです。...この場合、そのGoogleサーバーの処理と返事を待たずに、クライアント側のJavaScriptは次のスクリプトを実行してしまいます。このような通信を、非同期通信といいます。ブラウザの処理を待ってもらうために、ひと工夫する必要があります。サーバー側の関数の呼び出しが成功したらクライアント側関数を呼び出すそのために用意されている仕組みが、google.script.runオブジェクトのwithSuccessHandlerメソッドです。引数2,...)このメソッドは、サーバー側関数が正常に実行された場合に、その戻り値をコールバック関数に渡して実行するように設定をするものです。コールバック関数はクライアント側JavaScriptに記述しておきます。これを使うことで、サーバー側の処理完了時にクライアント側の必要な関数を呼び出すことができるようになるわけです。サーバー側の関数呼び出しが失敗したときに、クライアント側関数を呼び出すwithFailureHandlerメソッドも用意されています。必要に応じて使用しましょう。クライアント側JavaScriptからサーバー側関数を呼びだすスクリプトでは、実際にgoogle.script.runオブジェクトを使ってサーバー側のスクリプトを呼び出してみましょう。サーバー側のmain.gsには、URLリクエストを受けてHTMLを表示するdoGet関数と、このプロジェクトのコンテナとしているスプレッドシート名を返すgetSpreadsheetName関数を記述しておきます。SpreadsheetApp.getActiveSpreadsheet().getName();}続いて、js.htmlです。ssName}});}</script>3行目で、google.run.scriptオブジェクトを使って、getSpreadsheetNameメソッドを呼び出します。その呼び出しが成功した時点で、戻り値をinitializeVue関数に渡して実行するのです。受け取った戻り値ssNameをそのままdataオプションのプロパティssNameに設定していますね。そのデータを参照してWebページを表示するindex.htmlがコチラです。