HTML サービス: サーバー機能と通信する

google.script.run は非同期です。 HTML サービス ページからサーバーサイドの呼び出しを可能にするクライアントサイド JavaScript API Apps Script 関数。次の例は、最も基本的な機能を示しています。 /google.script.run - サーバーで関数を呼び出す クライアントサイドの JavaScript から使用できます。

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function doSomething() {
  Logger.log('I was called!');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      google.script.run.doSomething();
    </script>
  </head>
</html>

このスクリプトをウェブアプリとしてデプロイし、その URL にアクセスしても、 ログを見ると、このサーバー機能に doSomething() が呼び出されました。

サーバーサイド関数へのクライアントサイド呼び出しは非同期です。ブラウザがサーバーに関数 doSomething() の実行をリクエストした後、ブラウザはレスポンスを待たずにすぐに次の行のコードに進みます。つまり サーバー関数の呼び出しが想定どおりに実行されない場合があります。 同時に 2 つの関数呼び出しを行うと、どの関数が 最初に実行します。結果はページの読み込みごとに異なる場合があります。この場合 成功ハンドラ失敗ハンドラ コードのフローを制御できます。

google.script.run API を使用すると、サーバー関数に対して 10 件の同時呼び出しが可能になります。条件 10 個のインスタンスが実行中に 11 回目の呼び出しを行うと、サーバー関数は 10 個のスポットのいずれかが解放されるまで 遅延が発生します実際には ほとんどのブラウザにはすでに制限があるため、この制限について検討してください。 同じサーバーへの同時リクエスト数を 10 未満にします。 たとえば、Firefox の場合、この制限は 6 回です。ほとんどのブラウザでも同様に、 リクエストを繰り返し実行していました。

パラメータと戻り値

クライアントからパラメータを使用してサーバー関数を呼び出すことができます。同様に、 サーバー関数は、クライアントに渡されたパラメータとして 成功ハンドラ

有効なパラメータと戻り値は、Number などの JavaScript プリミティブです。 BooleanStringnull、および JavaScript オブジェクトと配列 プリミティブ、オブジェクト、配列で構成されます。ページ内の form 要素 パラメータとして渡すこともできますが、これは関数の唯一のパラメータである必要があり、 戻り値として使用することはできません。同じ値を渡そうとすると、リクエストは失敗します。 DateFunctionform 以外の DOM 要素、その他の禁止されているタイプ これにはオブジェクトや配列内の禁止された型も含まれます作成するオブジェクトは 循環参照も失敗し、配列内の未定義のフィールドは null

サーバーに渡されるオブジェクトは、元のオブジェクトのコピーになります。もし サーバー関数がオブジェクトを受け取り、そのプロパティ、 クライアントには影響しません。

成功ハンドラ

クライアントサイドのコードは、サーバー呼び出しの完了を待たずに次の行に進むため、withSuccessHandler(function) を使用すると、サーバーが応答したときに実行するクライアントサイドのコールバック関数を指定できます。サーバー関数が値を返すと、API はその値を パラメータとして新しい関数を渡します。

次の例では、サーバーが応答したときにブラウザのアラートを表示します。備考 このコードサンプルでは承認が必要です。これは、サーバーサイド関数が 表示されます。スクリプトを承認する最も簡単な方法は、ページを読み込む前にスクリプト エディタから getUnreadEmails() 関数を手動で 1 回実行することです。または ウェブアプリをデプロイする場合、 を「ウェブアプリにアクセスするユーザー」として実行する場合、 承認を求めるメッセージが表示されます。

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function getUnreadEmails() {
  return GmailApp.getInboxUnreadCount();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function onSuccess(numUnread) {
        var div = document.getElementById('output');
        div.innerHTML = 'You have ' + numUnread
            + ' unread messages in your Gmail inbox.';
      }

      google.script.run.withSuccessHandler(onSuccess)
          .getUnreadEmails();
    </script>
  </head>
  <body>
    <div id="output"></div>
  </body>
</html>

障害ハンドラ

サーバーが応答しなかった場合やエラーをスローした場合、withFailureHandler(function) では成功ハンドラの代わりに失敗ハンドラを指定できます。この場合、Error オブジェクト(存在する場合)が引数として渡されます。

デフォルトでは、障害ハンドラを指定しない場合、障害は JavaScript コンソールに記録されます。これをオーバーライドするには、withFailureHandler(null) を呼び出すか、 何も実行しない障害ハンドラになります。

失敗ハンドラの構文は成功ハンドラとほぼ同じであるため、 見てみましょう

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function getUnreadEmails() {
  // 'got' instead of 'get' will throw an error.
  return GmailApp.gotInboxUnreadCount();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function onFailure(error) {
        var div = document.getElementById('output');
        div.innerHTML = "ERROR: " + error.message;
      }

      google.script.run.withFailureHandler(onFailure)
          .getUnreadEmails();
    </script>
  </head>
  <body>
    <div id="output"></div>
  </body>
</html>

User オブジェクト

サーバーへの複数の呼び出しで同じ成功または失敗ハンドラを再利用するには、withUserObject(object) を呼び出して、ハンドラに渡されるオブジェクトを 2 番目のパラメータとして指定します。この「ユーザー オブジェクト」です。「ユーザー オブジェクト」です。 User クラス - 特定の クライアントがサーバーに接続した際のコンテキスト。user オブジェクトは 関数、DOM を含め、ほぼすべてのものが パラメータや戻り値の制限なく、 使用します。ただし、ユーザー オブジェクトは new 演算子で作成されたオブジェクトにすることはできません。

この例では、2 つのボタンのいずれかをクリックすると、 他のボタンは変更されずに残りますが、サーバーから返される 1 つの成功ハンドラを共有します。onclick ハンドラ内で、キーワード this を指定します。 これは button 自体を参照します。

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function getEmail() {
  return Session.getActiveUser().getEmail();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function updateButton(email, button) {
        button.value = 'Clicked by ' + email;
      }
    </script>
  </head>
  <body>
    <input type="button" value="Not Clicked"
      onclick="google.script.run
          .withSuccessHandler(updateButton)
          .withUserObject(this)
          .getEmail()" />
    <input type="button" value="Not Clicked"
      onclick="google.script.run
          .withSuccessHandler(updateButton)
          .withUserObject(this)
          .getEmail()" />
  </body>
</html>

フォーム

form 要素をパラメータとして使用してサーバー関数を呼び出す場合は、 は、フィールド名をキー、フィールド値を値として持つ単一のオブジェクトになります。値はすべて文字列に変換されます。ただし、ファイル入力フィールドの内容は Blob オブジェクトになります。

この例では、ファイルを再読み込みせずに、ファイル入力フィールドを含むフォームを処理します。 ページGoogle ドライブにファイルがアップロードされ、アプリケーションの URL が出力されます。 ファイルにコードを追加します。onsubmit ハンドラ内で、キーワード this を指定します。 フォーム自体を参照します。なお、ページ内のすべてのフォームを読み込むと、 デフォルトの送信アクションは preventFormSubmit によって無効にされています。これにより 例外が発生した場合に、ページから不正確な URL にリダイレクトされるのを防ぐことができます。

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function processForm(formObject) {
  var formBlob = formObject.myFile;
  var driveFile = DriveApp.createFile(formBlob);
  return driveFile.getUrl();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject) {
        google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
      }
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Got it!</a>';
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

スクリプト ランナー

google.script.run は、「スクリプト ランナー」のビルダーと考えることができます。もし 成功ハンドラ、失敗ハンドラ、ユーザー オブジェクトをスクリプト ランナーに追加すると、 既存のランナーを変更しない代わりに新しいスクリプトランナーが 表示されます 新しい動作でテストできます。

withSuccessHandler()、任意の組み合わせ、任意の順序を使用できます。 withFailureHandler()withUserObject()。また、kubectl の すでに値が設定されているスクリプト ランナーの関数を変更する。新しい値は、以前の値を上書きします。

この例では、3 つのサーバー呼び出しすべてに共通の障害ハンドラを設定していますが、 個別の成功ハンドラ:

var myRunner = google.script.run.withFailureHandler(onFailure);
var myRunner1 = myRunner.withSuccessHandler(onSuccess);
var myRunner2 = myRunner.withSuccessHandler(onDifferentSuccess);

myRunner1.doSomething();
myRunner1.doSomethingElse();
myRunner2.doSomething();

非公開関数

名前がアンダースコアで終わるサーバー関数は非公開と見なされます。これらの関数は google.script で呼び出すことはできず、名前は決して 必要があります。そのため、これらを使用して、実装の詳細を非表示にできます。 サーバー上で秘密にする必要があります。google.script さんも次の情報を確認できません ライブラリ内の関数と、 スクリプトのトップレベルで宣言されているからです。

この例では、関数 getBankBalance() はクライアント コードで使用できます。ソースコードを検査するユーザーは、関数を呼び出さなくてもその名前を見つけることができます。ただし、関数 deepSecret_()obj.objectMethod() は、 必要があります。

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function getBankBalance() {
  var email = Session.getActiveUser().getEmail()
  return deepSecret_(email);
}

function deepSecret_(email) {
 // Do some secret calculations
 return email + ' has $1,000,000 in the bank.';
}

var obj = {
  objectMethod: function() {
    // More secret calculations
  }
};

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function onSuccess(balance) {
        var div = document.getElementById('output');
        div.innerHTML = balance;
      }

      google.script.run.withSuccessHandler(onSuccess)
          .getBankBalance();
    </script>
  </head>
  <body>
    <div id="output">No result yet...</div>
  </body>
</html>

アプリケーションの Google Workspace ダイアログのサイズ変更

Google ドキュメント、スプレッドシート、Google スプレッドシートのカスタム ダイアログ ボックス フォームのサイズを変更するには、 google.script.host メソッド setWidth(width) または setHeight(height) インチ 呼び出すことができます。(ダイアログの初期サイズを設定するには、HtmlOutput 方法 setWidth(width) および setHeight(height))。 なお、サイズ変更時にダイアログが親ウィンドウの中心に再調整されることはありません。また、 サイドバーのサイズを変更できません。

Google Workspaceのダイアログとサイドバーを閉じる

HTML サービスを使用して Google ドキュメント、スプレッドシート、フォームにダイアログ ボックスまたはサイドバーを表示する場合、window.close() を呼び出してインターフェースを閉じることはできません。代わりに、 呼び出し google.script.host.close()。 例については、 HTML を Google Workspace ユーザー インターフェースとして配信する

ブラウザの Google Workspaceのフォーカスを移動しています

ユーザーのブラウザのフォーカスを、ダイアログまたはサイドバーから Google ドキュメント、スプレッドシート、フォームのエディタで、次のメソッドを呼び出すだけです。 google.script.host.editor.focus()。 この方法は、 Document サービスのメソッド Document.setCursor(position) および Document.setSelection(range)