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

ほとんどの エディタ アドオンの場合、 ダイアログ ウィンドウとサイドバー パネルが アドオンの主なユーザー インターフェースとなります。どちらも標準の HTML と CSS を使用して完全にカスタマイズできます。また、Google Apps Script's クライアント / サーバー通信モデル を使用して、ユーザーが サイドバーまたはダイアログを操作したときに 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 と 関連するハンドラ関数を使用します。詳しくは、 クライアントとサーバー間の通信をご覧ください。