経緯
サーバーサイドエンジニアがcssとかよく分からないから簡単なのがいいなと思いながら見つけたBlumaをgasにサクッと適用しようとしたらハマったのでめも。
Bluma
とにかくシンプルに、cssだけで書かれているので、Reactでもvueでも壁なく導入できるよっていうcssフレームワークらしい。
導入してみる
インストール
こちらのページを見ながらインストールした。いくつか方法があるみたいだけど、gasなのでCDNから直接参照する事にした。
必須コードの追記
HTML5ですよ
<!DOCTYPE html>
metaタグにviewportを追記
<meta name="viewport" content="width=device-width, initial-scale=1">
その他は公式のサンプルコードを真似て書いておく
ここでハマった
ローカルでは動くのに、gasにあげると動かないという謎の現象にハマった。どうやらviewportが効いていないようで、gas viewportで検索したら次の記事を見つけた。
GASでオンライン人狼的な何かを作る #2
https://qiita.com/TakumaKawashiro/items/2b8a56d6f09da76ed8d5
あなたが神か！って事で、サクッと自分のコードに次の通り設定して、responsive対応完了。
// GAS HTML表示
function doGet() {
return HtmlService.createTemplateFromFile("index").evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');
}