チュートリアル 4: スクリプトを呼び出す

ボタン ウィジェット App Maker の中級スキル

access_time 約 10 分

作成するアプリの概要

ユーザーがリッチテキスト(HTML)のメール メッセージを作成して送信できるようにするアプリを作成します。アプリはクライアント スクリプトとサーバー スクリプトの両方を使用します。

ラボの内容

このチュートリアルでは、次の方法について説明します。

  • クライアント スクリプトを作成して呼び出す
  • サーバー スクリプトを作成して呼び出す
  • テキスト エディタ ウィジェットの値を使用して、HTML 本文を含むメール メッセージを送信する

アプリを作成する

  1. 雇用主や学校から提供される G Suite アカウントにログインします。
  2. App Maker を開きます。
  3. 空のアプリを作成します。
    • App Maker に開始時のダイアログが表示されたら、[Create New App] をクリックします。
    • それ以外の場合は、[Menu] menu chevron_right [New] chevron_right [Blank Application] をクリックします。
  4. アプリの名前を変更します。デフォルト名の「Untitled App」を削除して、「Email Sender」を入力します。

UI を作成する

次のようなフォームを作ります。

メール送信アプリ

この UI を作成するには:

  1. ページ名を変更します。

    1. 左側のサイドバーで、[NewPage] にカーソルを合わせ、[More] more_vert chevron_right [Rename] をクリックします。

    2. Email」と入力して [OK] をクリックします。

  2. 受信者のテキスト ボックスを追加します。

    1. ウィジェット をクリックし、テキスト ボックス テキスト ボックス ウィジェット をキャンバスの左上隅付近にドラッグします。

    2. 右のハンドルをドラッグして、テキスト ボックスを長くします。

    3. プロパティ エディタで、テキスト ボックスの [name] プロパティを [To] に変更し、[label] プロパティで「To:」と入力します。

  3. 件名のテキスト ボックスを追加します。

    1. ウィジェット をクリックし、テキスト ボックス テキスト ボックス ウィジェット を [To] テキスト ボックスの下にドラッグします。

    2. 右のハンドルをドラッグして、テキスト ボックスを長くします。

    3. プロパティ エディタで、テキスト ボックスの [name] プロパティを [Subject] に変更し、[label] プロパティで「Subject:」と入力します。

  4. メール メッセージの本文のテキスト エディタを追加します。

    1. ウィジェット をクリックし、テキスト エディタ を [Subject] テキスト ボックスの下にドラッグします。

    2. プロパティ エディタで、テキスト エディタの [name] プロパティを「Msg」に変更します。

  5. ユーザーがメール メッセージを送信するときにクリックするボタンを追加します。

    1. ウィジェット からボタン ボタン ウィジェット を、キャンバスの [To] テキスト ボックスの右側にドラッグします。そのボタンをダブルクリックし、名前を「Send Email」に変更します。
  6. ユーザーが [Send Email] ボタンをクリックしたときに起こるアクションを定義します。

    1. [Send Email] をクリックします。

    2. プロパティ エディタ chevron_right [Button] セクションで、[onClick] プロパティをクリックして [Custom Action] を選択します。

    3. JavaScript を使用してアクションを定義します。[Client Script] ダイアログで、次のスクリプトをコピーして貼りつけます。

          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); 
      action では、App Maker の次のオブジェクトとプロパティが参照されている点に留意してください。

      • widget.parent.descendants— [Send Email] ボタンの親ウィジェットは、ページの最上位パネルです。そのパネルの子孫には、ページ上のすべてのウィジェットが含まれます。
      • widgets.To.valuewidgets.Subject.valuewidgets.Msg.valuewidgets. EmailStatus.text— 3 つのウィジェットの value プロパティと 4 つ目のウィジェットの text プロパティが参照されます。
    4. [Esc] を押してダイアログを閉じます。

  7. ユーザーがフォーム上のすべてのフィールドをクリアするときにクリックするボタンを追加します。

    1. ウィジェット からボタン ボタン ウィジェット をキャンパスのテキスト エディタの下にドラッグします。そのボタンをダブルクリックし、名前を「Clear Form」に変更します。
  8. ユーザーが [Clear Form] ボタンをクリックしたときに起こるアクションを定義します。

    1. [Clear Form] をクリックします。

    2. プロパティ エディタ chevron_right [Button] セクションで、[onClick] プロパティをクリックして [Custom Action] を選択します。

    3. JavaScript を使用してアクションを定義します。[Client Script] ダイアログで、次のスクリプトをコピーして貼りつけます。

      clearEmailForm();

  9. ステータスのラベルを追加します。

    1. ウィジェット からラベル ラベル ウィジェット をキャンパスのテキスト ボックスの下にドラッグします。

    2. プロパティ エディタで、[name] プロパティを [EmailStatus] に設定します。[text] プロパティを削除します。

  10. [Close] close をクリックして、ウィジェットを閉じます。

アプリが使用するスクリプトについて

このステップでは、アプリのメール送信やフォームのクリアに必要な JavaScript 関数を、アプリ内のスクリプトにコピーして貼りつけます。スクリプトは App Maker のコンテナで、スクリプト ファイルに似ています。

  • クライアント スクリプト - ブラウザの JavaScript エンジンが実行する JavaScript が含まれています。
  • サーバー スクリプト - App Maker サーバー上の JavaScript エンジンが実行する JavaScript が含まれています。

クライアント スクリプト機能

clearEmailForm

clearEmailForm 関数は、メールフォーム全体をクリアします。

sendMessage

sendMessage 関数:

  • sendEmailMessage サーバー スクリプトを呼び出してメール メッセージを送信する
  • clearEmailForm クライアント スクリプトを呼び出してメールフォームをクリアする

サーバー スクリプト機能

sendEmailMessage

sendEmailMessage サーバー スクリプト関数は、MailApp.sendEmail 関数を呼び出してメール メッセージを送信します。MailApp.sendEmailhtmlBody オプションが指定されている場合は、メッセージの本文が HTML であることを示しています。

クライアント スクリプトを作成する

  1. クライアントが実行する関数を含むクライアント スクリプトを作成します。

    1. [Scripts] にカーソルを合わせ、[add] をクリックしてスクリプトを追加します。

    2. [Create script] ダイアログが表示されたら、[Client] を選択したまま [Generate sample code] のチェックを外して、[Create] をクリックします。

  2. クライアント スクリプトの名前を変更します。

    1. 左側のサイドバーで、[NewScript] にカーソルを合わせ、[More] chevron_right [Rename] をクリックします。

    2. ClientScript」と入力して [OK] をクリックします。

  3. 次の JavaScript をコピーして ClientScript に貼りつけます。

    /**
        * 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);
        }
        

オブジェクト参照 app.pages.Email.descendants に注意してください。この場合、Email ページの子孫であるすべてのオブジェクト、つまりすべてのウィジェットを参照しています。これは、今回のアプリで使用する Send Email ボタンの onClick アクションの参照 (widget.parent.descendants) と同じです(オブジェクトの階層によって、参照内容が等しくなるかどうかは異なります)。

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

  1. サーバーが実行する関数を含むサーバー スクリプトを作成します。

    1. [Scripts] にカーソルを合わせ、[add] をクリックしてスクリプトを追加します。

    2. [Create Script] ダイアログが表示されたら、[Server] をクリックし、[Generate sample code] のチェックをはずして [Create] をクリックします。

  2. サーバー スクリプトの名前を変更します。

    1. 左側のサイドバーで、[NewScript] にカーソルを合わせ、[More] more_vert chevron_right [Rename] をクリックします。

    2. ServerScript」と入力して [OK] をクリックします。

  3. 次の JavaScript をコピーして 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});
         }
        

    なお、受信者、件名、メッセージが、実際にメールを送信する関数にどのように渡されるのか、確認してください。[Send Email] ボタンの onClick プロパティに定義されているアクションでは、クライアント スクリプトの SendMessage 関数が呼び出され、受信者、件名、メッセージが渡されます。SendMessage 関数では、同じ引数がサーバー スクリプトの sendEmailMessage 関数に渡されます。そして、その引数が MailApp.SendMail 関数に渡され、MailApp.SendMail 関数がメールを送信します。

アプリのプレビューとテストを行う

メール送信アプリをプレビューし、アクションを確認します。

  1. 右上隅にある [Preview] をクリックし、新しいブラウザタブでアプリを実行します。
  2. [Allow] をクリックし、アプリに特定の情報の使用を許可します。
  3. メールアドレスと件名を入力します。
  4. テキスト エディタで、簡単なメッセージを入力します。
  5. [Clear Form] をクリックします。フォームがクリアされるので、もう一度入力し直します。
  6. メールアドレスと件名を入力します。
  7. テキスト エディタで、簡単なメッセージを入力します。
  8. テキスト エディタ ツールバーのツールを使用して、メッセージのスタイルを指定します。
  9. [Send Email] をクリックします。メール送信アプリがメールを送信し、フォームをクリアします。

これで、クライアント スクリプトとサーバー スクリプトを使用してメールを送信する App Maker アプリが作成できました。

次のステップ

  1. チュートリアル 5 を見る - リレーションについて学びます。
  2. App Maker スクリプトの詳細について学ぶ。
  3. App Maker サンプルリストにある他のアプリケーションの詳細を確認する。
  4. このチュートリアルの主なコンセプトについて詳しく見る。例: