GASで作ったWebアプリをスマホ対応させる方法（初級者向け）

目次

• 1. なぜ headのmetaタグだけでは不十分なのか？GASのHTML出力の特性
• 2. 解決策：GASの.addMetaTag() でviewportを設定する
• AIへの指示書（プロンプト例）

    コピー
    
.addMetaTag('viewport', 'width=device-width, initial-scale=1.0') 

Copy

1. なぜ headのmetaタグだけでは不十分なのか？GASのHTML出力の特性

Webページのレスポンシブ対応にmeta name=”viewport” content=”width=device-width, initial-scale=1.0″

が不可欠なコードです

GAS (Google Apps Script) の HtmlService.createHtmlOutputFromFile() を利用する場合、HTMLファイルに記述しただけでは期待通りに動作しないことがあります。

これは、GASがHTMLファイルを直接配信するのではなく、内部でHTMLを生成してレスポンスとして送信する仕組みによるものです。

そのため、 タグの情報が完全に引き継がれない、または解釈の優先順位が変わるなどの影響が生じ、結果としてスマホでレイアウトが崩れる原因となります。

2. 解決策：GASの.addMetaTag() でviewportを設定する

この問題を解決するために、GASの HtmlOutput オブジェクトには .addMetaTag(name, content) メソッドが用意されています。これを利用することで、GASのコードから生成するHTMLに直接 タグを追加し、viewportの設定を確実に行うことができます。

基本的な記述例：

    コピー
    
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('レスポンシブWebアプリ')
    .addMetaTag('viewport', 'width=device-device-width, initial-scale=1.0');//この一行を追加すればOK！
}

Copy

この一行を追加するだけで、GASは生成するHTMLにmeta name=”viewport” content=”width=device-width, initial-scale=1.0″を含めるようになり、スマホでの基本的な表示の問題が解消されます

AIへの指示書（プロンプト例）

スマートフォン表示に最適化されたシンプルで視認性の高いUIをAIに作ってもらうためのプロンプトテンプレートです：

    コピー
    
Google Apps Script（GAS）で作成するWebアプリ用に、スマートフォンでの視認性と操作性を重視したレスポンシブ対応のHTML＋CSSテンプレートを生成してください。

要件：
- モバイルファースト設計（画面幅360px〜480pxを最優先）
- `viewport` メタタグ付き
- テキストやボタンが見やすくタップしやすい（十分な余白とサイズ）
- セクションごとの視認性を高める背景色や罫線の工夫
- カードレイアウト風でも可
- デスクトップ時（800px以上）は自然に横並びになる
- エラーや表示崩れを防ぐためのシンプルかつ堅牢な構成
- Google Apps Scriptの `HtmlService.createHtmlOutputFromFile()` で使える形式

用途：問い合わせフォームやデータ一覧表示などに使える汎用UI


Copy