App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法

photo credit: Curtis Gregory Perry Phone via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

初心者向けにApp Makerのチュートリアルについてシリーズでお伝えしています。

前回の記事はこちら。

App Makerのスクリプトエディタにクライアントスクリプトを入力する

初心者向けApp Makerのチュートリアルを送りしています。今回は、App Makerのクライアントスクリプトとは何か、またスクリプトエディタでクライアントスクリプトを入力する方法についてお伝えします。

App Makerでスクリプトエディタでクライアントスクリプトを仕込む方法についてお伝えしました。

ただ仕込んだスクリプトについて解説をしていませんでしたので、今回ガツっと紹介していきます。

App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法です。

非同期通信なので、ちょっと一工夫入りますよ。

では、行ってみましょう。

前回のおさらい
メールフォームをクリアする関数
1. ページのすべてのウィジェットを取得する
2. 各ウィジェットをクリアする
サーバースクリプトの関数を呼び出す
1. google.script.runは非同期通信でサーバースクリプトを呼び出す
2. withSuccessHandlerとwithFailureHandler
まとめ
連載目次：初心者向けApp Makerチュートリアル【スクリプト編】

前回のおさらい

まず、これまでのおさらいです。

メール送信アプリを作成していまして、ページの構成は以下のようになっています。

ボタン「SEND EMAIL」のonClickイベントに

var widgets = widget.parent.descendants;
var to = widgets.To.value;
var subject = widgets.Subject.value;
var msg = widgets.Msg.value;
widgets.EmailStatus.text = 'Sending email...';
sendMessage(to, subject, msg);

ボタン「CLEAR EMAIL FORM」ボタンのonClickイベントに

clearEmailForm();

というスクリプトを仕込んでいます。

また、これらのスクリプト内で関数sendMessageと関数clearEmailFormを呼び出していますが、これらはクライアントスクリプトとして以下のものを仕込みました。

/**
* Clears the entire email form
*/
function  clearEmailForm(){
  var formWidgets = app.pages.Email.descendants;
  formWidgets.EmailStatus.text = "";
  formWidgets.To.value = "";
  formWidgets.Subject.value = "";
  formWidgets.Msg.value = "";
}

/**
* Sends an email message.
* @param {string} to - Message recipient
* @param {string} subject - Message subject
* @param {string} msg - Body of message (HTML from Text Editor)
*/
function sendMessage(to, subject, msg){
  var status = app.pages.Email.descendants.EmailStatus;
  google.script.run
   .withFailureHandler(function(error) {
      // An error occurred, so display an error message.
      status.text = error.message;
    })
  .withSuccessHandler(function(result) {
     // Report that the email was sent.
     status.text = 'Email sent...';
  clearEmailForm();
   })
.sendEmailMessage(to, subject, msg);
}

今回はこのクライアントスクリプトの内容について解説をしていきます。

メールフォームをクリアする関数

まず、関数clearEmailFormから解説をしていきます。

この関数はメールフォームの各ウィジェットをクリアするといった処理をします。

/**
* Clears the entire email form
*/
function  clearEmailForm(){
  var formWidgets = app.pages.Email.descendants;
  formWidgets.EmailStatus.text = "";
  formWidgets.To.value = "";
  formWidgets.Subject.value = "";
  formWidgets.Msg.value = "";
}

ページのすべてのウィジェットを取得する

5行目ですが、appは現在実行してるアプリケーションを表すAppオブジェクト、pagesプロパティはAppオブジェクトに含まれるページのコレクションを取得しています。

ページのコレクションはプロパティマップで取得できますので、ピリオドに続けてnameプロパティを指定することで、各ページを取得することができます。

つまり、例では

app.pages.Email

まででページ「Email」を取得したということになります。

さらに、descendantsはその子ウィジェットをプロパティマップとして取得します。

つまり、ButtonウィジェットのonClickイベントに仕込んでいる

widget.parent.descendants

と同じことになるのですが、今回の仕込み先はウィジェットではなく、スクリプトエディタになりますので、こちらの記法を使ってるということになると思います。

各ウィジェットをクリアする

続くステートメントはわかりますね。

Labelウィジェット「EmailStatus」のtextプロパティ
Text boxウィジェット「To」のvalueプロパティ
Text boxウィジェット「Subject」のvalueプロパティ
Text editorウィジェット「Msg」のvalueプロパティ

を全て空文字に設定する、つまりクリアするという処理になります。

サーバースクリプトの関数を呼び出す

さていよいよここから本番で、サーバースクリプトに記述した関数を呼び出す方法です。

関数sendMessageは、各ウィジェットに入力されている

to：メール送信先アドレス
subject：件名
msg：メール本文

を受け取り、サーバースクリプトに仕込まれている、Emailを送信するための関数sendEmailMessageを呼び出すというものです。

/**
* Sends an email message.
* @param {string} to - Message recipient
* @param {string} subject - Message subject
* @param {string} msg - Body of message (HTML from Text Editor)
*/
function sendMessage(to, subject, msg){
  var status = app.pages.Email.descendants.EmailStatus;
  google.script.run
   .withFailureHandler(function(error) {
      // An error occurred, so display an error message.
      status.text = error.message;
    })
  .withSuccessHandler(function(result) {
     // Report that the email was sent.
     status.text = 'Email sent...';
     clearEmailForm();
   })
.sendEmailMessage(to, subject, msg);
}

しかし途中に何やらいろいろありますね。解説をしていきます。