code-tactics-lp
code-tactics の紹介ページ (ランディングページ / LP)。
ゲーム本体ではなく、ゲームを紹介してプレイ画面へ誘導する ための静的サイト。
code-tactics とは
2D プログラマブル・オートバトルゲーム。プレイヤーはユニットを直接操作せず、戦闘前に
AI ルール (行動ルール式 / 簡易プログラム) を設定し、自動戦闘の結果とログを観察・改善するサイクルが中核。
「自分で組んだ AI で部隊を戦わせ、負けた理由をログとリプレイで分析し、ルールを直して再挑戦する」
この LP の役割
- ゲームのコンセプトと魅力を 1 ページで伝える
- スクリーンショット / 短いデモでゲーム性を見せる
- 「今すぐプレイ」「GitHub を見る」への導線
- ロードマップ (到達点・残タスク) を掲載
Status
🌐 公開中 — Astro + Tailwind CSS で実装し、GitHub Pages へ自動デプロイ済み。
デザイン基盤 (配色/タイポグラフィ・SEO/OGP・アクセシビリティ・スクロール演出・回遊ナビ・
モバイルナビ・FAQ・404 ページ) は実装済み。CI で Lighthouse 計測とリンク切れ検出も継続している。
本体の進捗 (複数ユニット、障害物、簡易プログラム言語、キャンペーン、非同期対戦など) に合わせて
LP コピーを更新済み。実ゲーム画面スクリーンショット/デモ動画の差し込みも完了済み。残る主作業はコピーの磨き込み。
技術スタック (決定)
LP は「速くて軽い静的サイト」が最適。下記で確定。決定の根拠は
docs/decisions.md、選定理由と代替案比較は
docs/tech-stack.md を参照。
| 区分 | 採用 | 補足 |
|---|
| フレームワーク | Astro | コンテンツ中心の静的サイトに最適。JS をほぼ吐かず高速 |
| スタイリング | Tailwind CSS | LP の見た目を素早く作れる |
| ホスティング | GitHub Pages | 本体 web 版と運用を揃えやすい (base パス設定に注意) |
Getting started
必要環境: Node.js 26 (CI も node-version: 26 で動かしている)。mise などで合わせる。
# 依存インストール
pnpm install
# 開発サーバー (http://localhost:4321/code-tactics-lp/)
pnpm run dev
# 本番ビルド (静的出力 → dist/)
pnpm run build
# ビルド結果のローカルプレビュー
pnpm run preview
# 型チェック
pnpm run astro check
# Lint (Biome)
pnpm run lint
# 整形 (Prettier + prettier-plugin-astro)
pnpm run format # 上書き整形
pnpm run format:check # 差分チェックのみ
GitHub Pages のサブパス配信に合わせ astro.config.mjs で base: /code-tactics-lp を
設定済み。開発サーバーも /code-tactics-lp/ 配下で配信される。
Environment variables
ローカル開発では基本的に .env の設定は不要。以下の2つは本番ビルド・CI 専用の値で、
未設定のままで問題なく動く。
| 変数名 | 用途 | ローカルでの扱い |
|---|
PUBLIC_REPO_PUBLIC | 本体リポジトリ (code-tactics) の公開状態フラグ (src/consts.ts の REPO_IS_PUBLIC)。本体が private の間は GitHub リンクを「準備中」表示に切り替えて 404 を防ぐ (#97, #209)。 | 公開後の表示をローカルで確認したいときだけ .env に PUBLIC_REPO_PUBLIC=true を置く。本番ビルドは GitHub repository variable を参照するため影響しない。 |
PUBLIC_CF_BEACON_TOKEN | Cloudflare Web Analytics のビーコントークン (src/layouts/Layout.astro)。採用理由は docs/decisions.md 決定4 を参照。 | 未設定のままでよい (scripts/check-beacon-gate.mjs も未設定時はビーコン非出力を正しい挙動として扱う)。本番デプロイは .github/workflows/deploy.yml が secrets から渡す。 |
生成アセットの再生成
public/og.png と public/apple-touch-icon.png は .gitignore されており Git 非管理。
実体は scripts/generate-og.mjs / scripts/generate-icons.mjs の生成物で、ローカルと CI で
バイナリが異なるためコミットせず、都度生成する運用にしている。
pnpm run og # public/og.png (1200x630) を生成
pnpm run icons # public/apple-touch-icon.png (180x180) を生成
CI (.github/workflows/ci.yml / deploy.yml / lighthouse.yml) は各ワークフロー内で
同じコマンドを実行してビルド用にアセットを都度生成する。コミット不要のため、配色や
コピー、SVG テンプレートを変更した場合もローカルでの再生成・コミットは不要
(ビルド確認したい場合のみ上記コマンドを実行すればよい)。
Deploy
main への push で GitHub Actions の Deploy to GitHub Pages
(.github/workflows/deploy.yml) が自動でビルド・デプロイする。
手動で再デプロイしたい場合は GitHub の Actions タブから
Deploy to GitHub Pages ワークフローを開き、Run workflow (workflow_dispatch)
で main を選んで実行する。CLI からは:
gh workflow run "Deploy to GitHub Pages" --ref main
Documents
License
MIT License。
