クラス google.script.host（クライアントサイド API）

google.script.host は、クライアントサイドの非同期 JavaScript API です。HTML サービス ページを含む Google ドキュメント、スプレッドシート、フォームのダイアログやサイドバーを操作することができます。クライアント側のコードからサーバー側の関数を実行するには、google.script.run を使用します。詳細については、HTML サービスのサーバー機能との通信に関するガイドをご覧ください。

プロパティ

プロパティ説明
originホストドメインを指定することで、スクリプトでオリジンを正しく設定できます。

Methods

メソッド戻り値の型概要
close() void 現在のダイアログやサイドバーを閉じます。
editor.focus() void ダイアログやサイドバーから、ブラウザのフォーカスを Google ドキュメント、スプレッドシート、フォームのエディタに切り替えます。
setHeight(height) void 現在のダイアログの高さを設定します。
setWidth(width) void 現在のダイアログの幅を設定します。

詳細なドキュメント

close()

現在のダイアログやサイドバーを閉じます。

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Sidebar').addItem('Show', 'showSidebar').addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

Index.html

<input type="button" value="Close"
  onclick="google.script.host.close()" />

editor.focus()

ダイアログやサイドバーから、ブラウザのフォーカスを Google ドキュメント、スプレッドシート、フォームのエディタに切り替えます。

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Sidebar').addItem('Show', 'showSidebar').addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

Index.html

<input type="button" value="Switch focus"
  onclick="google.script.host.editor.focus()" />

setHeight(height)

現在のダイアログの高さを設定します。

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Dialog').addItem('Show', 'showDialog').addToUi();
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
      .setWidth(300)
      .setHeight(200);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<script>
  function resizeDialog(width, height) {
    google.script.host.setWidth(width);
    google.script.host.setHeight(height);
  }
</script>
<input type="button" value="Resize dialog"
  onclick="resizeDialog(450, 300)" />

パラメータ

名前型説明
heightInteger新しい高さ（ピクセル単位）

setWidth(width)

現在のダイアログの幅を設定します。

Code.gs

function onOpen(e) {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Dialog').addItem('Show', 'showDialog').addToUi();
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index')
      .setWidth(300)
      .setHeight(200);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<script>
  function resizeDialog(width, height) {
    google.script.host.setWidth(width);
    google.script.host.setHeight(height);
  }
</script>
<input type="button" value="Resize dialog"
  onclick="resizeDialog(450, 300)" />

パラメータ

名前型説明
widthInteger新しい幅（ピクセル単位）