💬
GASでHTMLファイルを分割して利用する方法
Google Apps Script (GAS) でのHTMLファイル分割ガイド
概要
Google Apps Script（GAS）でウェブアプリケーションを開発する際、HTMLファイルを複数のファイルに分割して管理することで、コードの保守性と再利用性を向上させることができます。
この文書では、GASでのHTMLファイル分割の基本的な実装方法について説明します。
基本的なファイル構成
ファイル構成の説明
-
エントリーポイント
-
Code.js: アプリケーションのエントリーポイント -
index.html: メインのHTMLテンプレート
-
-
基本モジュール
-
style.html: スタイルシートの定義 -
js.html: JavaScriptモジュールの統合
-
-
JavaScriptモジュール
-
js_module1.html: 機能モジュール1 -
js_module2.html: 機能モジュール2 -
js_module3.html: 機能モジュール3
-
実装方法
1. Code.jsの設定
// HTMLファイルをインクルードするためのヘルパー関数
// この関数は他のHTMLファイルを読み込むための基本的な関数です
function include(filename) {
// HtmlServiceを使用してテンプレートファイルを読み込みます
// filenameは拡張子なしのファイル名（例：'index'）を指定します
var template = HtmlService.createTemplateFromFile(filename);
// テンプレートを評価（変数の置換やスクリプトの実行）して
// HTML文字列として取得します
var html = template.evaluate().getContent();
// 生成されたHTML文字列を返します
return html;
}
// 循環参照防止用の関数
// 同じファイルが複数回インクルードされることを防ぐためのグローバル変数
const INCLUDED_FILES = new Set();
// 安全にファイルをインクルードするための関数
// 循環参照（AファイルがBファイルを、BファイルがAファイルをインクルード）を防ぎます
function safeInclude(filename) {
// すでにインクルードされたファイルかチェック
if (INCLUDED_FILES.has(filename)) {
// すでにインクルード済みの場合は空文字を返して処理をスキップ
return '';
}
// インクルードされたファイルを記録
INCLUDED_FILES.add(filename);
// 通常のインクルード処理を実行
return include(filename);
}
// Webアプリケーションのエントリーポイント
// GASでWebアプリとして公開する際に必要な関数です
function doGet() {
// メインのHTMLファイル（index.html）をテンプレートとして読み込み
return HtmlService.createTemplateFromFile('index')
// テンプレートを評価してHTMLを生成
.evaluate()
// Webアプリのタイトルを設定
.setTitle('My Web App')
// iframeでの表示を許可（必要に応じて設定）
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
2. index.htmlの構成
<!DOCTYPE html>
<html>
<head>
<!-- GASのWebアプリで必要な設定 -->
<!-- target="_top"は、iframeの中で表示される場合に親ウィンドウをターゲットにします -->
<base target="_top">
<!-- スタイルシートのインクルード -->
<!-- <?!= ?>は、GASのスクリプトを実行するための特殊な構文です -->
<!-- includeの実行結果（style.htmlの内容）がここに展開されます -->
<?!= include('style') ?>
</head>
<body>
<!-- メインコンテンツのコンテナ -->
<!-- アプリケーションのUIはこのdiv内に配置します -->
<div id="app">
<!-- アプリケーションのHTML構造をここに記述 -->
</div>
<!-- JavaScriptのインクルード -->
<!-- 全てのJavaScriptモジュールはjs.htmlを通じて読み込まれます -->
<?!= include('js') ?>
</body>
</html>
3. style.htmlの構成
<style>
/* CSSスタイルの定義 */
/* アプリケーション全体で使用する共通のスタイルを定義します */
/* コンテナの基本スタイル */
.container {
/* 中央寄せ配置 */
margin: 0 auto;
/* 内側の余白 */
padding: 20px;
}
/* 他のスタイル定義 */
/* プロジェクトで必要なスタイルをここに追加 */
</style>
4. js.htmlの構成
<!-- 外部JavaScriptライブラリの読み込み -->
<!-- 必要なライブラリのURLを指定します -->
<!-- 例：jQuery, Bootstrap等のCDNリンク -->
<script src="https://example.com/external-library.js"></script>
<!-- モジュールのインクルード -->
<!-- 各機能モジュールを順番に読み込みます -->
<!-- 依存関係を考慮して、必要なモジュールを先に読み込む必要があります -->
<?!= include('js_module1') ?>
<?!= include('js_module2') ?>
<?!= include('js_module3') ?>
<script>
// メインのJavaScriptコード
// アプリケーションの初期化処理を行う関数
function initialize() {
// アプリケーションの初期化処理をここに記述
// 例：イベントリスナーの設定、初期データの読み込みなど
}
// ページ読み込み完了時に初期化関数を実行
// DOMの読み込みが完了してから処理を開始します
window.onload = initialize;
</script>
5. js_module1.htmlの例
<script>
// モジュール1の機能定義
// 特定の機能に関連する関数やクラスをここに記述します
// モジュール1の主要な関数
function module1Function() {
// 機能の実装
// 例：データの処理、UIの更新、サーバーとの通信など
}
// モジュール1で使用するヘルパー関数
function module1Helper() {
// ヘルパー機能の実装
// 主要機能をサポートする補助的な処理
}
// モジュール1で使用するグローバル変数（必要な場合のみ）
const MODULE1_CONSTANTS = {
// モジュール固有の定数
// 設定値や固定値を定義
};
</script>
ベストプラクティス
-
モジュール分割の基準
- 機能単位でファイルを分割
- 関連する機能をまとめる
- 再利用可能なコンポーネントを独立させる
-
命名規則
- 明確で説明的なファイル名を使用
- 機能を表す接頭辞を付ける（例：feature_, util_, ui_*）
-
依存関係の管理
- 依存関係を明確にする
- 循環参照を避ける
- 必要なモジュールを適切な順序でインクルード
注意点
- ファイル名は.html拡張子を持つ必要がありますが、インクルード時は拡張子を省略します
- インクルード構文
<?!= include('filename') ?>はHTMLエスケープを行わずに出力します - モジュール間の依存関係を慎重に管理してください
- 大規模なアプリケーションでは、機能ごとの分割粒度を適切に設定してください
Discussion