このページは Cloud Translation API によって翻訳されました。

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 プリミティブです。 Boolean、String、null、および JavaScript オブジェクトと配列プリミティブ、オブジェクト、配列で構成されます。ページ内の form 要素パラメータとして渡すこともできますが、これは関数の唯一のパラメータである必要があり、戻り値として使用することはできません。別のモジュールを渡そうとすると、リクエストは失敗します。 Date、Function、form 以外の 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 を含め、ほぼすべてのものがパラメータや戻り値の制限なく、使用します。ただし、User オブジェクトは、 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 要素をパラメータとして使用してサーバー関数を呼び出す場合は、は、フィールド名をキー、フィールド値を値として持つ単一のオブジェクトになります。「 file-input の内容を除き、値はすべて文字列に変換されます。フィールドが 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)。

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

コード.gs

Index.html

パラメータと戻り値

成功ハンドラ

コード.gs

Index.html

障害ハンドラ

コード.gs

Index.html

User オブジェクト

コード.gs

Index.html

フォーム

コード.gs

Index.html

スクリプト ランナー

非公開関数

コード.gs

Index.html

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

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

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

スクリプトランナー