エディタ アドオンのダイアログとサイドバー

ほとんどのエディタ アドオンでは、ダイアログ ウィンドウとサイドバー パネルが主なアドオンのユーザー インターフェースになります。どちらも標準の HTML と CSS を使用して完全にカスタマイズできます。また、Apps Script のクライアント サーバー通信モデルを使用して、ユーザーがサイドバーやダイアログを操作したときに Apps Script 関数を実行できます。アドオンでは複数のサイドバーとダイアログを定義できますが、一度に表示できるのは 1 つだけです。

アドオン インターフェースでユーザーが選択を行うまでエディタを操作できないようにする場合は、ダイアログを使用します。それ以外の場合は、サイドバーを使用します。

ダイアログ

ダイアログは、メイン エディタのコンテンツに重ねて表示されるウィンドウ パネルです。Apps Script のダイアログはモーダルです。ダイアログが開いている間、ユーザーはエディタ インターフェースの他の要素を操作できません。ダイアログのコンテンツとサイズをカスタマイズできます。

アドオンのダイアログは、Apps Script のカスタム ダイアログと同じ方法で作成します。一般的な推奨手順は次のとおりです。

  1. ダイアログの HTML 構造、CSS、クライアントサイドの JavaScript の動作を定義するスクリプト プロジェクト ファイルを作成します。ダイアログを定義する際は、エディタ アドオンのスタイル ガイドラインを参照してください。
  2. ダイアログを開くサーバーサイド コードで、HtmlService.createHtmlOutputFromFile(filename) を呼び出して、ダイアログを表す HtmlOutput オブジェクトを作成します。また、テンプレート HTML を使用している場合は、HtmlService.createTemplateFromFile(filename) を呼び出してテンプレートを生成し、HtmlTemplate.evaluate() を呼び出して HtmlOutput オブジェクトに変換することもできます。
  3. Ui.showModalDialog(htmlOutput, dialogTitle) を呼び出して、その HtmlOutput を使用してダイアログを表示します。

ダイアログが開いている間、サーバーサイドのスクリプトは一時停止されません。クライアントサイドの JavaScript は、google.script.run() と関連するハンドラ関数を使用して、サーバーサイドに非同期呼び出しを行うことができます。詳細については、クライアントとサーバー間の通信をご覧ください。

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

ファイルを開くダイアログは、ユーザーが Google ドライブからファイルを選択できる事前構築済みのダイアログです。ファイルを開くダイアログは、設計しなくてもアドオンに追加できますが、追加の構成が必要です。Google Picker API を有効にするには、アドオンの Cloud Platform プロジェクトへのアクセス権も必要です。

詳しくは、ファイルを開くダイアログをご覧ください。

サイドバーは、エディタ インターフェースの右側に表示されるパネルで、最も一般的なアドオン インターフェースです。ダイアログとは異なり、サイドバーが開いている間もエディタ インターフェースの他の要素を操作できます。サイドバーの幅は固定されていますが、コンテンツはカスタマイズできます。

アドオンのサイドバーは、Apps Script のカスタム サイドバーと同じ方法で作成します。一般的な推奨手順は次のとおりです。

  1. サイドバーの HTML 構造、CSS、クライアントサイドの JavaScript の動作を定義するスクリプト プロジェクト ファイルを作成します。サイドバーを定義する際は、エディタ アドオンのスタイル ガイドラインを参照してください。

  2. サイドバーを開くサーバーサイド コードで、HtmlService.createHtmlOutputFromFile(filename) を呼び出して、サイドバーを表す HtmlOutput オブジェクトを作成します。また、テンプレート HTML を使用している場合は、HtmlService.createTemplateFromFile(filename) を呼び出してテンプレートを生成し、HtmlTemplate.evaluate() を呼び出して HtmlOutput オブジェクトに変換することもできます。

  3. Ui.showSidebar(htmlOutput) を呼び出して、その HtmlOutput を使用してサイドバーを表示します。

サイドバーが開いている間、サーバーサイドのスクリプトは一時停止されません。クライアントサイドの JavaScript は、google.script.run() と関連するハンドラ関数を使用して、サーバーサイドに非同期呼び出しを行うことができます。詳細については、クライアントとサーバー間の通信をご覧ください。