アップススクリプトのウェブアプリをスマホに対応させる

アップススクリプトのウェブアプリをスマホに対応させる

viewportが使用できるようになったことで、ウェブアプリのメリットの1つであるインターネットにアクセスできれば「デバイスを問わず」利用できることが実質的に実現されました。

viewportの使い方

通常viewportはHTMLのhead内にmetaタグとして記述します。しかし、アップススクリプトのウェブアプリでは、HtmlOutputにaddMetaTagを使用して実現します。HTMLのhead内に記述しても機能しないのでご注意ください。

以下では、viewportを使用しない場合、metaタグとしてviewportを記載した場合、addMetaTagを使用してviewportを付加した場合を実行できるサンプルと実行結果を示します。

viewportを使用するウェブアプリのソースコード

gsファイル

function doGet(e) {
  var type = e.parameter.type;
  var html_file_name = (type == "a")? "html_meta""html";
  var html = HtmlService.createTemplateFromFile(html_file_name).evaluate();
  if(type == "b"html.addMetaTag("viewport""initial-scale=1.0");
  return html.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

クエリパラメータtype=aでaddMetaTagを使用するウェブアプリ、type=bでmetaタグ入りのhtmlファイルを使用するウェブアプリ、それ以外の場合にviewportを使用しないウェブアプリとなるスクリプトソースコードです。

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>viewportが機能して折り返されるかをスマートフォンで確認する。</h1>
  </body>
</html>

ファイル名htmlのHTMLファイルです。h1タグに長めの文章が記述されています。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="initial-scale=1.0">
  </head>
  <body>
    <h1>viewportが機能して折り返されるかをスマートフォンで確認する。</h1>
  </body>
</html>

ファイル名html_metaのHTMLファイルです。こちらはhead内にmetaタグでviewportが記述されています。body内は上のHTMLファイルと同じです。

viewportの動作確認

viewportの動作確認typa=aviewportの動作確認typa=bviewportの動作確認クエリパラメータなし

iPhone5でウェブアプリを実行した場合の結果です。上から順に、type=a(addMetaTagを使用してviewportを付加した場合)、type=b(HTMLファイルhead内にmetaタグでviewportを記述した場合)、クエリパラメータなし(viewportを使用しない場合)です。

この結果を見て分かる通り、addMetaTagを使用した場合にのみviewportが機能しています。

スマートフォンやタブレットでも使用するウェブアプリを作成する場合にはaddMetaTagを使用してHtmlOutputにviewportを付加することを忘れないようにしましょう。またSandboxModeの設定も必須です。

今回のサンプルの実行URL(type=a)実行URL(type=b)実行URL(クエリパラメータなし)です。

お読みくださり、ありがとうございました。