HTMLページの外部データ管理（GAS + スプレ）
社内・非エンジニアメンバーでもWebページ上の特定の掲載情報（在庫情報や価格等）を簡単に更新できるよう、Googleスプレッドシートと連携した更新システムを静的HTMLサイトに導入しました。
課題/要件
-
Webに不慣れな担当者でも、安全に内容更新ができる仕組みが求められていた
-
テスト環境と本番環境を明確に分け、誤更新を防ぎたい
解決アプローチ／実装内容
-
Googleスプレッドシートにユーズド品の情報（価格・在庫・備考など）を入力
-
Google Apps Script を使って JSON API を作成し、HTMLから
fetch()で動的に読み込み -
HTML側では
data-section属性と JS により、DOMにデータを反映 -
サブドメイン（test.～）を利用した環境分岐により、
env=test / prodを自動判定してスプレッドシートを切り替え -
備考欄のような複数行データも
<ul><li>として表示されるよう整形処理を実装
工夫したポイント
-
スプレッドシートの改行を HTML のリストとして反映する処理
-
Date.now()を利用したキャッシュ対策 -
非エンジニアでも誤操作が起こらないよう、更新対象を限定した構成
使用技術
-
Google Apps Script（doGet で JSON API 化）
-
Google スプレッドシート
-
JavaScript（Fetch API）
-
静的HTML（CMSなし）
担当領域
- 技術選定
- 実装（コーディング）
