【広告 No.01】

2016年5月27日金曜日

【GAS】Html ServiceのIFRAMEモードにてBootstrapやMDL等のレスポンシブフレームワークを使用する方法

【はじめに】

Html ServiceのIFRAMEモードにてBootstrapやMDL等のレスポンシブフレームワークを使用する方法についてのメモです。

Html Serviceでは一手間かけないとモバイル版の表示が、単純にPC版の縮小表示担ってしまったり、レイアウト崩れが起きたりします。Html Serviceを利用したシステム構築案件でちょっとはまりかけたので記録しておきます。

【実現したいこと】

Html Serviceによるレスポンシブなページを構築したい。




addMetaTag()メソッド

結論は非常にシンプルです。addMetaTag()メソッドを使用することです。

下記の例ではテンプレートからオブジェクト生成していますが、通常のファイルからの読込(createHtmlOutput()メソッド)でもaddMetaTag()メソッドを使用すればレスポンシブになります。

var html = HtmlService.createTemplateFromFile('index.html');
return html.evaluate()
                .setSandboxMode(HtmlService.SandboxMode.IFRAME)
                .addMetaTag('viewport','width=device-width,initial-scale=1');
ここで、プロジェクト内のindex.html側にviewport設定しているのに何故?と思った方のために少しだけ解説します。

Html Serviceはプロジェクト内の指定したファイル(ここではindex.html)をIFRAME要素として読み込み、表示します。

つまり、addMetaTag()メソッドでは、viewport設定を親に当たるページに対して行っている、ということですね。

以上「Html ServiceのIFRAMEモードにてBootstrapやMDL等のレスポンシブフレームワークを使用する方法」という小ネタでした。

【参考サイト】