エディタ アドオンのユーザー インターフェース
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
エディタ用アドオンを使用すると、カスタマイズされたメニュー、ダイアログ、サイドバーを通じてユーザー インタラクションが可能になります。次のリンクでは、このようなインターフェースの構築に関する情報を提供しています。
アドオン メニューは、Apps Script の基本 Ui サービスを使用して作成されます。メニュー項目はアドオンの使用を開始する際の出発点となりますが、アドオンの認証ライフサイクルを考慮して設計する必要があります。
サイドバーとダイアログは、Apps Script の HTML サービスを使用して作成されます。このサービスでは、HTML と CSS を使用してインターフェースの構造と外観を定義できます。詳しくは、HTML の作成と配信をご覧ください。
- また、インターフェースでのユーザー操作が、エディタ ファイルが存在する Google サーバーでのアクションにつながるように、またはその逆になるように、クライアント サーバー通信呼び出しを設定することもできます。
- Apps Script には、動的インターフェースの構築を容易にするテンプレート構文も用意されています。
エディタ アドオンの HTML インターフェースを構築する際は、エディタ アドオンの CSS パッケージを使用して、アドオンのルック アンド フィールを、拡張する Google Workspace エディタに似せることができます。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-07-31 UTC。
[null,null,["最終更新日 2025-07-31 UTC。"],[[["\u003cp\u003eEditor add-ons enhance user interaction with custom menus, dialogs, and sidebars, built using Apps Script's UI and HTML services.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on menus initiate add-on usage and should be designed considering the add-on authorization lifecycle.\u003c/p\u003e\n"],["\u003cp\u003eSidebars and dialogs, created with HTML service, allow for defining the add-on's interface structure and appearance using HTML, CSS, and client-server communication for dynamic interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe Editor add-on CSS package ensures visual consistency with Google Workspace editors.\u003c/p\u003e\n"]]],["Editor add-ons allow user interaction via custom menus, dialogs, and sidebars. Menus, built with the Ui service, serve as starting points, requiring design consideration for the add-on authorization lifecycle. Sidebars and dialogs, created using the HTML service, utilize HTML and CSS for interface design. Client-server communication enables actions on the server based on user interface interactions. The editor add-on CSS package maintains a consistent look and feel with Google Workspace editors. Dynamic interface creation is supported via a template syntax.\n"],null,["# Editor add-on user interfaces\n\n[Editor add-ons](/workspace/add-ons/concepts/types#editor_add-ons)\nenable user interaction through customized menus, dialogs, and\nsidebars. The following links provide information building these types of\ninterfaces.\n\n- [Add-on menus](/workspace/add-ons/concepts/menus) are created using\n Apps Script's base [Ui service](/apps-script/reference/base/ui).\n Menus items provide initial starting points for using your add-on,\n but you must design them to take into account the add-on\n [authorization lifecycle](/workspace/add-ons/concepts/editor-auth-lifecycle#the_complete_lifecycle).\n\n- [Sidebars and dialogs](/workspace/add-ons/concepts/dialogs) are created using\n Apps Script's [HTML service](/apps-script/reference/html). This service\n lets you define the interface structure and appearence using HTML and CSS.\n See [Create and serve HTML](/apps-script/guides/html) for more details.\n\n - You can also set up [client-server communication](/apps-script/guides/html/communication) calls so that user actions in the interface result in actions taken on the Google servers where the editor file resides, or vice versa.\n - Apps Script also provides a [template syntax](/apps-script/guides/html/templates) to make building dynamic interfaces easier.\n- When building HTML interfaces for Editor add-ons, you should use the\n [Editor add-on CSS package](/workspace/add-ons/guides/css) to help your add-on\n look and feel like the Google Workspace editors\n they extend."]]