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

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

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

アラートダイアログ

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

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

以下の例に示すように、Google ドキュメント、フォーム、スライド、スプレッドシートでは、すべて Ui.alert() メソッドを使用します。これには 3 つのバリアントがあります。デフォルトの「OK」ボタンをオーバーライドするには、Ui.ButtonSet 列挙型の値を buttons 引数として渡します。ユーザーがクリックしたボタンを評価するには、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 ドキュメント、フォーム、スライド、スプレッドシートでは、いずれも Ui.prompt() メソッドを使用しています。このメソッドには 3 つのバリエーションがあります。デフォルトの「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 ドキュメント、Google フォーム、Google スライド、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! <input type="button" value="Close" onclick="google.script.host.close()" />

カスタムのサイドバー

サイドバーを使用すると、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! <input type="button" value="Close" onclick="google.script.host.close()" />

ファイルを開くダイアログ

Google Picker は、Google ドライブ、Google 画像検索、Google ビデオ検索などの Google サーバーに保存されている情報を表示する「ファイルを開く」ダイアログです。

以下の例に示すように、Picker のクライアントサイドの JavaScript API を HTML サービスで使用してカスタムダイアログを作成し、ユーザーが既存のファイルを選択したり、新しいファイルをアップロードしたりして、その選択内容をスクリプトに戻してさらに使用することができます。

Picker を有効にして API キーを取得する手順は次のとおりです。

スクリプトプロジェクトが標準の GCP プロジェクトを使用していることを確認します。
Google Cloud プロジェクトで「Google Picker API」を有効にします。
Google Cloud プロジェクトがまだ開いているときに、[API とサービス] を選択し、[認証情報] をクリックします。
[認証情報を作成] > [API キー] の順にクリックします。この操作によりキーが作成されますが、キーを編集してアプリケーションの制限と API の制限の両方を追加する必要があります。
API キーダイアログで [閉じる] をクリックします。
作成した API キーの横にあるその他アイコン > [API キーを編集] をクリックします。
[アプリケーションの制限] で、次の操作を行います。
1. [HTTP リファラー（ウェブサイト）] を選択します。
2. [ウェブサイトの制限] で [項目を追加] をクリックします。
3. [Referrer] をクリックして「*.google.com」と入力します。
4. さらにアイテムを追加し、参照 URL として「*.googleusercontent.com」と入力します。
5. [完了] をクリックします。
[API の制限] で、次の手順を行います。
1. [キーを制限] を選択します。
2. [Select APIs] セクションで、[Google Picker API] を選択して [OK] をクリックします。
  
  注: Google Picker API は、Cloud プロジェクトで有効になっている API のみが表示されているため、有効にしない限り表示されません。
[API キー] で [クリップボードにコピー] をクリックします。
下部にある [保存] をクリックします。

次の例では、ユーザーの OAuth 2.0 アクセストークンを選択ツールに渡すために、ScriptApp.getOAuthToken() を呼び出します。この手法により、Picker は独自の承認ダイアログを表示する必要がなくなります。ただし、この方法を使用できるのは、Picker が必要とする OAuth スコープが Apps Script で利用できる場合のみです。それ以外の場合は、この「Hello World」の例に示すように、Picker コードで独自の OAuth スコープを宣言する必要があります。

PickerBuilder を作成するときに setOrigin(google.script.host.origin) を呼び出す必要があります。

code.gs

Picker/code.gs

GitHub で表示

/**
 * Creates a custom menu in Google Sheets when the spreadsheet opens.
 */
function onOpen() {
  try {
    SpreadsheetApp.getUi().createMenu('Picker')
        .addItem('Start', 'showPicker')
        .addToUi();
  } catch (e) {
    // TODO (Developer) - Handle exception
    console.log('Failed with error: %s', e.error);
  }
}

/**
 * Displays an HTML-service dialog in Google Sheets that contains client-side
 * JavaScript code for the Google Picker API.
 */
function showPicker() {
  try {
    const html = HtmlService.createHtmlOutputFromFile('dialog.html')
        .setWidth(600)
        .setHeight(425)
        .setSandboxMode(HtmlService.SandboxMode.IFRAME);
    SpreadsheetApp.getUi().showModalDialog(html, 'Select a file');
  } catch (e) {
    // TODO (Developer) - Handle exception
    console.log('Failed with error: %s', e.error);
  }
}

/**
 * Gets the user's OAuth 2.0 access token so that it can be passed to Picker.
 * This technique keeps Picker from needing to show its own authorization
 * dialog, but is only possible if the OAuth scope that Picker needs is
 * available in Apps Script. In this case, the function includes an unused call
 * to a DriveApp method to ensure that Apps Script requests access to all files
 * in the user's Drive.
 *
 * @return {string} The user's OAuth 2.0 access token.
 */
function getOAuthToken() {
  try {
    DriveApp.getRootFolder();
    return ScriptApp.getOAuthToken();
  } catch (e) {
    // TODO (Developer) - Handle exception
    console.log('Failed with error: %s', e.error);
  }
}

dialog.html

Picker/dialog.html

GitHub で表示

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
  <script>
    // IMPORTANT: Replace the value for DEVELOPER_KEY with the API key obtained
    // from the Google Developers Console.
    var DEVELOPER_KEY = 'ABC123 ... ';
    var DIALOG_DIMENSIONS = {width: 600, height: 425};
    var pickerApiLoaded = false;

    /**
     * Loads the Google Picker API.
     */
    function onApiLoad() {
      gapi.load('picker', {'callback': function() {
        pickerApiLoaded = true;
      }});
     }

    /**
     * Gets the user's OAuth 2.0 access token from the server-side script so that
     * it can be passed to Picker. This technique keeps Picker from needing to
     * show its own authorization dialog, but is only possible if the OAuth scope
     * that Picker needs is available in Apps Script. Otherwise, your Picker code
     * will need to declare its own OAuth scopes.
     */
    function getOAuthToken() {
      google.script.run.withSuccessHandler(createPicker)
          .withFailureHandler(showError).getOAuthToken();
    }

    /**
     * Creates a Picker that can access the user's spreadsheets. This function
     * uses advanced options to hide the Picker's left navigation panel and
     * default title bar.
     *
     * @param {string} token An OAuth 2.0 access token that lets Picker access the
     *     file type specified in the addView call.
     */
    function createPicker(token) {
      if (pickerApiLoaded && token) {
        var picker = new google.picker.PickerBuilder()
            // Instruct Picker to display only spreadsheets in Drive. For other
            // views, see https://developers.google.com/picker/docs/#otherviews
            .addView(google.picker.ViewId.SPREADSHEETS)
            // Hide the navigation panel so that Picker fills more of the dialog.
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            // Hide the title bar since an Apps Script dialog already has a title.
            .hideTitleBar()
            .setOAuthToken(token)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
            .setOrigin(google.script.host.origin)
            // Instruct Picker to fill the dialog, minus 2 pixels for the border.
            .setSize(DIALOG_DIMENSIONS.width - 2,
                DIALOG_DIMENSIONS.height - 2)
            .build();
        picker.setVisible(true);
      } else {
        showError('Unable to load the file picker.');
      }
    }

    /**
     * A callback function that extracts the chosen document's metadata from the
     * response object. For details on the response object, see
     * https://developers.google.com/picker/docs/result
     *
     * @param {object} data The response object.
     */
    function pickerCallback(data) {
      var action = data[google.picker.Response.ACTION];
      if (action == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        var id = doc[google.picker.Document.ID];
        var url = doc[google.picker.Document.URL];
        var title = doc[google.picker.Document.NAME];
        document.getElementById('result').innerHTML =
            '<b>You chose:</b><br>Name: <a href="' + url + '">' + title +
            '</a><br>ID: ' + id;
      } else if (action == google.picker.Action.CANCEL) {
        document.getElementById('result').innerHTML = 'Picker canceled.';
      }
    }

    /**
     * Displays an error message within the #result element.
     *
     * @param {string} message The error message to display.
     */
    function showError(message) {
      document.getElementById('result').innerHTML = 'Error: ' + message;
    }
  </script>
</head>
<body>
  <div>
    <button onclick="getOAuthToken()">Select a file</button>
    <p id="result"></p>
  </div>
  <script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</body>
</html>

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

アラート ダイアログ

プロンプト ダイアログ

カスタム ダイアログ

コード.gs

Page.html

カスタムのサイドバー

コード.gs

Page.html

ファイルを開くダイアログ

code.gs

dialog.html

アラートダイアログ

プロンプトダイアログ

カスタムダイアログ