気仙沼星空観望会予約システム

概要

気仙沼で開催される星空観望会の予約システムです。参加者が簡単に予約できるWebアプリケーション。

ライブデモ

公開URL: https://flint8777.github.io/TEST_KesenNuma-StarryNight/

デモサイトでお試しいただけること

マルチステップフォーム: 直感的な予約体験
レスポンシブデザイン: PC・スマートフォン対応
リアルタイム検証: 入力時の即座フィードバック
アクセシビリティ: キーボードナビゲーション・スクリーンリーダー対応
セキュリティ機能: 入力検証・XSS対策のデモ

注意: デモサイトでは予約送信機能は無効です。完全な機能を利用するにはセットアップが必要です。

主要機能

予約機能

マルチステップフォームによる直感的な予約プロセス
出席者数選択（1-100名）
ワークショップ参加選択（はい/いいえ）
プラネタリウム鑑賞予約（はい/いいえ）
時間帯別予約（残席あり/残席なし表示）
交通手段選択（条件付き車台数入力）
自動確認メール送信
全選択肢表示（無効選択肢はグレーアウト）

セキュリティ機能

環境変数化: API URL 等の設定を config.js（Git 管理外）に外部化
XSS 対策: escapeHtml() による出力エスケープ
入力検証: メールアドレス形式チェック、必須項目バリデーション
リファラーチェック・レート制限: バックエンド（GAS）側で実装

個人情報保護

フォーム内にプライバシーポリシーを掲載（折りたたみ式）
送信前に個人情報取り扱いへの同意チェックを必須化
メールアドレスの確認入力による誤送信防止
完了画面に予約変更・データ削除の問い合わせ先を表示

UI/UX機能

レスポンシブデザイン（モバイル・タブレット・PC対応）
アクセシビリティ対応（WCAG準拠）
ローディング状態表示
リアルタイムバリデーション
統一された選択肢（はい/いいえ形式）
全時間帯表示（残席あり/残席なし/残席不足）
グレーアウト表示（選択不可選択肢の明確化）

SEO・マーケティング機能

SEO最適化: メタタグ・キーワード設定
OGP対応: SNSシェア時の最適化表示
Twitter Card: Twitter専用シェア設定
PWA対応: Progressive Web App機能実装

PWA機能（準備済み）

ホーム画面追加: アプリライクな体験
マニフェスト設定: アプリ情報・アイコン設定
カスタム404ページ: 星空テーマのエラーページ

セットアップ

前提条件

Googleアカウント
Google Apps Scriptの基本知識
Gitの基本操作（オプション）

インストール手順

1. リポジトリのクローン

git clone https://github.com/flint8777/TEST_KesenNuma-StarryNight.git
cd TEST_KesenNuma-StarryNight

2. 設定ファイルの作成

# 設定テンプレートをコピー
cp config.example.js config.js

# config.js を編集してAPIエンドポイントを設定
# API_URL: 'YOUR_GAS_DEPLOYMENT_URL_HERE' を実際のURLに変更

3. Google Apps Scriptの設定

Google Apps Scriptでプロジェクトを作成
apps-script/KB/Code.gs の内容をコピー&ペースト
apps-script/KB/setup-environment.example.gs をコピーして、Apps Script エディタ上で setup-environment.gs として作成し、実値（SPREADSHEET_ID、ADMIN_EMAIL など）を入れて setupEnvironmentVariables() を一度だけ実行
ウェブアプリとしてデプロイ
- 実行ユーザー: 自分
- アクセス権: 全員
デプロイURLをconfig.jsのAPI_URLに設定

⚠️ setup-environment.gs は SPREADSHEET_ID 等を含むためリポジトリには戻さないこと。 .gitignore で除外済みだが、Apps Script 側でのみ管理する。

4. スプレッドシートの準備

Googleスプレッドシートを作成
予約データ用のシートを準備
Apps Scriptからのアクセス権限を設定

環境変数設定

// config.js での設定例
const SITE_CONFIG = {
    API_URL: 'https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec',
    MAX_PARTICIPANTS: 6,
    TIMEOUT_MS: 30000
};

システム設定（オプション）

注意: 現在のシステムはGoogle Analyticsを使用しません。シンプルで軽量な構成になっています。

分析ツールが必要な場合は、以下を検討してください：

Google Search Console（SEO分析）
サーバーログ分析（GitHub Pagesのアクセス解析）
軽量な分析ツール（Umami、Plausibleなど）

プロジェクト構造

├── index.html              # メインページ（SEO・OGP対応）
├── styles.css              # スタイルシート（グレーアウト対応含む）
├── script.js               # フロントエンド機能（統一UI・残席表示）
├── iframe-embed-codes.html # 埋め込みコード
├── config.example.js       # 設定テンプレート
├── config.js               # 実際の設定（Git非公開）
├── manifest.json           # PWA設定
├── README.md               # このファイル
├── SECURITY.md             # セキュリティガイド
├── LICENSE                 # MITライセンス
├── .gitignore              # Git除外設定
├── 404.html                # カスタム404ページ（星空テーマ）
├── Images/                 # 画像ファイル格納フォルダー
│   ├── 観望会ロゴタイプ_黒.png  # メインロゴ
│   ├── シンボルマーク.png      # ファビコン・アプリアイコン
│   └── OGP-image.png          # SNSシェア用画像
├── apps-script/             # GAS バックエンド（リポジトリ管理対象）
│   └── KB/
│       ├── Code.gs                          # メインAPI（doGet/doPost、検証、メール送信）
│       ├── setup-environment.example.gs     # 環境変数セットアップのテンプレート
│       └── appsscript.json                  # Apps Script マニフェスト
│
│   ※ 実値を含む setup-environment.gs は .gitignore で除外
└── .github/                 # GitHub設定
    └── ISSUE_TEMPLATE/      # Issue テンプレート

カスタマイズ

デザインの変更

styles.cssを編集してデザインをカスタマイズできます：

カラーテーマの変更
フォントの調整
レイアウトの修正
グレーアウト表示のスタイル調整

機能の追加

script.jsで以下の機能を追加・修正できます：

新しい入力項目
カスタムバリデーション
追加のUIエフェクト

PWA設定のカスタマイズ

manifest.jsonを編集してPWAの設定を変更できます：

アプリ名・説明の変更
アイコンサイズの追加
表示モードの調整

画像の管理

Images/フォルダーで画像を管理：

シンボルマーク.png: ファビコン・アプリアイコン用
OGP-image.png: SNSシェア用専用画像
観望会ロゴタイプ_黒.png: メインロゴ・404ページ用

セキュリティについて

詳細は SECURITY.md をご覧ください。

貢献方法

バグ報告

公開サイト: https://flint8777.github.io/TEST_KesenNuma-StarryNight/

概要

このリポジトリは、気仙沼で実施する星空観望会の参加予約システムです。フロントエンドは静的サイト（GitHub Pages）でホストし、バックエンドは Google Apps Script を使用してスプレッドシートへ予約を記録します。

主な機能

マルチステップの予約フォーム
出席者数の選択
ワークショップ（はい/いいえ）の選択
プラネタリウム（はい/いいえ）の選択
時間帯ごとの予約（残席あり/残席なしの表示）
残席不足や満席の時間帯は選択肢としてグレーアウト表示
入力検証と基本的なセキュリティ対策（XSS、レート制限など）

セットアップ（開発/運用）

リポジトリをクローン

git clone https://github.com/flint8777/TEST_KesenNuma-StarryNight.git cd TEST_KesenNuma-StarryNight
設定ファイルの準備
- config.example.js をコピーして config.js を作成し、API_URL をデプロイ済みの Google Apps Script の URL に変更してください。
Google Apps Script のデプロイ
- apps-script/KB/Code.gs を Apps Script プロジェクトにコピーし、ウェブアプリとしてデプロイします。
- apps-script/KB/setup-environment.example.gs を参考に Script Properties を設定してください（SPREADSHEET_ID / ADMIN_EMAIL は必須）。実値版の setup-environment.gs はコミットせず、Apps Script 側のみで管理してください（.gitignore 済み）。
スプレッドシートの準備
- 予約データ用のスプレッドシートを作成し、Apps Script からの書き込み権限を確認してください。

設定例

config.js の基本例:

const SITE_CONFIG = {
  API_URL: 'https://script.google.com/macros/s/YOUR_DEPLOYMENT_ID/exec',
  MAX_PARTICIPANTS: 6,
  TIMEOUT_MS: 30000
};

プロジェクト構成（主なファイル）

index.html
styles.css
script.js
iframe-embed-codes.html
config.example.js
config.js (運用時は Git 管理外にすること)
manifest.json
SECURITY.md
Images/
apps-script/KB/Code.gs（GAS バックエンド本体）
apps-script/KB/setup-environment.example.gs（環境変数セットアップのテンプレート）
apps-script/KB/setup-environment.gs（実値版・Git 管理外）

注意事項

デモ環境では一部機能（メール送信など）を無効化している場合があります。運用時は setup-environment.gs で環境変数を適切に設定してください。
本番では ALLOW_DIRECT_ACCESS や ENABLE_REFERRER_CHECK 等のセキュリティ設定を見直してください。

履歴

v2.1.0 (2025-08-20): UI/表示改善（選択肢統一、残席表示の簡略化、Analytics 削除）
v2.0.0 (2025-08-20): SEO/OGP、PWA 準備、画像整理
v1.0.0 (2025-08-19): 初回リリース

ライセンス

MIT License

Name		Name	Last commit message	Last commit date
Latest commit History 63 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
Images		Images
apps-script/KB		apps-script/KB
.gitignore		.gitignore
404.html		404.html
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
config.example.js		config.example.js
iframe-embed-codes.html		iframe-embed-codes.html
index.html		index.html
manifest.json		manifest.json
script.js		script.js
styles.css		styles.css

Folders and files

Latest commit

History

Repository files navigation

気仙沼星空観望会 予約システム

概要