Google Add-OnのUI実装をHTMLで行いたい

現在Gmail Add-Onを実装しています。

やりたいこと

Gmail Add-OnのUI表示の設定を、GASで行うのではなくHTML,CSSで行いたい

想定した方法

UIの部分はHTMLでも表現できるという認識を公式ドキュメント（Serve HTML as a web app）から読み取ったのですが
次のようなエラーが出てしまいます。

Apps Script から返された値の型は、アドオン プラットフォームでは使用できません。また、値を返す前に、どのビルダーにも 「build」 を呼び出すようにしてください。値: 「html: "\n\n  \n    \n  \n  \n    Hello, World!\n  \n"
title: ""
json: 
"{\"functionNames\":[\"onHomepage\",\"createCatCard\",\"onChangeCat\",\"truncate\",\"onGmailMessage\",\"onGmailCompose\",\"onGmailInsertCat\",\"doGet\"]
,\"sandboxMode\":\"IFRAME_SANDBOX\",\"callbackTimeout\":75000,\"cajaJs\":\"\",\"eei\":\"省略",\"sandboxHost\":\"https://***.com\",\"clientSideProperties\":{\"google.script.sandbox.mode\":\"IFRAME_SANDBOX\",\"google.script.host.origin\":\"https://script.google.com\"},\"actionPrefix\":\"/macros/u/0/d/1省略\",\"title\":\"\",\"userHtml\":\"\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cbase target\u003d\\"_top\\"\u003e\n  \u003c\/head\u003e\n  \u003cbody\u003e\n    Hello, World!\n  \u003c\/body\u003e\n\u003c\/html\u003e\",\"ncc\":\"{\\"awhs\\":true}\"}"
sandbox_strategy: IFRAME_SANDBOX
embed_action: "iframedAppPanel"
clickjacking_preference: DEFAULT」。

やったこと

設定は以下の手順で行いました。

Code.js

GAS
1function doGet() {
2//  return HtmlService.createHtmlOutputFromFile('Index');
3  return HtmlService.createTemplateFromFile('Index').evaluate();
4}

appsscript.json(一部)

JSON
1  "addOns": {
2    "common": {
3      "name": "Cats",
4      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
5      "useLocaleFromApp": true,
6      "homepageTrigger": {
7        "runFunction": "doGet",
8        "enabled": true
9      },

Index.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    Hello, World!
8  </body>
9</html>

なぜこのような実装をしたのか

①Code.gsについて

To create a web app with the HTML service, your code must include a doGet() function that tells the script how to serve the page.

より、code.gs にdoGet()を設定した。

② appsscript.jsonについて
GASでUIを実装するのと同様に、homepageTriggerで指定してあげる必要があると思ったから。

質問

どこかの設定に誤りがあるのでしょうか？また、対処法はどのようにすれば良いのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

残念ながら、Gmailを含むGoogle workspacesのアドオンに、フルのHTML/CSSは使えないようです。

上記公式ドキュメントでは、HTMLが使えない理由として、HTMLではなく、Javascrptの関数を使って部品を付け足していくwidjetベースのアプローチの方がデスクトップ／モバイル両対応が簡単になるから、と説明されています。

Stackoverflowを検索したところ、CardServiceを使用する例があったので試しましたが、このコードの中にあるCardService.newKeyValue().setContent()関数で使用できるのは、ごくごく基本的なHTMLだけであり、inputやbuttonすら使えないようです。
（stackoverflowの回答例は<b>タグを使用したもの）

投稿2021/04/23 05:05

編集2021/04/23 05:07

退会済みユーザー

総合スコア0

minminzemin

2021/04/24 13:22 編集

> フルのHTML/CSSは使えないようです https://developers.google.com/apps-script/guides/html#serve_html_as_a_web_app　のページに、You can even use it to generate the body of an email.　と書いてあったのでできると思ったのですが... できないんですね。　では、　https://developers.google.com/apps-script/guides/html#serve_html_as_a_web_app　は何を表しているのでしょうか？？

退会済みユーザー

2021/04/24 13:27 編集

> では、　https://developers.google.com/apps-script/guides/html#serve_html_as_a_web_app　は何を表しているのでしょうか？？「Gmailのサイドバーに表示されるアドオンのようなGoogle Spacesの個別アプリ配下のAdd-on」としてではなく、単体のWebアプリとして公開する際に、HTMLを記述して公開するやり方に関する説明です。

行動規範の内容に同意します