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

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

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

ダイアログ

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

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

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

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

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

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

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

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

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

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

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

    アドオンのサイドバーの幅は 300 ピクセルで固定されており、HtmlOutput.setWidth を呼び出しても変更できません。

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

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