この記事を読んでほしい人
スプレッドシートに対するデータ入力業務をより効率化したい人
Google Apps Script(以後GASと呼称)を使い始めてみたい！という人
はじめに
スプレッドシートを使っている時、こんな経験はありませんか？
「あ、消しちゃった！」
関数が入っていたセルを、誰かがうっかり上書きしてシートが動かなくなった。
「表記ゆれの嵐」
『OK』『ok』『完了』など。人によって入力ルールがバラバラで、集計時に絶望。
「壊れた入力規則」
せっかく設定したプルダウンも、行のコピー＆ペーストで設定が剥がれて機能していない。
その問題、この記事を読めば解決できるかもしれません！
あらためてこんにちは、ゲームQAをしているwatatatataです。
テストリーダーとして日々レビューや業務改善に務めています
背景
以前、数百件のバグ報告をスプレッドシートで管理していた時のことです。
いざ「どの環境でバグが多いか」をグラフ化しようとしたところ、OSバージョンが
『iOS17』『ios 17』『17.0(iOS)』とバラバラ。結局、分析を始める前に数時間かけてデータの修正をする羽目になりました…。
「そんなこと、気をつければいいじゃないか」と思うかもしれません。しかし、人間はミスをする生き物です。特にリリース直前の修羅場や、何百件も同じ作業を繰り返す中で100％完璧な入力を「気をつける」だけで維持することはとても難しいことと思います。
こういった問題を改善するための解決策について記載していきます。
解決策
今回はGASを利用してスプレッドシートで発生する問題を解決していきます。
標準機能である「入力規則」も便利ですが、GASで作る入力フォームには決定的な強みがあります。
①仕組みが壊れない
コピペや行削除による設定の消失・ズレが起きません。誰が操作しても、常に同じルールが維持されます。
②強力なバリデーション
複数項目の相関チェックや、未入力時の送信ブロックも自由自在です。
③迷いをなくすUI
横に長いシートを、1つの画面に凝縮。入力者の負担を減らし、「どこに入れればいいか一目でわかる」状態を作れます。
そして慣れてしまえば、コピペと少しの修正だけで誰でも作れるようになります！
作り方
-
メニューからエディタを選択 スプレッドシート上部のメニューから「拡張機能」→「Apps Script」を選択します。
-
エディタ画面が開く
新しいタブで、このようなエディタ画面が開けば準備完了です
今回は「GAS（制御用）」と「HTML（見た目用）」の2つのファイルを用意します。
① GASファイルにコードを貼る
最初からある「コード.gs」に、以下のコードを上書きで貼り付けてください。
// メニューに「入力フォーム」を追加
function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('★入力フォーム')
.addItem('入力フォームを開く', 'showForm')
.addToUi();
}
// フォーム画面を表示する
function showForm() {
const html = HtmlService.createHtmlOutputFromFile('index')
.setTitle('データ入力フォーム')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(html, '専用入力フォーム');
}
// フォームからデータを受け取ってシートに書き込む
function addNewRow(data) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
// シートの最終行の次に追加 [名前, 備考]
sheet.appendRow([data.name, data.memo]);
}
② HTMLファイルを作成し、コードを貼る
次に、画面の見た目を作るファイルを作ります。
左側の「＋」ボタンをクリックして「HTML」を選択。
ファイル名を「index」にして、中身を以下のコードに書き換えてください。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body { font-family: sans-serif; padding: 20px; }
.field { margin-bottom: 15px; }
label { display: block; font-size: 12px; color: #666; }
input { width: 100%; padding: 8px; box-sizing: border-box; }
button { width: 100%; padding: 10px; background: #4285f4; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #357ae8; }
</style>
</head>
<body>
<div class="field">
<label>担当者名（必須）</label>
<input type="text" id="name" placeholder="例：watatatata">
</div>
<div class="field">
<label>備考</label>
<input type="text" id="memo" placeholder="例：不具合確認済み">
</div>
<button onclick="submitForm()">スプレッドシートに登録</button>
<script>
function submitForm() {
const name = document.getElementById('name').value;
const memo = document.getElementById('memo').value;
if (!name) {
alert('担当者名は必ず入力してください！');
return;
}
// GAS側のaddNewRow関数を呼び出す
google.script.run
.withSuccessHandler(() => {
alert('登録しました！');
google.script.host.close();
})
.addNewRow({ name: name, memo: memo });
}
</script>
</body>
</html>
③ スプレッドシートを更新してメニューを出す
ここがポイントです。コードを保存しただけでは画面に変化はありません。 一度スプレッドシートのブラウザタブを再読み込みしてください。
数秒待つと、メニューバーの最後に「★入力フォーム」が出現します
④ 実行と「承認」
初めて実行する時は、Googleから「このプログラムを動かしてもいいですか？」という確認が出ます。
「★入力フォーム」→「入力フォームを開く」をクリック。
「承認が必要です」と出るので、「権限を確認」をクリック。
自分のアカウントを選択。
【重要】「このアプリは Google で確認されていません」と出たら、左下の「詳細」→「（プロジェクト名）に移動」をクリック。
最後に「許可」を押せば、フォームが立ち上がります。
応用
このサンプルはあくまで「基本の形」です。ここから自分の業務に合わせて進化させるためのヒントを紹介します。
-
入力項目を増やしたい（HTML）
今は「名前」と「備考」だけですが、HTMLの を増やすだけで項目は自由に追加できます。
日付なら input type="date"
選択式なら select （プルダウン）
チェックボックスなら input type="checkbox" といったタグを使うと、さらに「入力ミスが起きない画面」に近づきます。 -
バリデーション（入力チェック）を強化する（HTML/JavaScript）
サンプルでは「名前が空かどうか」だけをチェックしていますが、ここを工夫できるのがGUIの醍醐味です。
「数字以外が入っていたらエラーにする」
「文字数が多すぎたら警告を出す」
といったルールを submitForm 関数の中に書き足してみましょう。
効果
このフォームを実装するだけで、スプレッドシートへの入力作業がグッと楽になります。
入力ミスでデータが汚れる心配がなくなり、誰が入力しても決まった形式で記録されるおかげで後で分析や集計をするときにデータを直す手間がなくなります。
結果として、関数を壊してしまう不安を抱えたまま操作したり、データ不備の連絡や修正に時間を取られることもなくなり、業務が効率化され工数削減につながります。
さいごに
少しの手間でスプレッドシートは「表計算ソフト」から「データ入力システム」へ変わります。
これを難しそうと思わず、まずはこの記事のコードをコピペして自分の手で専用の入力フォームが動き出す楽しさを体験してみてください。
その一歩が「壊れやすいスプレッドシート」を救う大きな一歩になるかもしれません！