Google Workspace UI を拡張する

このページでは、Google Workspace のユーザー インターフェース（UI）を拡張する方法について説明します。Google Workspace の UI を拡張する理由は、次のような理由が考えられます。

• アプリまたはサービスを Google Workspace と統合すると、ユーザーは 1 つ以上の Google Workspace アプリから直接アプリを使用できるようになります。たとえば、Google ドキュメント内でサービス用のスマートチップとリンク プレビューを作成する Google Workspace アドオンを作成します。
• Google Workspace ユーザーの生産性向上やワークフローの改善を支援します。たとえば、ユーザーが Google Chat から直接週次タイムシートを報告できる Google Chat アプリを作成します。
• Google Workspace にネイティブにはない機能を追加します。たとえば、Google ドキュメント、スプレッドシート、スライドにカスタム メニューを追加します。

Google Workspace UI を拡張するオプションのほとんどは、Google Workspace Marketplace に公開できます。Google Workspace Marketplace は、ユーザーが Google Workspace と統合するサードパーティ製アプリを見つけてインストールできるオンライン ストアです。

Google Workspace UI を拡張するためのオプションの概要

次の表に、Google Workspace UI を拡張するオプションを示します。また、これらのオプションの特徴を比較しています。

• 拡張対象のアプリ: 指定したオプションで拡張できる Google Workspace アプリが一覧表示されます。
• コーディング オプション: 次のようなビルド方法が一覧表示されます。
  • AppSheet: ノーコード開発プラットフォーム。
  • Apps Script: JavaScript をベースとしたクラウドベースのローコード開発プラットフォーム。
  • フルデベロッパー: 使用するコーディング言語をサポートする独自のテクノロジー スタック。
• UI フレームワーク: 各オプションの作成に使用できる UI フレームワークのタイプを示します。次に例を示します。
  • カードベース: カード インターフェースは、Apps Script を使用した カード サービスで構築された事前定義済みのウィジェットとカードです。または、適切なテクノロジー スタック（フルデベロッパー）でカードをレンダリングするために、適切にフォーマットされた JSON を返すことで構築することもできます。カードベースのインターフェースでは HTML や CSS の知識は必要ありません。また、デスクトップ クライアントとモバイル クライアントの両方で適切に動作します。
  • HTML: Apps Script には、サーバーサイドの Apps Script 関数とやり取りできるウェブページを開発するための HTML サービスが用意されています。HTML サービスで開発されたインターフェースは高度にカスタマイズ可能ですが、優れたユーザー エクスペリエンスを実現するには、より多くの手動作業が必要になります。
  • iframe: iframe は外部コンテンツを Google Workspace に埋め込み、ユーザー インターフェースを最もカスタマイズできます。

次の表に、各オプションの説明を示します。

Google Workspace アドオン

Google Workspace アドオンは、Google Workspace アプリと統合されるアプリケーションです。Google Workspace アドオンは、複数の Google Workspace アプリを拡張できます。ほとんどの場合、アプリは、拡張する Google Workspace アプリ内のサイドバーで開きます。

Google Workspace アドオンのドキュメントを確認する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---

リンク プレビューとスマートチップ | Google Workspace アドオン

Google ドキュメントを拡張する Google Workspace アドオンでは、サードパーティ サービスからカスタム リンク プレビューを作成できます。ドキュメントが Google Workspace アプリ内のユーザー、ファイル、カレンダーの予定、その他のエンティティの名前リンクに対して生成するスマートチップと同様に、アドオンはサードパーティのリンクのスマートチップを生成し、ユーザーがチップにカーソルを合わせたときにプレビューカードを表示できます。

リンクのプレビューは、既存の Google Workspace アドオンに追加することも、リンクのプレビュー専用の Google Workspace アドオンを別途作成することもできます。

リンクのプレビューとスマートチップのドキュメントを確認する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---

メールの下書き | Google Workspace アドオン

Gmail を拡張する Google Workspace アドオンは、ユーザーが新しいメールを作成するときや既存のメールへの返信時にカスタム インターフェースを提供できます。このインターフェースを使用するには、メールの下書き内（下書きの下部または more_vert [その他のオプション] メニュー）からアドオンを開きます。

メールの下書きに関するドキュメントを表示する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---

会議のメイン画面とサイドパネル | Google Workspace アドオン

Meet を拡張する Google Workspace アドオンを使用すると、会議のメインステージまたはサイドパネル インターフェースにアプリを埋め込むことができます。これにより、ユーザーは Meet を離れることなく、アプリを検出して共有し、コラボレーションできます。

他の Google Workspace アドオンとは異なり、Meet アドオンはカード フレームワーク UI を使用しません。代わりに、iframe を使用してアプリを埋め込みます。

Meet アドオン SDK のドキュメントを表示する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---

カレンダーでの会議 | Google Workspace アドオン

ウェブ会議プロバイダの場合は、Google カレンダーを会議ソリューションで拡張する Google Workspace アドオンを作成できます。このアドオンにより、カレンダーの予定に会議オプションが追加され、ユーザーはカレンダーから直接会議を作成して参加できるようになります。

カレンダー カンファレンスに関するドキュメントを表示する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

既存の UI を使用

---

エディタのアドオン

エディタ アドオンは、ドキュメント、スプレッドシート、スライド、フォームを拡張するアプリです。エディタ アドオンは、アドオンごとに 1 つのアプリのみを拡張できますが、同じ Marketplace リスティングに複数のエディタ アドオンを公開できます。ユーザーは、拡張するアプリの [拡張機能] メニューからエディタ アドオンを開きます。

エディタ アドオンには、次のインターフェースを使用できます。

• 拡張するアプリの横にあるサイドバー。
• 拡張するアプリをオーバーレイするダイアログ。
• スクリプトを実行するメニュー項目。
• Google スプレッドシートのスプレッドシート内のカスタム関数。

エディタ アドオンのドキュメントを見る

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---

Chat 用アプリ

Chat アプリは、リソースとサービスを Chat に取り込みます。Chat アプリは、次のようなさまざまな方法でユーザーとやり取りするように設計できます。

• テキスト メッセージまたはカード メッセージでスラッシュ コマンドに返信します。
• ダイアログを開いて、ユーザーがフォームデータの入力などの複数のステップからなるプロセスを完了できるようにします。
• リンクをプレビュー: 会話から直接操作できるように、役立つ情報を記載したカードを添付します。

Chat アプリのドキュメントを表示する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---

カスタム関数

カスタム関数を使用すると、スプレッドシートにさらに関数を追加できます。ユーザーは、スプレッドシートで利用可能な数百の組み込み関数と同様に、これらの関数を検索して使用できます。カスタム関数はエディタ アドオンとして公開できます。

カスタム関数のドキュメントを確認する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

既存の UI を使用

---

マクロ

マクロは、定義した特定の UI 操作を複製するスプレッドシートの記録です。マクロをキーボード ショートカットにリンクすることも、[拡張機能] > [マクロ] メニューから実行することもできます。

マクロを記録すると、スプレッドシートは UI 操作を複製する Apps Script 関数を自動的に作成します。マクロは、Apps Script エディタ内で直接編集できます。Apps Script でマクロをゼロから作成することも、すでに作成した関数をマクロに変換することもできます。

マクロのドキュメントを表示する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

既存の UI を使用

---

カスタムのメニュー、ダイアログ、サイドバー

ドキュメント、スプレッドシート、スライド、フォームのファイルに、カスタムのメニュー、プロンプト、アラート、HTML ベースのダイアログとサイドバーを追加できます。カスタム メニューは、拡張するアプリのデフォルト メニューの横に表示されます。ダイアログ、サイドバー、プロンプト、アラートは通常、メニュー項目のクリックなどのユーザー アクションや、イベントドリブン トリガーなどのトリガーによってアクティブになります。

カスタムのメニュー、ダイアログ、サイドバーのドキュメントを確認する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---

アプリの利用を促進する

アプリがドライブ ファイルをサポートしている場合は、ドライブのユーザー インターフェースと統合して、ファイルを作成または開くオプションとしてアプリを表示できます。ユーザーがドライブでファイルを右クリックすると、アプリが [新規] > [その他] メニューと [開く] メニューに表示されます。ユーザーがいずれかのメニューからアプリを選択すると、アプリが新しいウィンドウで開きます。

ドライブ アプリのドキュメントを表示する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

既存の UI を使用

---

Google Classroom アドオン

Google Classroom アドオンを使用すると、教師は課題、お知らせ、課題の資料に添付ファイルを作成できます。これらの添付ファイルは、Classroom の iframe でサードパーティのコンテンツを開きます。iframe は、ユーザーの種類と Classroom のコンテキストに応じて、個別の URL を開きます。

Classroom アドオンのドキュメントを確認する

コーディング オプション:

次のアプリを拡張します。

使用可能な UI フレームワーク:

---