GAS で公開するウェブページをスマホ画面に対応させる

# GAS でウェブページを公開する

Google Apps Script (GAS) のコードでウェブページを公開することができます。

[HTML サービス: HTML の作成と配信  |  Apps Script  |  Google for Developers](https://developers.google.com/apps-script/guides/html)

```javascript:コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index.html');
}
```

自分が利用するウェブアプリを作って公開するのに使っています。

[蔵書管理アプリを作り直した - Speaker Deck](
https://speakerdeck.com/tinymouse/zang-shu-guan-li-apuriwozuo-rizhi-sita)

![1-v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/b1f35cb1-6e46-899d-f1e3-fd4569864c36.png)

![1-h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/b490e2d9-e4fd-c8a6-61fb-eb444d87e99c.png)

GAS で公開したウェブページは、画面の上部に「このアプリケーションは Google Apps Scrit のユーザによって作成されたものです」が表示されます。これは GAS の仕様なので仕方ありません。
問題は、このページをスマホの縦画面で表示したとき、画面の上部の表示に合わせてウェブページ全体が縮小されてしまうことです。

# GAS で公開するウェブページをスマホ画面に対応させる①

ウェブページをスマホ画面に対応させるために、GAS のコードを修正します。

[スマホでGASウェブアプリが縮小表示されてしまうときの対応 - Qiita](https://qiita.com/aknm21/items/8f9db68d43003d93fbe1)

```javascript:コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index.html')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1, user-scalable=no');
}
```

![2-v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/c872c710-6670-0e78-d1d4-43db062c85a8.png)

![2-h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/5f9bac90-a75f-4c1d-a667-f0e5e04f1037.png)

縮小されないで表示されました。
ところが、「このアプリケーションは」の表示が大きくて、ウェブページを表示する範囲が狭くなってしまいます。

また、ある時期は、「このアプリケーションは」の表示が改行されなくて、横スクロールしないといけなくなっていました。

[GASWEBアプリについての質問です。社内ツールでGASWEBアプリを... - Yahoo!知恵袋](
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10285389265)

# GAS で公開するウェブページをスマホ画面に対応させる②

上記のページで提案されている対応を参考にして、以下のようにしてみました。

```javascript:コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index.html')
  .addMetaTag('viewport', 'user-scalable=no');
}
```

```index.html
<style>
    * { 
      margin: 0; padding: 0; 
      box-sizing: border-box;
    }
    html {
      height: 100%;
      width: 100%;
    }
    body{
      position: absolute;
      transform-origin: top left;
    }
</style>
<script>
    window.onload = function(){
      var scale = window.innerWidth / window.screen.width;
      document.body.style.width = 100/scale+"%";
      document.body.style.height = 100/scale+"%";
      document.body.style.transform = "scale("+scale+")";
    };
</script>
```

![3-v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/f1248a84-e6df-6f99-bbaf-1d88af7ad888.png)

ところが、スマホの画面を回転させると、よろしくなくなりました。↓

![3-h (カスタム).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/8b147767-3bc6-c0d0-decc-5341f5d66696.png)

画面のサイズが変わったときも、同様の処理されるようにします。

```index.html
<script>
    (中略)
    window.resize = function(){
      var scale = window.innerWidth / window.screen.width;
      document.body.style.width = 100/scale+"%";
      document.body.style.height = 100/scale+"%";
      document.body.style.transform = "scale("+scale+")";
    };
</script>
```

![4-h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/f5673f3b-836a-2511-455e-f95281543c37.png)

さらに、初期の倍率を変えると、「このアプリケーションは」の表示を小さくできました。

```javascript:コード.gs
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index.html')
  .addMetaTag('viewport', 'initial-scale=0.4, user-scalable=no');
}
```

![5-v.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/c46ecccf-2b7e-93ea-5351-b0135aa680a4.png)

![5-h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114460/71a912d4-ed12-7038-8f35-2ee9bd08124a.png)

画面の倍率をコードで指定するなら、ウェブページを表示する倍率も固定でよさそうです。

```index.html
<script>
    window.onload = function(){
      var scale = 1 / 0.4;
      document.body.style.width = 100/scale+"%";
      document.body.style.height = 100/scale+"%";
      document.body.style.transform = "scale("+scale+")";
    };
</script>
```