Posted at

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

More than 1 year has passed since last update.

App Maker にアクセスする際の URL はとてもわかりづらく長ったらしいです。

例)https://script.google.com/a/macros/howdylikes.jp/s/AKfycbwBQjaeu9QPiZw5G1xJznxW2m6STI9DTpoA-EoyUXao6SOz4vd5beDO/exec

単純にわかりにくいし、「何らかの理由でアプリケーションを作り直したい」となったときに、 URL を再周知したりするのが面倒です。

そのため筆者の場合、iframe で別のサイトに埋め込むようにすることが多いです。

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


事前準備

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

image.png


埋め込み方

2種類あります、新しい Google サイトに埋め込む場合と、それ以外の場合です。

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


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


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

image.png

image.png


実際に埋め込んだ画面

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

image.png

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

image.png


新しい 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'.

image.png


Allow embedding app を ON にする

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

image.png


Allow embedding app をON にした後

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

image.png


参考サイト

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