経緯

サーバーサイドエンジニアがcssとかよく分からないから簡単なのがいいなと思いながら見つけたBlumaをgasにサクッと適用しようとしたらハマったのでめも。

Bluma

とにかくシンプルに、cssだけで書かれているので、Reactでもvueでも壁なく導入できるよっていうcssフレームワークらしい。

https://bulma.io/

導入してみる

インストール

こちらのページを見ながらインストールした。いくつか方法があるみたいだけど、gasなのでCDNから直接参照する事にした。

https://bulma.io/documentation/overview/start/

必須コードの追記

HTML5ですよ

<!DOCTYPE html>

metaタグにviewportを追記

<meta name="viewport" content="width=device-width, initial-scale=1">

その他は公式のサンプルコードを真似て書いておく

https://bulma.io/documentation/overview/start/

ここでハマった

ローカルでは動くのに、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');
}