Google App Maker ー アプリを別のサイトに埋め込む

App Maker にアクセスする際の URL はとてもわかりづらく長ったらしいです。
例）https://script.google.com/a/macros/howdylikes.jp/s/AKfycbwBQjaeu9QPiZw5G1xJznxW2m6STI9DTpoA-EoyUXao6SOz4vd5beDO/exec

単純にわかりにくいし、「何らかの理由でアプリケーションを作り直したい」となったときに、 URL を再周知したりするのが面倒です。
そのため筆者の場合、iframe で別のサイトに埋め込むようにすることが多いです。

本記事では、そのやり方を解説します。

事前準備

DEPLOYMENTS 画面から App Maker の URL をコピーする

埋め込み方

2種類あります、新しい Google サイトに埋め込む場合と、それ以外の場合です。
※正確には*.google.comかそれ以外になるなので、新しい Google サイトでも URL を変えていた場合は後者になります。

新しいGoogleサイトに埋め込む

Embed を選択し、新しい Google サイトに埋め込む

実際に埋め込んだ画面

iframeで表示しているだけなので普通にアクセスする場合と同様、（最初だけ）認可画面が表示される。

認可後は通常通り表示される。

新しい Google サイト以外に埋め込む

新しい Goolge サイト以外の Web サイトに埋め込む場合、何も設定しないとオリジンエラーになって表示できない。

Refused to display 'https://script.google.com/a/macros/howdylikes.jp/s/AKfycbwBQjaeu9QPiZw5G1xJznxW2m6STI9DTpoA-EoyUXao6SOz4vd5beDO/exec' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Allow embedding app を ON にする

APP SETTINGS 画面で Allow embedding app を ON にする。

Allow embedding app をON にした後

再び PUBLISH して画面を表示するとこのように App Maker のアプリが iframe 内に表示される。

参考サイト

Allow Apps to be Embedded | Application Settings |  App Maker  |  Google Developers