App Makerでサーバースクリプトを仕込んでメールを送信する

photo credit: THE RANGE PRODUCTIONS 10/27/2017 ( 2 ) via photopin (license)

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

App Makerの初心者向けチュートリアルのスクリプト編を送りしています。

前回の記事はこちら。

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

初心者向けにApp Makerのチュートリアルについてシリーズでお伝えしています。今回は、App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法です。非同期通信の理解がポイントですよ～。

App Makerのクライアントスクリプトからサーバースクリプトの関数を呼び出す方法についてお伝えしました。

あとはサーバースクリプトを仕込めばOKですね。

では、App MakerのサーバースクリプトにGmail からメールを送信するスクリプトを仕込んでいきます。

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

前回のおさらい
1. 各ボタンのonClickイベントのスクリプト
2. スクリプトエディタのクライアントスクリプト
サーバースクリプトを作成する方法
メールを送信するサーバースクリプト
1. MailAppサービスでメールを送信する
App Makerからのメール送信をテストする
1. メールを送信する
2. フォームのクリア
まとめ
連載目次：初心者向けApp Makerチュートリアル【スクリプト編】

前回のおさらい

まず、これまでのおさらいからお伝えします。

配置したText boxまたはText editorウィジェットに送信先メールアドレス、件名、本文を入力して「SEND EMAIL」ボタン押すと、メールを送信するというアプリです。

各ボタンのonClickイベントのスクリプト

「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);

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();

1	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);
}

/**

* 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関数はウィジェットの内容をクリアする処理、sendMessage関数はサーバースクリプトに仕込まれているsendEmailMessage関数を呼び出す処理となっています。

今回は、そのサーバースクリプトのsendEmailMessage関数の仕込み方と内容について解説をしていきます。

サーバースクリプトを作成する方法

では、サーバースクリプトを作成していきましょう。

実は、その手順は、ほとんどクライアントスクリプトの仕込み方と一緒ですけどね。

新規サーバースクリプトを作成する

まず、新規のスクリプトを作成します。

まず、App Makerの左メニューの「SCRIPTS」の「＋」ボタンをクリックします。

「Create Script」ダイアログが開きますので、「Server」を選択して「CREATE」をクリックします。

すると、サーバースクリプト「NewScript」が作成されます。

サーバースクリプトをリネームする

続いて、スクリプトのリネームをします。

「Rename Script」のアイコンをクリックして、スクリプト名を「ServerScript」に変更して「OK」としておきましょう。

このように、App Makerでは、「SCRIPTS」にクライアントスクリプトもサーバースクリプトも同列で管理されるみたいですね。

サーバースクリプトを入力する

これで、サーバースクリプト「ServerScript」の編集画面が開きますので、以下スクリプトを入力します。

/**
  * Sends an email message.
  * @param {string} to - Message recipient
  * @param {string} subject - Message subject
  * @param {string} msg - Body of message (HTML from Text Editor)
  * The body of the message is not a complete HTML document. It
  * doesn't need to be. When calling MailApp.sendEmail, you do
  * need to specify the option htmlBody for the message body, so that
  * MailApp.sendEmail will include the correct Content-Type header.
  */
function sendEmailMessage(to, subject, msg){
   MailApp.sendEmail(to, subject, msg, {htmlBody: msg});
}