Google Workspace ドキュメントのダイアログとサイドバー (original) (raw)

Google ドキュメント、スプレッドシート、フォームにバインドされたスクリプトでは、事前構築されたアラートやプロンプト、カスタム HTML サービス ページを含むダイアログやサイドバーなど、さまざまなタイプのユーザー インターフェース要素を表示できます。通常、これらの要素はメニュー項目から開きます。（Google フォームでは、ユーザー インターフェース要素は、フォームを開いて変更する編集者にのみ表示され、フォームを開いて回答するユーザーには表示されません）。

アラート ダイアログ

アラートは、Google ドキュメント、スプレッドシート、スライド、フォームのいずれかのエディタ内で開く、事前構築されたダイアログです。メッセージと [OK] ボタンが表示されます。タイトルと代替ボタンは省略可能です。これは、ウェブブラウザ内のクライアントサイド JavaScript で window.alert() を呼び出す場合と同様です。

アラートは、ダイアログが開いている間、サーバーサイド スクリプトを一時停止します。ユーザーがダイアログを閉じるとスクリプトは再開されますが、JDBC 接続は一時停止中に保持されません。

次の例に示すように、Google ドキュメント、フォーム、スライド、スプレッドシートではすべて、3 つのバリエーションがある Ui.alert() メソッドが使用されます。デフォルトの [OK] ボタンをオーバーライドするには、buttons 引数として Ui.ButtonSet 列挙型の値を渡します。ユーザーがクリックしたボタンを評価するには、alert() の戻り値を Ui.Button 列挙型と比較します。

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .createMenu("Custom Menu")
    .addItem("Show alert", "showAlert")
    .addToUi();
}

function showAlert() {
  var ui = SpreadsheetApp.getUi(); // Same variations.

  var result = ui.alert(
    "Please confirm",
    "Are you sure you want to continue?",
    ui.ButtonSet.YES_NO,
  );

  // Process the user's response.
  if (result == ui.Button.YES) {
    // User clicked "Yes".
    ui.alert("Confirmation received.");
  } else {
    // User clicked "No" or X in the title bar.
    ui.alert("Permission denied.");
  }
}

プロンプト ダイアログ

プロンプトは、Google ドキュメント、スプレッドシート、スライド、フォームの各エディタ内で開く、事前構築されたダイアログです。メッセージ、テキスト入力フィールド、[OK] ボタンが表示されます。タイトルと代替ボタンは省略可能です。これは、ウェブブラウザ内のクライアントサイド JavaScript で window.prompt() を呼び出す場合と同様です。

ダイアログが開いている間、サーバーサイド スクリプトを一時停止するようプロンプトが表示されます。ユーザーがダイアログを閉じるとスクリプトは再開されますが、JDBC 接続は一時停止中に保持されません。

次の例に示すように、Google ドキュメント、フォーム、スライド、スプレッドシートではすべて、3 つのバリエーションがある Ui.prompt() メソッドが使用されます。デフォルトの [OK] ボタンをオーバーライドするには、Ui.ButtonSet 列挙型の値を buttons 引数として渡します。ユーザーのレスポンスを評価するには、prompt() の戻り値をキャプチャし、PromptResponse.getResponseText() を呼び出してユーザーの入力を取得し、PromptResponse.getSelectedButton() の戻り値を Ui.Button 列挙型と比較します。

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .createMenu("Custom Menu")
    .addItem("Show prompt", "showPrompt")
    .addToUi();
}

function showPrompt() {
  var ui = SpreadsheetApp.getUi(); // Same variations.

  var result = ui.prompt(
    "Let's get to know each other!",
    "Please enter your name:",
    ui.ButtonSet.OK_CANCEL,
  );

  // Process the user's response.
  var button = result.getSelectedButton();
  var text = result.getResponseText();
  if (button == ui.Button.OK) {
    // User clicked "OK".
    ui.alert("Your name is " + text + ".");
  } else if (button == ui.Button.CANCEL) {
    // User clicked "Cancel".
    ui.alert("I didn't get your name.");
  } else if (button == ui.Button.CLOSE) {
    // User clicked X in the title bar.
    ui.alert("You closed the dialog.");
  }
}

カスタム ダイアログ

カスタム ダイアログを使用すると、Google ドキュメント、スプレッドシート、スライド、フォームの各エディタ内に HTML サービスのユーザー インターフェースを表示できます。

カスタム ダイアログでは、ダイアログが開いている間、サーバーサイド スクリプトが停止_されません_。クライアントサイド コンポーネントは、HTML サービス インターフェースの google.script API を使用して、サーバーサイド スクリプトを非同期で呼び出すことができます。

ダイアログは、HTML サービス インターフェースのクライアント側で google.script.host.close() を呼び出すことで閉じることができます。ダイアログは他のインターフェースで閉じることはできず、ユーザーまたはダイアログ自体でのみ閉じることができます。

次の例に示すように、Google ドキュメント、フォーム、スライド、スプレッドシートはすべて、メソッド Ui.showModalDialog() を使用してダイアログを開きます。

コード.gs

function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show dialog', 'showDialog') .addToUi(); }

function showDialog() { var html = HtmlService.createHtmlOutputFromFile('Page') .setWidth(400) .setHeight(300); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'My custom dialog'); }

Page.html

Hello, world!

サイドバーには、Google ドキュメント、フォーム、スライド、スプレッドシートの各エディタ内に HTML サービスのユーザー インターフェースを表示できます。

サイドバーは、ダイアログが開いている間、サーバーサイド スクリプトを停止_しません_。クライアントサイド コンポーネントは、HTML サービス インターフェースの google.script API を使用して、サーバーサイド スクリプトを非同期で呼び出すことができます。

サイドバーは、HTML サービス インターフェースのクライアント側で google.script.host.close() を呼び出すことで閉じることができます。サイドバーは他のインターフェースで閉じることはできず、ユーザーまたはサイドバー自体でのみ閉じることができます。

次の例に示すように、Google ドキュメント、フォーム、スライド、スプレッドシートはすべて、メソッド Ui.showSidebar() を使用してサイドバーを開きます。

コード.gs

function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show sidebar', 'showSidebar') .addToUi(); }

function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Page') .setTitle('My custom sidebar'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showSidebar(html); }

Page.html

Hello, world!

ファイル開きダイアログ

Google Picker は、ユーザーが Google ドライブ ファイルを選択またはアップロードできるようにする JavaScript API です。Google Picker ライブラリは、HTML サービスで使用して、ユーザーが既存のファイルを選択したり、新しいファイルをアップロードしたりできるカスタム ダイアログを作成できます。選択したファイルは、後で使用するためにスクリプトに渡すことができます。

要件

Apps Script で Google Picker を使用するには、いくつかの要件があります。

例

次の例は、Apps Script の Google 選択ツールを示しています。

code.gs

dialog.html

appsscript.json