Google Apps Script（GAS）でWebアプリケーションを作るなら、最初に知っておきたいのは「普通のWebサイトとまったく同じ感覚では作らないほうがうまくいく」という点です。
Apps Script の HTML Service はHTML5ベースで画面を作れますが、実行環境は IFRAME サンドボックスで動くため、画面遷移や外部リソースの扱いにいくつか制約があります。
そのため、初心者がGASで見た目のよい業務Webアプリを作るなら、1つの親HTMLをベースに、画面の中身だけを切り替えるSPA風の構成にするのが最も現実的です。
この記事では、GASでWebアプリっぽく作るための考え方、ファイル構成、実装の流れ、初心者がハマりやすいポイントまでまとめます。
記事タイトル案
用途に合わせて、次のようなタイトルが使えます。
- GASで作るWebアプリケーション入門 初心者でもわかるHTML Serviceの設計と作り方
- Google Apps Scriptで業務Webアプリを作る方法 HTML Serviceを使った実践設計
- GASで管理画面を作りたい人へ SPA風Webアプリの作り方と設計のコツ
- Google Apps ScriptのHTML ServiceでWebアプリ化する方法 初心者向け設計ガイド
- GASで“ちゃんとした画面”を作るには？ HTML ServiceとSPA構成の基本
なぜ普通のWeb制作と少し違うのか
GASの HTML Service では、HTML・CSS・クライアント側JavaScriptを書いてWeb画面を作れます。
ただし、Apps Script のWebアプリは IFRAME サンドボックスで動作するため、トップレベルナビゲーションやリンク遷移、外部ファイルの読み込みなどに通常のWebアプリとは異なる制限があります。
Google の公式ドキュメントでも、HTML・CSS・JavaScriptは分けて管理し、テンプレート側では重いデータ処理をしすぎず、データは google.script.run で非同期に取得する方法が推奨されています。
つまり、GASで見た目の整った業務アプリを作るなら、サーバ側のApps Scriptとフロント側のHTMLを役割分担して考えるのが重要です。
結論は「SPA風構成」が一番作りやすい
初心者がまず結論として押さえたいのは、画面ごとに別HTMLへ遷移するより、1つのHTMLの中で表示を切り替えるほうが作りやすいということです。
理由は、GASでは doGet() ごとにページを分けるより、共通レイアウトを1枚持ち、必要なデータだけを非同期取得して差し替えるほうが、保守性と拡張性のバランスがよいからです。
たとえば、商品管理システムなら、以下のような画面を1つのアプリ内で切り替えます。
- 商品一覧
- 商品登録
- 商品編集
- 在庫照会
- 設定画面
この切り替えをブラウザの完全なページ遷移ではなく、メインエリアのDOM差し替えで行う考え方が、SPA風構成です。
GASではこの方式が特に相性がよく、見た目も最近のWebアプリに近づけやすくなります。
おすすめのファイル構成
GASで効率よく作るなら、ファイルは「ページ単位」ではなく「役割単位」で分けるのがおすすめです。
この構成のポイントは、**ファイルを分ける目的が「遷移」ではなく「整理」**であることです。
初心者ほど「商品一覧.html」「商品登録.html」へ飛ばす形を考えがちですが、GASではそのやり方より、部品化しながら1画面で制御するほうが結果的に楽です。
基本の考え方は「GASをAPIのように使う」
GAS側は、画面そのものをたくさん返す役割ではなく、データの取得や保存を担当するバックエンドとして使うと整理しやすくなります。
たとえば、次のように関数を分けます。
getProducts()商品一覧を返すgetProductById(id)商品詳細を返すsaveProduct(data)商品を登録するupdateProduct(data)商品を更新するdeleteProduct(id)商品を削除する
このようにしておけば、フロント側から google.script.run で関数を呼ぶだけで済みます。
その結果、見た目の変更と業務ロジックの変更を分離しやすくなり、記事読者にも理解してもらいやすい設計になります。
初期表示は軽く、データはあとから読む
GoogleのHTML Serviceのベストプラクティスでは、テンプレート内に大量のデータを直接埋め込むより、最初に軽い画面だけ表示し、そのあと非同期でデータを取る方法が推奨されています。
これは表示速度だけでなく、ローディング表示やエラー表示を入れやすいという利点もあります。
たとえば商品一覧画面なら、最初は「読み込み中…」だけ表示しておき、google.script.run.withSuccessHandler(...) で一覧データを受け取ってから描画します。
この流れにしておくと、将来データ件数が増えても比較的破綻しにくくなります。
画面遷移はどう考えるべきか
GASでWebアプリを作るときの「画面遷移」は、厳密にはWebサイトのページ遷移というより、アプリ内ビュー切替として考えるのが自然です。
つまり、サイドバーを押したら別ページに行くのではなく、中央の表示領域だけ「商品一覧」から「商品登録」に変わるイメージです。
この方式なら、ヘッダーやサイドバーを毎回作り直さなくて済みますし、画面間で状態を持ちやすくなります。
たとえば「一覧で選んだ商品IDを編集画面へ渡す」といった制御も、SPA風の設計ならシンプルに実装できます。
テンプレートの include を活用する
Apps Script ではテンプレートHTMLを使って、別ファイルのHTMLを読み込む形で部品化できます。
この仕組みを使うと、ヘッダー、サイドメニュー、CSS、JavaScriptなどを分離しやすくなります。
特に初心者には、次のような include() 関数を用意しておく方法がわかりやすいです。
javascriptfunction include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
そして Index.html の中で次のように読み込みます。
xml<?!= include('css'); ?>
<?!= include('header'); ?>
<?!= include('sidebar'); ?>
<?!= include('js'); ?>
この書き方を覚えるだけでも、GASのHTML開発はかなり整理しやすくなります。
初心者向けの最小構成サンプル
以下は、GASでSPA風に作るときの最小構成イメージです。これは考え方をつかむためのサンプルです。
Code.gs
javascriptfunction doGet() {
return HtmlService.createTemplateFromFile('Index')
.evaluate()
.setTitle('商品管理アプリ');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function getProducts() {
return [
{ id: 'P001', name: 'ノートPC' },
{ id: 'P002', name: 'バーコードリーダー' }
];
}
function getProductById(id) {
return { id: id, name: 'バーコードリーダー', price: 4980 };
}
function saveProduct(data) {
return { success: true, message: '保存しました' };
}
Index.html
xml<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
</head>
<body>
<div class="app-layout">
<aside class="sidebar">
<button onclick="navigate('list')">商品一覧</button>
<button onclick="navigate('create')">商品登録</button>
</aside>
<main id="app"></main>
</div>
<?!= include('js'); ?>
</body>
</html>
js.html
xml<script>
const state = {
view: 'list',
currentId: null
};
function navigate(view, id = null) {
state.view = view;
state.currentId = id;
render();
}
function render() {
const app = document.getElementById('app');
if (state.view === 'list') {
app.innerHTML = '<h2>商品一覧</h2><div id="list-area">読み込み中...</div>';
google.script.run.withSuccessHandler(rows => {
document.getElementById('list-area').innerHTML = rows.map(r =>
`<div><button onclick="navigate('edit', '${r.id}')">${r.id} - ${r.name}</button></div>`
).join('');
}).getProducts();
}
if (state.view === 'create') {
app.innerHTML = `
<h2>商品登録</h2>
<input id="product-name" placeholder="商品名">
<button onclick="saveNew()">保存</button>
`;
}
if (state.view === 'edit') {
app.innerHTML = '<h2>商品編集</h2><div id="edit-area">読み込み中...</div>';
google.script.run.withSuccessHandler(data => {
document.getElementById('edit-area').innerHTML = `
<input id="edit-name" value="${data.name}">
<button onclick="saveEdit('${data.id}')">更新</button>
`;
}).getProductById(state.currentId);
}
}
window.addEventListener('DOMContentLoaded', render);
</script>
この構成のよいところは、読者が「GASでもWebアプリっぽく作れる」と具体的にイメージしやすい点です。
しかも、一覧・登録・編集という業務システムでよく使う流れを、そのまま別テーマへ展開できます。
デザインを入れたいときの考え方
GASのHTML Serviceでも、通常のHTML/CSS/JavaScriptのかなりの部分は使えます。
ただし、Apps Script の制約を考えると、最初から大規模なフロントエンドフレームワークを持ち込むより、まずは素のHTML・CSS・JavaScriptで整理された管理画面を作るほうが安定しやすいです。
見た目を整えるコツは、次の3点です。
- ヘッダー・サイドバー・メインエリアの3分割レイアウトにする
- ボタン、フォーム、カード、テーブルの見た目を部品化する
- 画面ごとにHTMLを増やすより、CSSクラスを共通化する
Googleのベストプラクティスでも、HTML・CSS・JavaScriptを分けることで可読性と保守性が上がると案内されています。
そのため、初心者向けの記事でも「まずはデザインライブラリより、構造を整理することが先」と説明すると実践的です。
制約があるからこそ、設計をシンプルにする
GASのHTML Serviceには、通常のWebアプリと比べていくつかの制限があります。
たとえば、サンドボックスの都合でトップレベルの自由な遷移には注意が必要ですし、外部リソースはHTTPSで読む必要があります。
ですが、これは悲観するポイントではありません。
むしろ「1画面アプリとして整理する」「サーバ処理は関数単位に分ける」「見た目は共通パーツ化する」と割り切ることで、初心者でも十分に実用的な業務アプリを構築できます。
初心者がハマりやすい失敗
1. 画面ごとにHTMLを完全分離してしまう
一見わかりやすそうですが、共通レイアウトの修正が増え、状態管理もしづらくなります。
特に一覧から編集へ渡すデータや、戻る操作の整理が面倒になりやすいです。
2. テンプレートに大量データを埋め込んでしまう
初期表示が重くなりやすく、画面の応答性も悪くなります。
Googleはデータを google.script.run で非同期読み込みする形を推奨しています。
3. GAS側とフロント側の責務が混ざる
画面制御まで全部 Code.gs に寄せると、あとで修正がつらくなります。
「表示の切替はフロント」「データ処理はGAS」と分けるだけでかなり整理されます。
4. いきなり複雑な構成を目指す
最初から多機能なルーターや重い構成にすると、GASの良さである手軽さを失いやすいです。
最初は一覧・登録・編集の3画面だけをSPA風にまとめる構成がちょうどよいスタートです。
これから作るなら、どこから始めるべきか
初心者なら、まずは次の順番で作るのがおすすめです。
doGet()でIndex.htmlを返すところまで作る。- サイドバーとメインエリアだけの管理画面レイアウトを作る。
navigate('list')のような簡単な表示切替を作る。google.script.runで一覧取得をつなぐ。- 商品登録フォームを追加し、保存処理をつなぐ。
- 商品編集画面を追加し、ID受け渡しと更新処理をつなぐ。
- 最後にCSSを整えて、Webアプリらしい見た目に仕上げる。
この順序で進めれば、見た目とロジックを同時に壊しにくく、記事としても読みやすい構成になります。
まとめ
GASでWebアプリケーションを作るときは、普通のWebサイトの延長として考えるより、HTML Service上で動く小さな業務アプリを設計するという発想が向いています。
そのうえで、親HTMLを1つにまとめ、画面はSPA風に切り替え、データ処理は google.script.run に任せる構成にすると、初心者でも実務に使える形へ持っていきやすくなります。
特に、一覧・登録・編集のような管理画面系システムでは、この考え方が非常に相性がよいです。
「HTMLファイルをページごとに増やす」のではなく、「共通部品とビューに分けて整理する」と考えるだけで、GASのWebアプリ開発はかなり進めやすくなります。
コメント