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

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