GASでウェブアプリを作るとHTMLやCSSを自分で書くことになりますが、素で書いてもレスポンシブ対応されません。
レスポンシブ対応されていないと、せっかく作ったウェブアプリがスマホでは非常に使いにくくなってしまいます。
GASでは、HTMLを呼び出すコードに下記を足すと簡単にレスポンシブ対応にしてくれます。
return html.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');ウェブアプリのHTMLを返すときはdoGet()関数にHTMLを返す処理を書きます。
それがevaluate()関数ですね。
htmlファイルに書かれている内容を評価して渡すときに、addMetaTagでレスポンシブの設定を追加してあげると、渡されるHTMLにメタタグが追加されてレスポンシブで表示ができるようになります。
公式のドキュメントはこちら
https://developers.google.com/apps-script/reference/html/html-output#detailed-documentation
ここに意外と大事なことが書かれています。(Google翻訳)
ページにメタタグを追加します。 Apps ScriptHTMLファイルに直接含まれているメタタグは無視されます。次のメタタグのみが許可されます。 <meta name="apple-mobile-web-app-capable" content="..."/> <meta name="google-site-verification" content="..."/> <meta name="mobile-web-app-capable" content="..."/> <meta name="viewport" content="..."/>
HTMLファイルに直接メタタグ書いても無視されてしまいますのでご注意ください。
コメント