Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2018年11月1日木曜日

HTML Serviceで作ったWebアプリの上部に表示されるバナーについて


ここでいうバナーとは

「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。」

2017年からGoogleAppsScriptでHTMLページを作成すると必ず最上部に表示されるようになったこのバナーです。


※ 2024年1月現在、右端に「✕」ボタンが表示されるようになり、クリックすることで消すことができるようになっています。






これを消すことができないかいろいろ調べて試してみると
以下の3つのパターンでは表示されないようです
  1. Gsuiteのドメイン内で使う
  2. 外部のHTMLファイルの中でiframeで読み込む
  3. Google Sitesに埋め込む

以下にissueが上がっていて、その中でも同じ方法が語られていました。
https://issuetracker.google.com/issues/63521070#comment4


以下は備忘録として書き残しておきます。

1つ目はGsuiteを使っている場合で、ドメイン内であれば何もしなくてもバナーは表示されないため社内でアプリを共有する場合は特に意識しなくても良さそうです。

もしそのアプリをドメイン外にも共有している場合、ドメイン外からアクセスした人のブラウザにはバナーが表示されます。


2つ目はiframeで読み込む方法で、GoogleAppsScriptのHTML Service以外の場所にhtmlを作って、その中のiframeのsrcにWebアプリのURLを指定してあげます。

その際はiframeで表示できるように .gs側でXFrameOptionsMode.ALLOWALL を設定する必要があります。

このように

コード.gs
function doGet() {
  var output = HtmlService.createHtmlOutputFromFile('index');
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return output;
}



index.html
<!DOCTYPE html>
<html>
  <body>
    <textarea></textarea>
  </body>
</html>
意訳
 


テキストエリア




上記をWebアプリとして公開して、別のhtmlのiframeに読み込ませる
これはGoogleAppsScriptではなく別途ホームページなどを用意する必要がある

another.html
<!DOCTYPE html>
<html>
  <body>
    <iframe src="GoogleAppsScriptで作ったWebAppの公開URL"></textarea>
  </body>
</html>



3つ目はGoogle Sitesに埋め込む方法です

Google Siteを新規作成(site.new)して
右サイドの挿入から「埋め込む」をクリックします


AppsScriptで公開したWebアプリのURLを入力して「挿入」をクリックします

これを公開してみると、バナーは表示されませんでした


参考

setXFrameOptionsMode(mode)
https://developers.google.com/apps-script/reference/html/html-output#setXFrameOptionsMode(XFrameOptionsMode)


issuetracker
https://issuetracker.google.com/issues/63521070#comment4

stackoverflow
https://stackoverflow.com/questions/44970940/how-to-remove-warning-this-application-was-created-by-another-user-not-by-goog

Latest post

Googleドキュメントに見出しを追加したい

今回の例では、ドキュメントの末尾に「見出しD」 を追加します。 見出しA, B, C, Dのスタイルは、見出し3 ( HEADING3 ) に設定しています。  下記Code.gsの  GOOGLE_DOCUMENT_URL を設定して  addHeadingToEnd()  を...