Google Apps Scriptで入力画面のUIを作る方法と、フォームとの使い分け

2026年6月3日

＠SOHO編集部

この記事のポイント

✓Google Apps Script（GAS）で入力画面のUIを作る方法を
✓HTMLのダイアログとサイドバー
✓ウェブアプリの5つに分けて解説します

Googleスプレッドシートに毎日同じ形のデータを入力していて、入力の画面を作れないかと考えたことはないでしょうか。セルに直接打ち込むと、列を間違える、必要な項目が抜ける、他の人の行を上書きしてしまう、といったことが起きます。Google Apps Script（GAS）を使えば、スプレッドシートの上に専用のメニューや入力画面を作れます。

この記事では、GASで作れるUI（ユーザーインターフェース。人が操作する画面のこと）を5つの種類に分け、それぞれの作り方を、Googleの公式ドキュメントで確かめた手順と短いコード例で説明します。GASのUIが向いている場面と向いていない場面、社外の人に答えてもらう入力ではフォームの道具をどう使い分けるかも整理します。回答の受け付けから担当決め、返信までを1つの画面で行えるHalictにも触れます。

GASで作れるUIは5種類

GASとは、Googleが提供するプログラムの仕組みで、スプレッドシートやドキュメント、Gmailなどの操作を自動化できます。JavaScriptという言語で書きます。Googleの公式ドキュメントでは、スプレッドシートやドキュメントにひもづいたGASで表示できるUIの要素として、アラート、プロンプト、トースト、ダイアログ、サイドバーが挙げられています。

Google ドキュメント、Google スプレッドシート、Google フォームにバインドされた Google Apps Script プロジェクトでは、組み込みのアラート、プロンプト、トースト、ダイアログ、サイドバーなどのユーザーインターフェース要素を表示できます。出典: developers.google.com

これにメニューとウェブアプリを加え、用途で整理すると次の5種類になります。

種類	どんなものか	向いている用途
カスタムメニュー	スプレッドシートの上部に独自のメニューを追加する	作った処理を呼び出す入口
アラートとプロンプト	決まった形の小さな確認画面と、1行の入力画面	確認、1項目だけの入力
HTMLのダイアログ	自由に作れる入力画面を、シートの上に重ねて開く	複数項目の入力
HTMLのサイドバー	画面の右側に開く細長い画面	シートを見ながらの入力や操作
ウェブアプリ	URLで開く独立した画面	スプレッドシートを開かない人の入力

上の4つは、スプレッドシートを開いている人の画面に表示されるものです。ウェブアプリだけは、スプレッドシートを開かずに、ブラウザでURLを開いて使います。

GASを書く場所を開く

スプレッドシートにひもづいたGASを書くには、スプレッドシートを開き、上部のメニューの「拡張機能」から「Apps Script」を選びます。Googleの公式ドキュメントによると、もう一度開くときも同じ操作をするか、Apps Script のダッシュボードから開きます。開いた画面がスクリプトのエディタで、ここにコードを書き、保存して実行します。

初めて実行するときは、スクリプトがスプレッドシートを操作してよいかを確かめる承認の画面が表示されます。自分で書いたスクリプトであることを確かめてから許可します。

UI1：カスタムメニューで入口を作る

最初に作るのは、スプレッドシートの上部に独自のメニューを追加する仕組みです。ダイアログやサイドバーを作っても、開く入口がなければ使えません。カスタムメニューは、作った処理を誰でも呼び出せる入口になります。

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('入力')
    .addItem('入力画面を開く', 'showForm')
    .addToUi();
}

onOpen という名前の関数は、スプレッドシートを開いたときに自動で実行されます。この例では、「入力」というメニューが追加され、その中の「入力画面を開く」を選ぶと、showForm という関数が実行されます。メニューの中に区切り線を入れる、メニューの中にさらにメニューを作る、といったこともできます。手順はGoogleのカスタムメニューの解説にあります。

メニューを作るときの注意

メニューの名前は、使う人が見て何をするものか分かる言葉にします。「スクリプト」「処理1」のような名前では、他の人には何が起きるか分かりません。「入力画面を開く」「今月の集計を作る」のように、操作の結果が分かる名前にします。

また、onOpen はスプレッドシートを開いたときに動くので、ここで重い処理をするとスプレッドシートを開くたびに待たされます。onOpen ではメニューを追加するだけにし、実際の処理はメニューから呼び出す関数に書きます。

UI2：アラートとプロンプトで確認と1行の入力

アラートは、メッセージと「OK」のボタンが表示される小さな画面です。プロンプトは、それに1行の入力欄が付いたものです。どちらも、決まった形の画面なので、HTMLを書かずに使えます。

function askName() {
  const ui = SpreadsheetApp.getUi();
  const res = ui.prompt('担当者の名前を入力してください', ui.ButtonSet.OK_CANCEL);
  if (res.getSelectedButton() === ui.Button.OK) {
    ui.alert('入力された名前：' + res.getResponseText());
  }
}

ui.prompt で入力の画面を開き、押されたボタンが「OK」なら、入力された文字を取り出してアラートで表示しています。

Googleの公式ドキュメントによると、アラートとプロンプトは、画面が開いている間、スクリプトの処理を止めて待ちます。使う人が画面を閉じると、処理が続きから再開されます。このため、「本当に削除してよいですか」のような確認や、処理の途中で1つだけ値を聞きたいときに向いています。

アラートとプロンプトの限界

プロンプトで聞けるのは1行の文字だけです。日付を選んでもらう、選択肢から選んでもらう、複数の項目をまとめて入力してもらう、といったことはできません。プロンプトを何回も続けて開くと、使う人は何問目なのか分からなくなり、途中で間違えても戻れません。項目が2つ以上になるなら、次のHTMLのダイアログを使います。

UI3：HTMLのダイアログで複数項目の入力画面を作る

複数の項目を入力する画面を作るなら、HTMLのダイアログを使います。HTMLとは、ウェブページの見た目を書くための言葉です。HTMLで入力欄やボタンを並べた画面を作り、それをスプレッドシートの上に重ねて開きます。

作り方は3段階です。

スクリプトのエディタで、左側の「ファイルを追加」から「HTML」を選び、入力画面のファイルを作る
そのファイルを読み込んで、ダイアログとして開く関数を書く
入力画面で「保存」が押されたら、入力された値をスプレッドシートに書き込む関数を呼び出す

入力画面のファイル（Form.html）

<!DOCTYPE html>
<html>
  <body>
    <p>名前<br><input id="name"></p>
    <p>内容<br><textarea id="body"></textarea></p>
    <button onclick="send()">保存</button>
    <script>
      function send() {
        const data = {
          name: document.getElementById('name').value,
          body: document.getElementById('body').value,
        };
        google.script.run
          .withSuccessHandler(() => google.script.host.close())
          .saveRecord(data);
      }
    </script>
  </body>
</html>

ダイアログを開く関数と、書き込む関数（コード.gs）

function showForm() {
  const html = HtmlService.createHtmlOutputFromFile('Form')
    .setWidth(400)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, '記録の入力');
}

function saveRecord(data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('記録');
  sheet.appendRow([new Date(), data.name, data.body]);
}

この例を動かすには、スプレッドシートに「記録」という名前のシートを用意しておきます。先ほどのカスタムメニューから「入力画面を開く」を選ぶと、名前と内容を入力する画面が開き、「保存」を押すと「記録」のシートの最後の行に、日時と名前と内容が1行で追加されます。

入力画面とスクリプトのやり取りの仕組み

入力画面（HTML）の中から、スクリプトの関数を呼び出しているのが google.script.run の部分です。Googleの公式ドキュメントでは、google.script.run は、HTMLの画面からサーバー側のGASの関数を呼び出せる、非同期の仕組みだと説明されています。非同期とは、呼び出した後、結果を待たずに次の処理に進むことです。そのため、書き込みが終わった後に画面を閉じたいときは、withSuccessHandler で「成功したら実行する処理」を指定します。この例では、書き込みが終わったら google.script.host.close でダイアログを閉じています。

公式ドキュメントによると、HTMLのダイアログは、アラートやプロンプトと違い、開いている間もスクリプトの処理を止めません。ダイアログを開く関数は、開いた時点で終わります。入力された値を受け取るのは、ダイアログから呼び出される別の関数（この例では saveRecord）の役目です。

入力のチェックを付ける

実際に使う入力画面では、必須の項目が空のまま保存されないようにします。HTMLの入力欄に required を付ける方法もありますが、確実なのは、保存の前に値が空でないかを確かめ、空なら保存せずにメッセージを表示する処理を、送る側と受け取る側の両方に書くことです。受け取る側（saveRecord）でも確かめておけば、画面の作りを変えたときにも空の行が入りません。

見た目と使いやすさを整える

HTMLのダイアログは、自由に作れる分、何もしないと入力欄が小さく、文字も詰まった画面になります。使う人が迷わずに入力できるよう、次の点を整えます。

整えること	理由
入力欄の横に項目の名前を書く	入力欄に薄く書いた説明は、入力を始めると消えて分からなくなる
入力欄の幅をダイアログの幅に合わせる	長い文を入力するときに全体が見える
必須の項目に印を付ける	保存できない理由がすぐ分かる
保存のボタンを1つにし、大きくする	押し間違いを防ぐ
保存した後に結果を表示する	保存できたかどうかが分かる
文字の大きさを読みやすくする	小さすぎる文字は入力の間違いのもとになる

見た目を整えるには、HTMLのファイルの中にCSSと呼ばれる見た目の指定を書きます。凝った見た目にする必要はありません。入力欄の幅、余白、文字の大きさがそろっているだけで、使いやすさは大きく変わります。

選択肢の欄を付ける

担当や状況のように選んでもらう項目は、HTMLの select という部品で選択肢の一覧を作ります。選択肢をHTMLに直接書くと、担当者が変わるたびにコードを直す必要があります。スプレッドシートの別のシートに選択肢の一覧を用意しておき、ダイアログを開くときにスクリプトでその一覧を読み込んで選択肢を作る形にすると、シートを書き換えるだけで選択肢を変えられます。読み込みにも google.script.run を使い、withSuccessHandler で受け取った一覧から選択肢を組み立てます。

UI4：サイドバーでシートを見ながら操作する

サイドバーは、スプレッドシートの右側に開く細長い画面です。中身はダイアログと同じくHTMLで作り、開くときに showModalDialog の代わりに showSidebar を使います。

function showSide() {
  const html = HtmlService.createHtmlOutputFromFile('Form')
    .setTitle('記録の入力');
  SpreadsheetApp.getUi().showSidebar(html);
}

ダイアログはシートの上に重なって開くので、開いている間はシートが見えにくくなります。サイドバーは右側に開くので、シートの内容を見ながら入力や操作ができます。過去の記録を見ながら新しい行を入力する、選んだ行に対して操作をする、といった使い方に向いています。

公式ドキュメントによると、サイドバーもダイアログと同じく、開いている間にスクリプトの処理を止めません。閉じるのは、使う人が閉じるか、サイドバーの中から google.script.host.close を呼び出したときだけです。

UI5：ウェブアプリでスプレッドシートを開かない人の入力画面を作る

スプレッドシートの編集の権限を渡したくない人に入力してもらいたい場合は、ウェブアプリを使います。ウェブアプリは、GASで作った画面をURLで開けるようにしたものです。

ウェブアプリにするには、doGet という関数で、表示するHTMLを返します。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Form');
}

そのうえで、Googleのウェブアプリの解説にある手順で公開します。スクリプトのエディタの右上の「デプロイ」から「新しいデプロイ」を選び、種類の選択でウェブアプリを選んで、設定を入力し、「デプロイ」を押します。表示されたURLを、使ってもらう人に共有します。

ウェブアプリが合う使い方の例

ウェブアプリは、スプレッドシートを開かずにブラウザだけで使えるので、次のような使い方に向いています。

外回りの担当者が、スマートフォンから訪問の記録を入力する
店舗のスタッフが、その日の売上や在庫の数を閉店後に入力する
社内の備品の貸し出しを、借りる人がその場で記録する

どれも、入力する人が決まっていて、スプレッドシートそのものを見る必要がない場面です。公式ドキュメントによると、作ったウェブアプリは Google サイトに埋め込むこともできるので、社内のポータルの1ページとして入力画面を用意する使い方もできます。

誰として実行するかを選ぶ

ウェブアプリを公開するときは、スクリプトを誰の権限で実行するかを選びます。公式ドキュメントによると、「自分として実行」を選ぶと、アクセスした人に関係なく、スクリプトのオーナーとして実行されます。「アクセスしたユーザーとして実行」を選ぶと、使っている人の権限で実行されます。

「自分として実行」にすると、入力する人にスプレッドシートの権限を渡さずに、書き込みだけをしてもらえます。その代わり、URLを知っている人なら誰でも書き込めてしまう設定にしないよう、アクセスできる人の範囲を必ず確かめます。

変更したら新しい版としてデプロイし直す

ウェブアプリは、コードを変更しても、デプロイし直さないと公開中のURLには反映されません。公式ドキュメントによると、テスト用のURLは常に最後に保存したコードを動かし、スクリプトの編集の権限を持つ人だけが開けます。直した内容をテスト用のURLで確かめてから、デプロイし直す流れにします。

トーストで処理の終わりを知らせる

入力画面とは別に、処理が終わったことを知らせるだけの小さな表示も用意されています。トーストと呼ばれるもので、スプレッドシートの右下の隅に、短いメッセージを表示します。

function notifyDone() {
  SpreadsheetApp.getActiveSpreadsheet().toast('集計が終わりました');
}

公式ドキュメントによると、トーストはスクリプトの処理を止めず、使う人の操作を必要としない状況の知らせに向いています。使えるのはスプレッドシートだけです。アラートのように「OK」を押させる必要がないので、メニューから実行した集計や書き込みが終わったことを知らせるのに便利です。処理に時間がかかる場合は、始めたときと終わったときの両方にトーストを表示すると、使う人が待っている間に不安になりません。

作り始める前に決めておくこと

GASの入力画面は、いきなりコードを書き始めると、作り直しが多くなります。作り始める前に、次のことを紙に書き出しておきます。

決めること	例
誰が使うか	事務の担当者3人。スプレッドシートの編集の権限がある
何を入力するか	受付日、相手の名前、内容、担当、状況の5項目
どの項目を必須にするか	受付日、相手の名前、内容
選択肢で選ばせる項目	担当（3人の名前）、状況（未対応、対応中、完了）
入力した後に何が起きるか	「記録」のシートの最後の行に追加される
誰が直すか	作った人と、もう1人の担当者

特に大切なのは、選択肢で選ばせる項目を決めることです。担当者の名前や状況を自由に文字で入力させると、「山田」「やまだ」「山田さん」のように表記がばらばらになり、後で絞り込みや集計ができなくなります。選択肢にしておけば、表記は必ずそろいます。

選択肢はコードの中に直接書かず、スプレッドシートの別のシートに一覧として用意し、入力画面を開くときにそこから読み込む形にすると、担当者が増えたときもシートを書き換えるだけで済みます。

うまく動かないときの確かめ方

GASの入力画面を作ると、最初はたいてい何かがうまく動きません。よくある原因と確かめ方を挙げます。

メニューが表示されない

カスタムメニューは、スプレッドシートを開いたときに onOpen が動いて追加されます。コードを書いた直後は、スプレッドシートを開き直すまでメニューは表示されません。開き直しても表示されない場合は、関数の名前が onOpen になっているか（大文字と小文字も含めて）を確かめます。

また、onOpen のように決まった名前で自動的に動く関数は、シンプルトリガーと呼ばれます。Googleのトリガーの解説によると、シンプルトリガーには、ファイルが閲覧のみやコメントのみで開かれている場合は動かない、承認が必要なサービスは使えない、30秒を超えて実行できない、といった制限があります。メニューを追加する以外の処理を onOpen に書くと、この制限に当たることがあります。

保存を押しても何も起きない

HTMLのダイアログで保存を押しても何も起きない場合は、呼び出した関数の中でエラーが起きている可能性があります。google.script.run には、失敗したときに実行する処理を指定する withFailureHandler があります。これを付けて、失敗したときにエラーの内容を画面に表示するようにすると、原因を探しやすくなります。

よくある原因は、書き込む先のシートの名前の違いです。コードで「記録」と書いているのに、シートの名前が「記録」のように後ろに空白が入っていると、シートが見つからずにエラーになります。

承認の画面が何度も表示される

コードの中で新しい種類の操作（メールの送信、別のファイルの読み込みなど）を追加すると、その操作のための承認があらためて求められます。新しい操作を追加したときは、エディタから一度関数を実行して、承認を済ませておきます。

生成AIにコードを書かせたとき

最近は、生成AIに入力画面のコードを書かせる人も増えています。下書きを作るには便利ですが、公式ドキュメントに無い書き方や、すでに使われなくなった書き方が混ざることがあります。AIが書いたコードは、使っている関数の名前を公式ドキュメントで確かめ、テスト用のスプレッドシートで動かしてから、本番のシートで使います。

GASのUIが向いている場面と向いていない場面

GASのUIは無料で作れて、スプレッドシートと直接つながるのが大きな利点です。一方で、向いていない場面もあります。作り始める前に、用途が合っているかを確かめます。

向いている場面

社内の数人が、決まった形の記録をスプレッドシートに入力する
スプレッドシートのデータを使った処理（集計、メールの送信、ファイルの作成）を、メニューから誰でも実行できるようにする
入力の間違いを減らすために、選択肢や必須の項目を決めた入力画面を用意する

向いていない場面と、その理由

GASには、実行できる時間や回数に上限があります。Googleの割り当ての解説では、スクリプトの実行時間は1回の実行あたり6分、カスタム関数は1回あたり30秒とされています。大量のデータを一度に処理する作り方は、この上限に当たることがあります。

ほかにも、GASのUIには次のような向き不向きがあります。

場面	向き不向き	理由
社内の数人で使う入力画面	向いている	スプレッドシートと直接つながり、無料で作れる
社外の多くの人に答えてもらう受付	向いていない	見た目や使いやすさを整えるのに手間がかかる
届いた回答への返信や担当決め	向いていない	返信や担当の管理の画面を一から作る必要がある
本格的な業務システム	向いていない	実行時間の上限があり、保守できる人が限られる
1回ごとに時間のかかる処理	注意が要る	1回の実行時間に上限がある

もう1つ見落とされやすいのが、作った人しか直せなくなることです。GASで作った入力画面は、作った人が異動や退職でいなくなると、直せる人がいなくなりがちです。作るときは、コードにどの関数が何をするかの説明を書き、使い方を文書に残しておきます。

フォームの道具との使い分け

入力画面を作りたいとき、GASで作るか、フォームの道具を使うかで迷うことがあります。使う人と、入力した後に何をするかで使い分けます。

Googleフォームで足りる場面

社外の人に答えてもらう受付や、アンケートのように、多くの人から同じ形で回答を集めるなら、Googleフォームで十分なことがほとんどです。選択肢、必須の項目、回答の条件による分岐が、コードを書かずに作れます。回答はスプレッドシートに書き出せるので、集めた後の集計や加工だけをGASで行う、という組み合わせもよく使われます。

GASのUIを作る場面

社内の人が、スプレッドシートを見ながら入力したい、入力した値で別のシートを書き換えたい、といった、スプレッドシートの操作と一体になった入力なら、GASのダイアログやサイドバーが向いています。

受け付けた後の対応まで1つの画面で行う場面

問い合わせや申し込みのように、受け付けた1件ごとに担当を決め、状況を追い、返信まで送る必要がある場合は、GASで管理の画面を一から作ると大きな手間がかかります。担当の列、状況の列、返信のメール、送ったかどうかの記録と、作るものが次々に増えていくからです。

その場面で使えるのがHalictです。公式サイトによると、Halict はフォームを作り、届いた回答を1件ごとに担当・ステージ（対応の段階）・タグを付けて管理し、同じ画面から返信を送れます。新しい回答をGoogleスプレッドシートに1行ずつ追記する連携があり、スプレッドシートでの集計も続けられます。APIキーを発行して外部の仕組みからフォームを作ったり回答を取得したりする機能や、新しい回答が届いた瞬間に知らせるWebhookもあるので、GASで作った処理と組み合わせる使い方もできます。1人で使うフリーのプランは0円で、フォームの数と回答の数はどのプランでも無制限です。Halict は、@SOHOを運営する株式会社ライフスケープが開発・提供しています。

共有と権限の考え方

GASの入力画面を他の人と使うときは、誰が何をできるかを先に整理しておきます。スプレッドシートにひもづいたGASは、スプレッドシートの編集の権限を持つ人なら、コードも見たり書き換えたりできます。

使う人と直す人を分ける

入力画面を使う人全員がコードを書き換えられる状態だと、知らないうちに動きが変わることがあります。コードを直すのは決まった2人程度にし、他の人には「コードには触らない」と伝えておきます。より厳しく分けたい場合は、入力はウェブアプリから行ってもらい、スプレッドシートの編集の権限は直す人だけに渡す形にします。

個人情報を扱うときは見られる人を限る

入力画面で名前や連絡先を記録する場合は、そのスプレッドシートを見られる人を必要な人だけに限ります。共有の設定が「リンクを知っている全員」になっていないか、使い始める前に確かめます。担当者が外れたときは、共有の相手からも外します。

複数人が同時に保存するとき

appendRow はシートの最後の行に1行を追加する命令なので、複数の人が別々に保存しても、それぞれ別の行に書き込まれます。ただし、同じ行を読み込んで書き換える処理を複数人が同時に行うと、後から保存した内容で上書きされることがあります。同じ行を書き換える処理を作るときは、LockService という、同時に1人だけが処理できるようにする仕組みを使うことを検討します。

作った入力画面を長く使うために

GASのUIは、作ることより、作った後に使い続けることのほうが難しいものです。長く使うために、次の点に気をつけます。

使う人に試してもらう

作った人には分かりやすい画面でも、使う人には分かりにくいことがあります。完成したら、実際に使う人に何回か入力してもらい、迷ったところを聞きます。入力欄の名前、ボタンの名前、保存した後に何が表示されるかは、使う人の言葉に合わせて直します。

保存できたことが分かるようにする

保存のボタンを押した後、何も表示されないと、使う人は保存できたのか分からず、何度も押してしまいます。保存が終わったら「保存しました」と表示する、画面を閉じる、といった反応を必ず付けます。

書き込む先のシートを守る

入力画面から書き込むシートは、他の人が直接書き換えないように、シートの保護を設定しておくと安心です。入力画面を通さない書き換えが混ざると、形のそろわない行が入り、集計がずれる原因になります。

変更の記録を残す

コードを直したら、いつ、何を、なぜ直したかを、エディタの中か別の文書に書き残します。問題が起きたときに、直前の変更を戻す手がかりになります。

GASのUIづくりを仕事にする

GASで入力画面や自動化の仕組みを作る仕事は、小さな会社や事業者から依頼されることの多い仕事です。スプレッドシートで業務を回している会社は多く、入力の手間や間違いを減らしたいという相談はよくあります。

在宅ワークとフリーランスの仲介を長く運営してきた立場から見ると、こうした仕事で継続して依頼される人は、コードを書く力に加えて、作った後の使い方の説明と、直し方の文書を残している人です。依頼する側にとっては、作った人がいなくなった後も使い続けられることが何より大切だからです。

プログラムを作る仕事の収入の目安はソフトウェア作成者の年収・単価相場で確かめられます。入力画面とあわせて、業務の手順書や契約の文書を整える仕事はビジネス文書・契約書作成のお仕事で、営業の資料づくりや販促の支援は営業代行・アポ・販促資料作成のお仕事で紹介しています。業務の改善全体を助言する立場の国家資格には中小企業診断士があります。まずは自分のスプレッドシートにカスタムメニューを1つ追加するところから始めてみてください。

よくある質問

Q. GASで入力画面を作るのに、プログラミングの経験は必要ですか？

カスタムメニューやアラート、プロンプトは数行のコードで作れるので、経験が浅くても始められます。複数項目の入力画面をHTMLのダイアログで作る場合は、HTMLとJavaScriptの基本的な知識があると進めやすくなります。Googleの公式ドキュメントにある例を動かしながら、少しずつ書き換えていく進め方が確実です。