GASのHTML Serviceでスマホ対応の入力フォームを作る

公開日：2026/11/09

GASのHTML Serviceでスマホ対応の入力フォームを作る。スマートフォンとPCの入力フォームを示すアイキャッチ

この記事では、GASのHTML Serviceを使って、ブラウザで表示できる作業依頼受付フォームを作ります。

第3回では、Apps Scriptエディタから 作業依頼 シートへ1件登録する処理を作りました。第4回では、まだ登録処理とはつなげず、まず入力画面だけを作ります。

シリーズ全体の構成と完成画面は第0回で紹介しています。

1. 今回作るもの

今回作るのは、作業依頼を入力するWeb画面です。画面本体は index.html、CSSは style.html に分けます。

第4回では、登録ボタンを押してもスプレッドシートへは登録しません。画面からGASを呼び出す処理は第5回で作ります。

2. 完成イメージ

Webアプリとしてフォーム画面を表示できる
顧客、件名、依頼内容、担当者を入力できる
登録ボタンを表示できる
メッセージ表示領域を用意できる
スマートフォン幅でも入力欄が画面内に収まる

3. 前回までの状態

前回は、saveSampleRequest() と saveRequest(data) を作り、Apps Scriptエディタから作業依頼データを登録できる状態にしました。

4. 使用するファイル

今回使用するファイルは次の3つです。

ファイル	用途
`Code.gs`	`doGet()` と `include()` を追加する
`index.html`	入力フォームのHTML
`style.html`	入力フォームのCSS

Apps Scriptでは、HTMLファイルを複数に分けて管理できます。今回はCSSを style.html に分け、index.html から読み込みます。

5. 画面構成

項目	内容
顧客	第4回では固定のサンプル選択肢
件名	作業依頼のタイトル
依頼内容	作業内容の詳細
担当者	対応担当者
登録ボタン	第5回で登録処理につなげる
メッセージ表示領域	第5回で成功・失敗メッセージを表示する

6. 貼り付けるコード

Code.gs

function doGet() {
  return HtmlService
    .createTemplateFromFile('index')
    .evaluate()
    .setTitle('作業依頼受付フォーム')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <?!= include('style'); ?>
</head>
<body>
  <main class="page">
    <section class="form-panel" aria-labelledby="page-title">
      <p class="eyebrow">作業依頼・受付管理Webアプリ</p>
      <h1 id="page-title">作業依頼受付フォーム</h1>
      <p class="lead">必要事項を入力して、作業依頼の内容を整理します。第4回では画面表示までを作成します。</p>

      <form>
        <div class="field">
          <label for="customer">顧客</label>
          <select id="customer" name="customer">
            <option value="">選択してください</option>
            <option value="C001">サンプル商事</option>
            <option value="C002">テスト工業</option>
            <option value="C003">デモサービス</option>
          </select>
        </div>

        <div class="field">
          <label for="title">件名</label>
          <input id="title" name="title" type="text" placeholder="例：資料作成の依頼">
        </div>

        <div class="field">
          <label for="description">依頼内容</label>
          <textarea id="description" name="description" rows="6" placeholder="依頼したい作業内容を入力してください"></textarea>
        </div>

        <div class="field">
          <label for="assignee">担当者</label>
          <input id="assignee" name="assignee" type="text" placeholder="例：山田">
        </div>

        <button type="button">登録する</button>
        <p class="message">第5回で、このボタンからスプレッドシートへ登録できるようにします。</p>
      </form>
    </section>
  </main>
</body>
</html>

style.html

HTMLファイルとして style.html を作成し、次のCSSを貼り付けます。入力欄の幅や余白をそろえ、画面幅が560px以下のときは余白と見出しの大きさを調整します。

<style>
  :root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: #f4f7fb;
    color: #1f2937;
    line-height: 1.6;
  }

  .page {
    min-height: 100vh;
    padding: 24px 16px;
  }

  .form-panel {
    width: min(100%, 680px);
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 12px 30px rgba(31, 41, 55, 0.08);
  }

  .eyebrow {
    margin: 0 0 8px;
    color: #2563eb;
    font-size: 0.88rem;
    font-weight: 700;
  }

  h1 {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.35;
  }

  .lead {
    margin: 12px 0 24px;
    color: #4b5563;
  }

  .field {
    margin-bottom: 18px;
  }

  label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
  }

  input,
  select,
  textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 11px 12px;
    color: #111827;
    font: inherit;
    background: #ffffff;
  }

  textarea {
    resize: vertical;
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: 3px solid rgba(37, 99, 235, 0.18);
    border-color: #2563eb;
  }

  button {
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 13px 16px;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .message {
    margin: 14px 0 0;
    padding: 12px;
    border-radius: 6px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.95rem;
  }

  @media (max-width: 560px) {
    .page {
      padding: 12px;
    }

    .form-panel {
      padding: 20px;
    }

    h1 {
      font-size: 1.45rem;
    }
  }
</style>

7. コードの解説

doGet() がブラウザへHTMLを返す

ブラウザからWebアプリを開くと、Apps Scriptは doGet() を実行します。HtmlService.createTemplateFromFile('index') は index.html をテンプレートとして読み込み、evaluate() はテンプレート内のApps Script記法を評価して HtmlOutput を作ります。

setTitle() はブラウザのページタイトルを設定します。addMetaTag() は、スマートフォンの表示幅を端末に合わせるための viewport メタタグを追加します。このメタタグは index.html に直接書くのではなく、HtmlOutput に対して設定しています。

include() がstyle.htmlを読み込む

include(filename) は、指定されたHTMLファイルを読み込み、その内容を文字列として返します。index.html の <?!= include('style'); ?> は include('style') の結果をテンプレートへ挿入する記述です。style.html には <style> タグが含まれるため、読み込み後はそのCSSがページに適用されます。

<?!= ... ?> は、Apps Scriptのテンプレート記法のうち、結果をHTMLとして出力する形式です。ここでは自分で用意した style.html を挿入しています。この記法は出力をHTMLエスケープしません。利用者の入力値など、信頼できない内容の表示には使わないでください。

style.htmlでフォームの見た目を整える

style.html はCSSだけをまとめたファイルです。HTMLの構造や入力項目は index.html に置き、色、余白、文字、枠線などの見た目をCSSに分けています。

先頭の :root はページ全体の基本フォントと明るい配色を指定します。* { box-sizing: border-box; } は、要素の幅に内側の余白と枠線を含めて計算します。入力欄に width: 100% を指定しても、余白や枠線が加わって親要素からはみ出すのを防ぎます。

.page は画面全体の余白を、.form-panel はフォームを囲む領域を整えます。width: min(100%, 680px) により、パネルは画面幅を超えず、広い画面では最大680pxになります。margin: 0 auto で中央に置き、枠線と影で背景から区別します。

input、select、textarea には共通の幅、枠線、余白、文字設定を適用しています。label と .field は項目名と入力欄の間隔を整え、入力欄にフォーカスしたときは枠線と輪郭線を青くして、選択中の場所を見分けやすくします。テキストエリアは縦方向に高さを変えられます。

登録ボタンは親要素の幅いっぱいに表示し、.message は第5回で成功・失敗の案内を表示する領域として使います。今のコードでは説明文を表示するだけで、登録処理とはまだつながっていません。

最後の @media (max-width: 560px) は、表示領域の幅が560px以下のときだけ適用されます。スマートフォンではページとフォームの余白を小さくし、見出しの文字も縮めます。

登録ボタンはまだシートへ送信しない

index.html の登録ボタンは type="button" で、クリック時の処理もまだ設定していません。そのため、ボタンを押してもスプレッドシートへは登録されません。フォームからGASを呼び出す処理は第5回で追加します。

8. 導入手順

Apps Scriptエディタを開く
Code.gs に doGet() と include() を追加する
HTMLファイルとして index.html を作成する
HTMLファイルとして style.html を作成する
保存する
プレビューまたはテストデプロイで画面を確認する。共有用のWebアプリURLが必要な場合は、新しいデプロイを作成する

HTMLファイルを作成する

Apps Scriptエディタのファイル一覧にある追加メニューから「HTML」を選び、index と style を作成します。ファイル名の拡張子 .html はエディタが付けます。

Apps Scriptエディタのファイル追加メニュー。「HTML」が選択肢に表示されている — ファイル追加メニューからHTMLを選ぶ

作成後、ファイル一覧に Code.gs、index.html、style.html が並んでいることを確認します。

Apps Scriptエディタのファイル一覧。Code.gs、index.html、style.htmlが表示されている — 3つのファイルを作成した状態

Webアプリとしてデプロイする

Apps Scriptエディタ右上の「デプロイ」から「新しいデプロイ」を開きます。

新しいデプロイ画面。種類を選ぶ歯車メニューが表示されている — 新しいデプロイ画面

デプロイ種類の選択メニュー。「ウェブアプリ」が選択肢に表示されている — 種類の選択メニューからウェブアプリを選ぶ

種類の選択にある歯車をクリックし、「ウェブアプリ」を選びます。設定画面では「次のユーザーとして実行」と「アクセスできるユーザー」を選びます。前者はWebアプリを実行するユーザー、後者はWebアプリを開けるユーザーの範囲です。「自分」として実行する設定では、アクセスした人にかかわらず、デプロイしたユーザーの権限でスクリプトが動きます。

画像では「自分」「自分のみ」が選ばれています。「自分のみ」はデプロイしたユーザーだけがアクセスできる設定です。実際に使う人に合わせて選んでください。個人のメールアドレスにはモザイクをかけています。

ウェブアプリのデプロイ設定画面。「自分のみ」を含むアクセス範囲が表示され、メールアドレス部分はモザイク処理 — メールアドレス部分にモザイクをかけたデプロイ設定画面

デプロイが完了すると、デプロイIDとウェブアプリURLが表示されます。記事用の画像ではデプロイID全体を伏せ、URLは https://script.google.com/macros/s/ まで見せて、その後ろにモザイクをかけています。実際に画面を開くときは、自分のデプロイ画面に表示されたURLを使います。