はじめに
「Google Apps Script（GAS）でWebページが表示されてるけど、どういう仕組み？」
そんな疑問を持つ方のために、この記事では GASでHTMLを動的生成するWebアプリの仕組み を解説します。
実際のコード構造、URLの成り立ち、公開方法、そしてサーバーの裏側まで
“どう動いているのか”を理解できるように整理しました。
1. GASでWebアプリを公開するとは？
Google Apps Script は、Googleが提供する完全マネージドなスクリプト実行環境です。
スプレッドシート操作だけでなく、WebアプリとしてHTMLを生成・配信することもできます。
デプロイ後に発行されるURLにアクセスすると、GAS側でHTMLが生成され、
ブラウザに静的なHTMLページとして返却されます。
2. 基本構造：doGet(e) がエントリーポイント
Webアプリとして公開されたGASでは、
HTTPのGETリクエストを受けると自動で doGet(e) 関数が呼び出されます。
function doGet(e) {
var page = e.parameter.p || ''; // URLパラメータ取得（例: ?p=home）
var html;
switch(page) {
case 'home':
html = getHomeHtml(e);
break;
case 'report':
html = getReportHtml(e);
break;
default:
html = '<p>Error: invalid page</p>';
}
// 共通リソース読み込み
var fileList = [
{name: 'style.css', type: 'drive', id: 'xxxxxxxxxxxxxxxx'},
{name: 'jquery.min.js', type: 'cdn', url: 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js'}
];
html = getFileLoadHtml(fileList) + '<body>' + getHeader(e) + html + getFooter(e) + '</body>';
// 自身のURLを挿入
html = html.replace(/\{parentUrl\}/g, ScriptApp.getService().getUrl());
return HtmlService.createHtmlOutput(html).setTitle('My GAS WebApp');
}
仕組みまとめ
- URLアクセス →
doGet(e)自動実行 -
e.parameterでクエリパラメータを取得 - ページ名（
p）でHTML生成関数を分岐 -
HtmlService.createHtmlOutput()でHTMLを返す
3. ページごとのHTML生成
URLに応じて異なる関数でHTMLを生成します。
function getHomeHtml(e){
var title = '<h2>ダッシュボード</h2>';
var img = '<img src="https://example.com/img/home.png">';
return title + '<div>' + img + '</div>';
}
doGet は各ページ関数を呼び出し、生成結果をまとめてブラウザに返却します。
ヘッダーやフッターは共通HTMLとして組み込まれます。
4. 外部ファイル（CSS/JS）の読み込み
DriveやCDN上のファイルを動的に読み込みます。
function getFileLoadHtml(fileList){
return fileList.map(file => {
if (file.name.endsWith('.css') && file.type === 'drive') {
return '<style>' + DriveApp.getFileById(file.id).getBlob().getDataAsString() + '</style>';
}
if (file.name.endsWith('.js') && file.type === 'drive') {
return '<script>' + DriveApp.getFileById(file.id).getBlob().getDataAsString() + '</script>';
}
if (file.type === 'cdn') {
return file.name.endsWith('.css')
? `<link rel="stylesheet" href="${file.url}">`
: `<script src="${file.url}"></script>`;
}
return '';
}).join('');
}
- Google DriveのCSS/JSを直接埋め込み可能
- jQueryなどのCDNスクリプトも併用できる
5. URLの構造と自動生成
公開したWebアプリのURLは自動生成されます。
https://script.google.com/a/example.com/macros/s/AKfycbxxxxxxxxxxxx/exec?p=home
| 要素 | 内容 |
|---|---|
script.google.com |
固定ドメイン（GAS共通） |
/a/{組織ドメイン} |
Google Workspace環境の場合、自動付与される（例: /a/example.com） |
/macros/s/{スクリプトID}/exec |
デプロイ時に自動生成されるエンドポイント |
?p=home |
ページ指定のクエリパラメータ |
Google Workspace アカウントで公開する場合は、組織ドメインが自動的にURLに含まれます。
スクリプトIDやドメインは コード側で設定する必要はなく、自動生成されます。
var rootUrl = ScriptApp.getService().getUrl();
6. 公開設定（アクセス権と実行権）
appsscript.json の設定例：
"webapp": {
"executeAs": "USER_DEPLOYING",
"access": "DOMAIN"
}
| 設定項目 | 意味 |
|---|---|
executeAs |
実行ユーザー（デプロイ者 or アクセス者） |
access |
公開範囲（全員／ドメイン内／自分のみ） |
公開手順
- エディタ上で「デプロイ」→「ウェブアプリとして導入」
- 実行ユーザーとアクセス権限を設定
- 自動でURLが発行される
7. サーバーとドメインの仕組み
GASのWebアプリは 完全サーバーレス構成。
Googleがサーバーを管理しており、GCPのDNSやCompute Engine設定は不要です。
| 項目 | GAS Webアプリ | Cloud Run/Functions |
|---|---|---|
| サーバー管理 | 不要（自動） | 不要（コンテナ実行） |
| ドメイン | script.google.com 固定 | カスタムドメイン可 |
| DNS設定 | 不要 | 必要（独自ドメイン時） |
| 実行環境 | GASランタイム | Node.js / Pythonなど |
| デプロイ方法 | GASエディタ | gcloud CLI など |
8. 実際のリクエストフロー
① ユーザーがURLを開く
↓
② GASが自動で doGet(e) を実行
↓
③ e.parameter からURLパラメータ取得
↓
④ ページHTMLを生成
↓
⑤ 共通CSS/JSを結合してHTML出力
↓
⑥ HtmlService.createHtmlOutput() で返却
↓
⑦ ブラウザにページが表示
9. まとめ
| 要素 | 内容 |
|---|---|
| サーバー | Google管理（完全マネージド） |
| 公開URL | 自動生成（script.google.com/.../exec） |
| HTML生成 | doGet内でサーバーサイド組み立て |
| 認証 | Workspaceドメインで制御可 |
| 独自ドメイン | 標準では非対応（Cloud Run経由で実現可能） |
おわりに
GASのWebアプリは「サーバーを意識せずに動的ページを配信できる」便利な仕組みです。
社内ポータルやダッシュボード、データ参照ページなどに最適です。
「サーバーもDNSも不要で公開できるWebアプリ」——
それがGoogle Apps Scriptの強みです。