サービス
サービスを探す
プロ人材を探す
仕事を探す
ブログを探す
GASでWebアプリケーションを構築：HTML Service入門
記事IT・テクノロジー
GASでWebアプリケーションを構築：HTML Service入門
Google Apps Script（以下GAS）を使って、中小企業の経営者さんやフリーランスの皆さんが手軽にWebアプリを作れるって知ってましたか？おじさんは長年GASと付き合ってきて、「これだ！」と思ったのがHTML Serviceの活用です。今日は、既存データを安全に守りつつ、効率よくWebアプリを作る方法をお伝えしますよ。
■ HTML Serviceとは何か？
HTML Serviceは、GASでHTMLやCSS、JavaScriptを使ったWebページやWebアプリを作るための仕組みです。これを使うと、Googleのクラウド上でホストされるWebアプリが簡単にできます。特別なサーバーも不要、Googleアカウントの利用枠内で追加の専用SaaS料金なし（ただしApps Scriptのquota・実行上限あり）なので、コスト面も安心です。
例えば、社内の受注管理や簡単なデータ入力フォームなどを作って、そのデータをGoogleスプレッドシートに書き込むことが可能。UIも自由自在ですから、使いやすい画面を用意できます。
■ 初期設定と必要な権限
まずはGASのプロジェクトを作成し、HTML Serviceを使う準備をします。
・Googleドライブで新規「Google Apps Script」を作成。
・スクリプトエディタにHTMLファイルを追加（例: index.html）。
・実行に必要な権限は、Googleスプレッドシートの読み書き権限やGoogleドライブのファイル作成権限が主。これらは初回実行時に認可を求められます。
なお、個人情報を扱う場合は、取り扱いに十分注意してください。ユーザーの同意を得て、必要最低限の権限だけを使うのが基本です。
■ Webアプリの基本コード例
おじさんからのおすすめは、既存の重要なデータは絶対に直接書き換えず、バックアップや新しい日時付きシートに結果を出力するスタイル。これで誤操作やデータ破損リスクを減らせます。
以下は、フォーム入力を受けて新しい日時付きシートにデータを書き込むシンプルな例です。入力検証も最低限行い、batchで書き込む方法を使っています。
// Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('GASおじラボ Webアプリ');
}
// フォームから送られたデータを処理
function submitData(formData) {
// 入力検証（例: 名前とメールは必須）
if (!formData.name || !formData.email) {
return { success: false, message: '名前とメールは必須です。' };
}
// 日時付きシート名を作成
const ss = SpreadsheetApp.getActiveSpreadsheet();
const timestamp = Utilities.formatDate(new Date(), ss.getSpreadsheetTimeZone(), 'yyyyMMdd_HHmmss');
const newSheetName = `Backup_${timestamp}`;
const sheet = ss.insertSheet(newSheetName);
// ヘッダ行をセット
const headers = ['名前', 'メール', 'メッセージ', '送信日時'];
sheet.getRange(1, 1, 1, headers.length).setValues([headers]);
// 書き込むデータを配列にまとめる（batch write）
const rowData = [
formData.name,
formData.email,
formData.message || '',
new Date()
];
sheet.getRange(2, 1, 1, rowData.length).setValues([rowData]);
return { success: true, message: '送信ありがとうございました。' };
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="dataForm">
<label>名前: <input type="text" name="name" required></label><br>
<label>メール: <input type="email" name="email" required></label><br>
<label>メッセージ: <textarea name="message"></textarea></label><br>
<button type="submit">送信</button>
</form>
<div id="result"></div>
<script>
const form = document.getElementById('dataForm');
const resultDiv = document.getElementById('result');
form.addEventListener('submit', e => {
e.preventDefault();
const formData = {
name: form.name.value.trim(),
email: form.email.value.trim(),
message: form.message.value.trim()
};
google.script.run.withSuccessHandler(res => {
resultDiv.textContent = res.message;
if(res.success) form.reset();
}).submitData(formData);
});
</script>
</body>
</html>
■ バックアップと復元のポイント
・新しいシートに日時を付けて書き込むので、過去のデータはそのまま残ります。
・データが増えて管理が煩雑になったら、定期的にGoogleドライブにエクスポートしてバックアップを取るのが安全。
・もし誤ってデータを書き換えた場合は、Googleスプレッドシートの「バージョン履歴」から復元可能です。
・installable triggerを使って夜間に自動バックアップを取るのもおすすめ。たとえば毎日深夜にスプレッドシートのコピーをGoogleドライブに作成するなど。
■ コスト削減の目安と注意点
GASはGoogleアカウントの利用枠内で使えるので、追加の専用SaaS料金は発生しません。ただし、Apps Scriptのquota（実行時間の上限やAPI呼び出し制限）があります。
例えば、手動で月100件のデータ入力管理を外部SaaSに委託するとすると…
・SaaS料金：月額5,000円×12ヶ月=60,000円
・GAS利用は無料（Googleアカウント利用枠内）
・年間で約60,000円のコスト削減（仮定）
ただし、GASの実行時間やAPI制限を超えると動作が止まるので、処理量が多い場合は分割処理や別のインフラ検討が必要です。あくまで「コスト削減の目安」として参考にしてください。
□ まとめ：GASのHTML Serviceで安全かつ効率的にWebアプリを
・HTML Serviceで自由な画面作りが可能
・既存データは「全消去」せず、日時付きの新規シートに書き込み
・入力検証で誤入力を防止し、batch writeで効率化
・Googleアカウントの利用枠内で追加費用なし。ただしquotaには注意
・installable triggerでバックアップや自動処理も実装可能
中小企業の経営者さんやフリーランスの皆さん、GASを活用して業務効率アップとコスト削減にぜひチャレンジしてみてください。おじさんも応援していますよ！
■ GASの相談や導入サポートを見たい方へ
この記事と近い作業をGoogleシートやGASで整えたい方は、Gasおじのココナラ出品一覧もご覧ください。
■ 関連サービス
GASおじのココナラ出品一覧
日々の記録、確認、通知、投稿準備などを、GoogleスプレッドシートとGASで無理なく自動化する相談ができます。
