このページは 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 を含め、ほぼすべてのものがパラメータや戻り値の制限なく、使用します。ただし、ユーザーオブジェクトは 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)。

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のフォーカスを移動しています

スクリプトランナー