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

ほとんどのエディタ アドオンでは、ダイアログ ウィンドウとサイドバー パネルが主要なアドオン ユーザー インターフェースです。どちらも標準の 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() および関連するハンドラ関数を使用して、サーバーサイドに非同期呼び出しを行うことができます。詳細については、クライアントとサーバー間の通信をご覧ください。