目次
GAS（Google Apps Script）のWebAppは、スプレッドシートと連動した業務画面を手軽に作れる便利な仕組みです。サーバーを用意する必要がなく、社内向けの入力画面や確認画面を小さく作るのに向いています。
ただし、スマホで使う画面に使うときは注意が必要です。PCでは問題なく見えていた画面が、スマホでは文字が小さすぎたり、画面上部に固定したはずのヘッダーやボタンが流れてしまったりすることがあります。
この記事では、私たちが現場で実際に踏んだこの制約の原因と、対策、そして導入前に入れておくべき確認工程を整理します。
この記事の結論
- GAS WebAppはiframe内で配信されるため表示が崩れやすい
- viewport指定やstickyの固定表示は期待どおり効かないことがある
- 業務で使う前に、必ず実機のスマホで表示を確認する
GAS WebAppがスマホで崩れる原因とは
原因は、GASのWebAppの配信のされ方にあります。WebAppの画面は、自分で書いたHTMLがそのまま表示されるのではなく、Google側のページの中に埋め込まれたiframeの中で配信されます。
つまり、私たちが作った画面は「ページの中のページ」として表示されています。この構造のため、次のような症状が起きることがあります。
| 症状 | 起きること |
|---|---|
| viewport指定が効かない | スマホ向けに書いた表示幅の指定が思ったように反映されず、画面が縮小表示されたり崩れたりする |
| position:stickyが不発 | スクロールしても上部に固定したいヘッダーやボタンが、期待した位置で固定されない |
自分の画面側の記述だけでは、外側のページの振る舞いまで制御しきれない——これがつまずきの本質です。なお、GASの仕様は変わることがあるため、最新の挙動は公式のドキュメントで確認してください。
現場で発覚した経緯：帳票確認画面での出来事
この制約に気づいたのは、実案件（匿名）で作った画面を現場で使い始めたときでした。
作ったのは、手書きの帳票をスマホで撮影し、その内容を確認・修正する画面です。撮影した帳票の内容を画面に並べ、現場の担当者が見比べながら直す、という使い方を想定していました。
入力項目が多いため、画面上部に見出しを、操作しやすい位置に保存ボタンを固定する設計にしていました。PCのブラウザで確認した段階では、固定表示も含めて問題なく動いていたのです。
ところが現場のスマホで開くと、表示が想定と違いました。固定したはずのヘッダーやボタンがスクロールで流れてしまい、長い画面の途中で「保存ボタンはどこか」を探す状態になっていました。確認作業のための画面なのに、操作そのものに手間がかかる形になっていたのです。
なぜPCでは気づかないのか
この問題がやっかいなのは、PCブラウザでは問題なく見えてしまう点です。
開発や動作確認は、たいていPCで行います。画面幅が広く、スクロールの量も少ないPCでは、表示幅の問題も固定表示の問題も表に出にくいのです。その結果、「完成した」と判断した後、現場に配ってから初めて崩れが見つかる、という順序になりがちです。
PCでの確認だけで出荷してしまうと、手戻りは現場の運用開始後に発生します。現場の信頼を損ねるうえに、修正の手間も大きくなります。
GAS WebAppの表示崩れの対策
対策は大きく2つです。
1. 固定表示に頼らないレイアウトへ寄せる
stickyなどの固定表示が効かない前提で、スクロールしても迷わない並び順に作り替えます。考え方の例は次のとおりです。
- 保存などの操作ボタンは、固定ではなく入力欄のすぐ下に置く
- 長い画面は、必要に応じて区切って見せる
- 見出しが流れても、いま何を確認しているか分かる構成にする
「画面に固定して常に見せる」のではなく、必要な場所に必要な操作がある配置にすることで、固定表示がなくても使える画面になります。
2. UI要件が厳しい画面は、最初から制約を前提に設計する
操作性への要求が高い画面ほど、後から直すのは大変です。「スマホでの固定表示が必須」「表示幅を細かく制御したい」といった要件がある画面は、設計の段階からWebAppの制約を前提に検討します。そのうえで、WebAppで十分か、別の方式が向いているかを判断します。
GAS WebAppを業務画面に使う前の確認手順
今回の教訓から、導入時の工程にはこの順序を入れています。
- PCで動作確認：機能やデータの受け渡しが正しく動くかを確認する
- 実機スマホで表示確認：現場で実際に使う端末で開き、表示幅・スクロール・ボタンの位置を確かめる
- 崩れを直して現場へ：固定表示に頼っている箇所があれば、レイアウトを見直してから配る
ポイントは、PC上での縮小表示などで代用せず、実機のスマホで確認することです。現場の担当者と同じ条件で触ってみて、初めて見える崩れがあります。
まとめ
- GASのWebAppはiframe内で配信されるため、viewport指定やstickyが期待どおり効かないことがある
- PCブラウザでは問題なく見えるため、崩れに気づくのが現場に出てからになりやすい
- 対策は、固定表示に頼らないレイアウトに寄せることと、UI要件が厳しい画面を最初から制約前提で設計すること
- 業務画面に使う前に、実機のスマホで確認する工程を必ず入れる
よくある質問
Q. GAS WebAppでviewportを指定してもスマホで効かないのはなぜ？ GASのWebAppは、画面がGoogle側のページに埋め込まれたiframeの中で配信されるためです。自分で書いたviewport指定が思ったとおりに反映されず、スマホで文字や部品が小さく表示されたり、崩れたりすることがあります。
Q. GAS WebAppでposition:stickyが効かないときの対策は？ 固定表示に頼らないレイアウトへ寄せるのが現実的です。ヘッダーや保存ボタンを画面に固定するのではなく、入力欄のすぐ下に操作ボタンを置くなど、スクロールしても迷わない並び順で画面を設計します。
Q. GAS WebAppを現場のスマホで使っても大丈夫？ 使えますが、導入前に実機のスマホで表示を確認する工程を必ず入れてください。PCブラウザでは問題なく見えるため、崩れに気づくのは現場に出てからになりがちです。UI要件が厳しい画面は、最初から制約を前提に設計します。
RENOYでは、GASを使った業務画面の設計・開発を、現場のスマホでの使い勝手まで確認したうえで進めています。「この画面をGASで作って現場で使えるか分からない」という段階のご相談も歓迎です。まずはお気軽に無料個別相談（オンライン・60分）をご利用ください。サービス内容をまとめた資料は資料請求からご覧いただけます。