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

### バナー「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。」を出したくない
## 背景
Google Apps Script で作成する Webアプリが非常に簡単に作れるので重宝していますが。作成した Webアプリを呼び出すと。下の様に 「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。」 バナーが出てしまい、ユーザーに不安感を与えたり、画面が狭くなるので。消してしまう方法を検討しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533932/39d39361-57c3-dd62-e6bf-a9a448070c81.png" width=40%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533932/4e5f144c-a227-439f-7113-80bb86149291.png" width=40%>

## ソリューション

Google Workspace の有料アカウントで、独自ドメイン内であれば、このバナーは表示されないのですが、無料アカウントのApps Scriptでは、このバナーを消すことはできないようです。
しかし、無料アカウントでも通常のページ(親)に IFRAME でこの Webアプリ(子)を表示させるとバナー表示を抑止できます。 
注意点として、親ページの URL に指定されたパラメータを IFRAME の src に指定される Apps Scriptの Web アプリにパラメータを受け渡す必要があります。

## index.html --親ページ （Web アプリの表示される iframe を含むページ）
このページでは、onload 時に指定されたパラメータを、そのまま Web アプリの URL に追加して、iframe　の src に設定しています。
  
```
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <base target="_top">
    <style>
    * {
 		margin: 0;
  		padding: 0;
  		overflow: hidden;
  		height:100vh;
	}
	iframe {
  		border:none;
  		width:100%;
  		height:100%;
	}
    </style>
  </head>
  <script>
    window.onload = (e) => {
        const gasappurl = 'https://script.google.com/a/domaindummy/macros/s/AKfycbya_-2JQytrA7B7lBuhNFqWiAnztIOjxK1KXioa1_I_zqGpHGQgAz_qbOE6Ju12WF5QSA/exec'
        let ifm = document.getElementById('gasiframe')
        ifm.src = gasappurl + window.location.search
    }
  </script>
  <body>
	<div class="container">
		<iframe id="gasiframe" src="about:blank"></iframe>
	</div>
  </body>
</html>
```
モバイルでの表示対応のために
```
<meta name="viewport" content="width=device-width, initial-scale=1" />
```
 ページ全体での表示幅、表示高を確保するために
```
<style>
    * {
 		margin: 0;
  		padding: 0;
  		overflow: hidden;
  		height:100vh;
	}
	iframe {
  		border:none;
  		width:100%;
  		height:100%;
	}
</style>
```
を記述しています。
   

## GAS
### --- main.gs (Web アプリ本体)
```
function doGet(e) {
    let htmltemplate=HtmlService.createTemplateFromFile('index')
    htmltemplate.params=JSON.stringify(e.parameter)
    htmltemplate.sessionid=Utilities.getUuid()
    let html=htmltemplate.evaluate()
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
        .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    return(html)
}
```
iframe でホストされる Web アプリのため、下記を追加しています。
```
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
```
iframe でホストする場合は、親ページ側で meta tag が記述されているので下記は不要ですが、親ページ無しでも動作するように築城しています。
```
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
```



### --- index.html (main.gs から参照されるファイル)
```
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      window.onload = (e) => {
        let params=JSON.parse('<?!=params?>')
        if(Object.keys(params).length>0){
          let tag=''
          for (key in params){
            tag=`<tr><td>${key}</td><td>${params[key]}</td><tr>${tag}`
          }    
          document.getElementById('params').innerHTML=`パラメータ一覧<br><table>${tag}</table>`
        } else {
          document.getElementById('params').innerHTML=`パラメータはありません。`
        }
      }
    </script>
    <style>
      table {max-width:300px;width:100%;border-collapse: collapse;}
      td {width:50%}
    </style>
  </head>
  <body>
    この上に「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。」バナーが出ているかどうか確認してください。<br>
    <br>
    <div id='params'></div>    
  </body>
</html>
```