ShiftMemo - 交代勤務シフト別 引継ぎ・ノウハウ共有ナレッジベース

## 1. アプリの目的・ターゲットユーザー
製造業・物流・食品加工・警備・医療介護など「交代勤務＋複数ライン・部署」を持つ現場向けに、シフトや工程をまたいで知見・ノウハウ・注意点を蓄積・検索できるナレッジベース。既存の ShiftHandover が「申し送り（今日→次のシフト）」の縦方向フローに特化しているのに対し、本アプリは「過去の経験・トラブル・改善アイデアを横断的に蓄積・検索する知識辞典」として差別化する。ターゲットは 5〜100 名規模の製造・現場系職場の班長・リーダー・教育担当者。

## 2. 主要機能
- **記事投稿・編集**：タイトル・本文（Markdown 風テキストエリア）・カテゴリ（設備操作 / トラブル対応 / 品質注意 / 安全 / 改善アイデア / その他）・対象ライン／部署タグ・難易度（初心者向け／中級／ベテラン）を入力して投稿。編集・削除も可能。
- **全文検索＋タグフィルター**：キーワード検索とカテゴリ・ライン・難易度の複合フィルターで目的の記事に素早くたどり着ける。
- **役立った！評価（★カウント）**：記事ごとにワンクリックで「役立った」数を加算。トップページに「よく役立てられている記事 TOP10」を表示。
- **コメント・補足追記**：記事に対してほかの作業者がコメント（補足・反論・追加事例）を投稿できる。名前入力のみで登録不要。
- **管理者ダッシュボード**：投稿数の推移（週次・月次）、カテゴリ別件数、閲覧ランキング、未承認コメントの確認・削除をまとめて行える。管理者はパスワード認証（セッション管理）でログイン。
- **印刷・PDF 向け表示**：記事を A4 印刷レイアウトで表示する「印刷ビュー」ボタンを搭載。現場掲示用にそのまま印刷できる。

## 3. 画面構成
- **トップページ（/index.php）**：検索バー、カテゴリ・タグ・難易度フィルター、最新記事一覧カード（タイトル／カテゴリ／タグ／★数）、「よく役立てられている TOP10」サイドバー。スマホでは1カラム、PC では 2カラム。
- **記事詳細ページ（/article.php?id=XX）**：タイトル・カテゴリ・タグ・難易度バッジ・本文（改行反映）・投稿日・★ボタン（Ajax カウントアップ）・コメント一覧・コメント投稿フォーム・印刷ビューボタン。
- **記事投稿ページ（/post.php）**：タイトル、カテゴリ（セレクト）、ライン／部署タグ（テキスト、カンマ区切り）、難易度（ラジオ）、本文（テキストエリア）、投稿者名（任意）を入力して送信。登録不要で誰でも投稿可能（スパム対策としてサーバー側で文字数・NG ワードチェック）。
- **管理者ログインページ（/admin/login.php）**：パスワード認証。
- **管理者ダッシュボード（/admin/index.php）**：週次投稿数グラフ（Chart.js）、カテゴリ別棒グラフ、記事一覧（編集・削除ボタン）、コメント一覧（削除ボタン）。
- **印刷ビュー（/print.php?id=XX）**：ヘッダー・フッターのみの A4 相当レイアウト。CSS @media print で自動適用。

## 4. データ構造
### テーブル: articles
| カラム | 型 | 概要 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| title | VARCHAR(200) | 記事タイトル |
| body | TEXT | 本文 |
| category | VARCHAR(50) | カテゴリ |
| tags | VARCHAR(300) | カンマ区切りタグ |
| difficulty | TINYINT | 1=初心者 2=中級 3=ベテラン |
| author | VARCHAR(100) | 投稿者名（任意） |
| star_count | INT DEFAULT 0 | 役立った数 |
| view_count | INT DEFAULT 0 | 閲覧数 |
| created_at | DATETIME | |
| updated_at | DATETIME | |

### テーブル: comments
| カラム | 型 | 概要 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| article_id | INT FK | |
| author | VARCHAR(100) | |
| body | TEXT | |
| created_at | DATETIME | |

### テーブル: admin_users
| カラム | 型 | 概要 |
|---|---|---|
| id | INT PK | |
| username | VARCHAR(50) | |
| password_hash | VARCHAR(255) | password_hash() |

## 5. デザインの方向性
- **配色**：ダークネイビー（#1a2744）をベースに、アクセントカラーはオレンジ（#f5840c）。現場感＆視認性を重視した力強いデザイン。
- **フォント**：見出しは Noto Sans JP Bold、本文は Noto Sans JP Regular。文字サイズは本文 16px 以上でスマホ現場での読みやすさを確保。
- **カードUI**：記事一覧はカード型で、左端にカテゴリカラーの縦ライン（設備操作=青、トラブル=赤、品質=黄、安全=緑）を付けて瞬時に識別。
- **難易度バッジ**：初心者=緑、中級=橙、ベテラン=赤の丸バッジ。
- **レスポンシブ**：CSS Grid + Flexbox で PC（1200px 2カラム）/ タブレット（1カラム）/ スマホ（1カラム・大きめタップ領域）対応。
- **規模感**：PHP 5〜8 ファイル程度、JavaScript は Chart.js + 素の JS のみ。1 回の開発セッションで完成できる現実的なボリューム。