構成環境

ファイル: 構成環境.md / 更新日: 2026/6/8

このファイルは、PersonalHomepage プロジェクトで使っているツール、開発環境、ライブラリ、運用方針をまとめるためのメモです。

プロジェクト概要

プロジェクト名: PersonalHomepage
目的: 個人ノート、技術メモ、学習記録、プロジェクト文書を公開する個人サイトを作る
方針: 学習を優先し、まずは小さく静的サイトとして作る
将来の方向性: Laravel 学習やコミュニティ機能は別フェーズで検討する
現在のトップページ方針: 特番情報、上場企業情報、注目の飲食店、学習記録への入口として運用する

使用ツール

Codex

このプロジェクトでの開発支援に使用する AI コーディングツール。

主な役割:

ファイル作成、編集
実装方針の相談
コマンド実行
動作確認
作業履歴の更新
ローカルコミットの作成
将来的な定期更新処理の支援

このプロジェクトでは、Codex が作業後に docs/作業履歴.md を更新する。

GitHub Desktop

Git を GUI で操作するためのツール。

SourceTree と同じ種類の Git クライアントとして扱う。

主な役割:

変更内容の確認
コミット履歴の確認
GitHub への push
GitHub からの fetch / pull

このプロジェクトでは、会社用 GitHub 認証と混ぜないため、GitHub への push は GitHub Desktop で行う。

Git

ソースコードのバージョン管理に使用する。

現在の設定:

ブランチ: main
リモート名: origin
リモート URL: https://github.com/harubsb/PersonalHomepage.git

GitHub

ソースコードの保存先。

リポジトリ: harubsb/PersonalHomepage
公開範囲: private
用途: バージョン管理、Cloudflare Pages との連携

構築環境

Node.js

Astro や npm パッケージを実行するために使用する。

確認時点のバージョン:

v24.11.1

npm

Node.js のパッケージ管理に使用する。

確認時点のバージョン:

11.6.2

主な用途:

依存関係のインストール
開発サーバーの起動
ビルドの実行

フレームワーク・ライブラリ

Astro

個人サイト本体を作るためのフレームワーク。

採用理由:

軽量
静的サイト生成に向いている
学習しやすい
Cloudflare Pages にデプロイしやすい

package.json での指定:

"astro": "^6.3.8"

TypeScript

Astro の型定義や設定に使用する。

package.json での指定:

"typescript": "^5.8.3"

サイト構成

ページ

src/pages/index.astro

- トップページ

- 特番情報、上場企業情報、注目の飲食店、学習記録へのメニュー入口

src/pages/special-programs/

- 特番情報

- サンプル番組リスト

src/pages/listed-companies/

- 上場企業情報

- サンプル上場予定企業リスト

src/pages/restaurants/

- 注目の飲食店

- サンプル飲食店リストと、お気に入り保存機能

src/pages/notes/

- 個人ノート一覧、詳細ページ

src/pages/tech/

- 技術メモ一覧、詳細ページ

src/pages/learning/

- 学習記録一覧、詳細ページ

- docs/*.md の情報系ファイル一覧

src/pages/learning/docs/

- docs/*.md の情報系ファイル詳細ページ

src/pages/projects/

- プロジェクト文書一覧、詳細ページ

共通レイアウト

src/layouts/BaseLayout.astro

- 全ページ共通の HTML 構造、ヘッダー、ナビゲーション、フッター

スタイル

src/styles/global.css

- サイト全体の CSS

- トップページ専用のポップなヒーロー、メニューカード、ヘッダーメニューのスタイル

- トップページ専用の手書き風ブタ柄背景

- 注目の飲食店ページのカードリスト、お気に入り欄のスタイル

- 全ページ共通の固定ヘッダー

- メニューごとの背景テーマ

- ジャンル絞り込みボタンのスタイル

外部 CSS フレームワークは現時点では使っていない。

手動編集

文言、リンク、メニュー、デザインを手動で変更する場合は、次のドキュメントを参照する。

docs/編集マニュアル.md

コンテンツ

src/content/notes/

- 個人ノート

src/content/tech/

- 技術メモ

src/content/learning/

- 学習記録

src/content/projects/

- プロジェクト文書

Markdown ファイルを追加することで記事を増やす。

Content Collections

src/content.config.ts

- Astro の Content Collections 設定

- Astro 6 の Content Layer API に合わせて loader: glob(...) を使用

情報系ファイル表示

src/lib/projectDocs.ts

- docs/*.md をビルド時に読み込む処理。

- 学習記録ページの「サイト制作メモ」一覧と、詳細ページ表示に使用する。

src/pages/learning/docs/[slug].astro

- docs/*.md の本文をサイト上で閲覧するための詳細ページ。

.md 以外のファイル、たとえば .pptx は現時点では本文表示の対象外。

npm コマンド

開発サーバー

npm run dev

Astro の開発サーバーを起動する。

ビルド

npm run build

静的サイトを dist/ に生成する。

プレビュー

npm run preview

ビルド後のサイトをローカルで確認する。

チェック

npm run check

現在は astro build と同じ処理を実行する。

デプロイ

Cloudflare Pages

Astro サイトの本番公開先。

現在の設定:

プロジェクト名: personalhomepage
公開 URL: https://personalhomepage-1w7.pages.dev
GitHub リポジトリ: harubsb/PersonalHomepage
プロダクションブランチ: main
フレームワークプリセット: Astro
ビルドコマンド: npm run build
出力ディレクトリ: dist

GitHub の main ブランチに変更が push されると、Cloudflare Pages が自動でビルドして公開する。

自動更新予定

将来的に Codex のスケジュール機能で、次のページを定期更新することを検討する。

src/pages/special-programs/index.astro

- 特番情報。

- 現時刻から19時〜24時の間で放映される特別番組を対象にする。

- 毎週放送の番組は除外する想定。

src/pages/listed-companies/index.astro

- 上場企業情報。

- 上場予定企業の情報を対象にする。

src/pages/restaurants/index.astro

- 注目の飲食店。

- 福岡県小倉周辺の新店、リニューアル店舗などを対象にする。

- 現時点ではサンプルデータを表示し、気になった店はブラウザの localStorage にお気に入り保存する。

- ジャンルボタンで表示/非表示を切り替える。

src/pages/recommended-inns/index.astro

- お勧め宿。

- 関西エリア限定で、ご飯が美味しいことを最優先に宿を候補化する。

- 料理根拠リンクと最安プラン確認リンクを分けて掲載する。

- 気になった宿はブラウザの localStorage にお気に入り保存する。

実際に自動化する前に、情報取得元、更新頻度、掲載項目、自動 commit / push 方針を決める。

GitHub Desktop 運用

このプロジェクトの基本運用:

1. Codex が作業する。

2. Codex が docs/作業履歴.md を更新する。

3. Codex がローカルコミットを作成する。

4. ユーザーが GitHub Desktop で Push origin を押す。

5. Cloudflare Pages が自動でビルドし、https://personalhomepage-1w7.pages.dev に反映する。

ユーザーが手動でファイルを変更した場合:

1. GitHub Desktop の Changes を確認する。

2. Summary にコミットメッセージを書く。

3. Commit to main を押す。

4. Push origin を押す。

5. Cloudflare Pages のデプロイ完了後、公開 URL を確認する。

Git 管理しないもの

.gitignore で除外している主なもの:

node_modules/
dist/
.astro/
.env
.env.*
astro-dev*.log

Codex プロジェクト設定

Web 参照

2026-06-07 時点で、.codex/config.toml から Web 検索の許可ドメイン制限を削除した。

以前は次の設定により、Codex の Web 参照先が github.com / raw.githubusercontent.com に限定されていた。

[tools]
web_search = { allowed_domains = ["github.com", "raw.githubusercontent.com"] }

この制限を削除したため、実データ収集時に JPX、Cloudflare、番組表サイト、飲食店情報サイトなどの公式サイトを参照できる想定。

Astro Dev Toolbar

2026-06-07 時点で、astro.config.mjs に以下を設定し、Astro Dev Toolbar を無効化している。

devToolbar: {
  enabled: false,
}

理由は、Windows 環境で npm run dev 実行時に Dev Toolbar 関連の依存最適化が走り、Cannot read directory "../..": Access is denied. が発生するため。公開サイトには不要な開発補助機能なので無効化している。

2026-06-07 時点では、npm run build は成功する一方、npm run dev では同じ Dev Toolbar 関連の依存最適化エラーが継続している。表示確認は必要に応じて npm run build 後に npm run preview で行う。

各メニューのリスト更新ルール

「注目の飲食店」「特番情報」「上場企業情報」「お勧め宿」は、毎日更新しても前日のリストをすぐ削除しない。

追加日ごとのグループで表示する。
7日分を保持する。
8日目以降は最も古い追加日グループから削除する。
注目の飲食店のお気に入りはブラウザの localStorage に保存するため、通常リストから消えてもお気に入り欄に残せる。
特番情報、上場企業情報、お勧め宿も同じくブラウザの localStorage にお気に入りを保存する。

ヘッダーメニュー

ヘッダーのリンクは「メニュー」ボタンにまとめている。

ピックアップ情報

- 注目の飲食店

- 特番情報

- 上場企業情報

- お勧め宿

成果物

- 学習記録

フィルタ保存

各リストページのフィルタは通常非表示で、開閉状態とオン/オフ状態をブラウザの localStorage に保存する。

注目の飲食店

- お気に入り: personalHomepage.favoriteRestaurants

- フィルタ状態: personalHomepage.restaurantFilters

- フィルタ開閉: personalHomepage.restaurantFiltersOpen

特番情報

- お気に入り: personalHomepage.favoritePrograms

- フィルタ状態: personalHomepage.programFilters

- フィルタ開閉: personalHomepage.programFiltersOpen

上場企業情報

- お気に入り: personalHomepage.favoriteCompanies

- フィルタ状態: personalHomepage.companyFilters

- フィルタ開閉: personalHomepage.companyFiltersOpen

お勧め宿

- お気に入り: personalHomepage.favoriteInns

- フィルタ状態: personalHomepage.innFilters

- フィルタ開閉: personalHomepage.innFiltersOpen

ピックアップ日次更新ルール

docs/ピックアップ更新ルール.md

- 4つのピックアップページを毎日更新する際の基準

- 7日保持、重複回避、再掲条件、ソース選定ルールを記録

.codex/skills/daily-pickup-update/SKILL.md

- Codex が日次更新を回すためのローカル skill

- 当日グループ追加、重複禁止、ドキュメント更新、ビルド確認までを明記