施工計画書 セットアップ画面 再構築
resources/views/projects_plan/setup.blade.php を中心に、セットアップ画面の右パネルを大幅改修・・・手直しではなく作り直しに
1.変更ファイル一覧
1-1.マイグレーション（新規）
database/migrations/2026_06_13_000001_add_margin_to_project_plans_table.php
project_plans テーブルに余白カラムを追加margin_top（上余白 mm、デフォルト25）margin_bottom（下余白 mm、デフォルト25）margin_left（左余白 mm、デフォルト25）margin_right（右余白 mm、デフォルト20）
1-2.ルート追加（routes/web.php)
| メソッド | URL | 名前 | 用途 |
|---|---|---|---|
| PATCH | {plan}/settings| | project_plans.update_settings | 全体一括保存 |
| POST | {plan}/change-work-type | project_plans.change_work_type | 工事種別変更 |
| POST | {plan}/sections | project_plans.sections.store | セクション追加 |
1-3.コントローラー（app/Http/Controllers/ProjectPlanController.php）
- 建築系セクション定義を24項目に更新（総合施工計画〜給排水衛生工事）
- updateSettings() 追加：ヘッダー/フッター・余白・セクション並び順/名前を一括保存
- changeWorkType() 追加：工事種別変更（既存セクション全削除 → 新規種別で再作成、JSONで新セクション一覧を返す）
- addSection() 追加：カスタムセクション追加
1-4.フロントエンドJS（resources/js/projects_plan/setup.js）
- 建築系項目リストを24項目に更新（コントローラーと同期）
- 状態Bのラジオボタン問題を修正：x-on:change → $watch(‘workType’, …) に変更（CSP版AlpineでのXタイミング問題を解消）
- planEdit Alpine.dataを新規追加（状態A用）
- セクション一覧のドラッグ&ドロップ並び替え（SortableJS）
- カスタム項目追加（API連携）
- セクション削除（API連携）
- 工事種別変更（確認ポップアップ → API連携 → セクション一覧更新）
- 全体保存（用紙余白・ヘッダー/フッター・セクション情報）
- 用紙設定モーダル（余白プレビュー連動）
1-6.不具合修正
- 建築系選択時に項目が変わらない問題：x-on:change のタイミング問題を $watchで解消
- カスタム追加が動かない問題：状態A・状態Bともに再実装
- 並び替えが動かない問題：状態Aに SortableJS を適用
1-7.変更概要
resources/views/projects_plan/edit_section.blade.php を全面書き直し
編集モードを図面（diagram）モードのみに統一し、サイドバーを拡大・テンプレートボタンを最上段に移動
1-8.変更ファイル(削除した機能)
resources/views/projects_plan/edit_section.blade.php（全面再作成）
| 削除対象 | 内容 |
|---|---|
| TipTap エディタモード（✏️ 編集） | 文書編集モードを廃止 |
| AI整形モード（🤖 AI整形） | AIフォーマットモードを廃止 |
| #template-panel（テンプレート適用バー） | 上部に固定されていたテンプレート適用UIを削除 |
| #tiptap-a4-sheet | TipTapのA4表示エリアを削除 |
| #sb-tiptap/ #sb-ai サイドバーグループ | TipTap・AI専用サイドバーを削除 |
| switchMode() 関数 | モード切替ロジックを廃止 |
| TipTap・AI関連のCSS・JS | 大幅コード削減 |
1-11.変更なし
- diagram-editor-script.blade.php（共通コンポーネント）は変更なし
- テンプレート登録・呼出モーダル（動作は同一）
- ページタブバー・前後ナビゲーションバー
- フローティングRTB（テキスト書式ツールバー）
- xspreadsheet 表挿入機能
1-12.各作図オブジェクトの修正
これから実際計画書を作図する各パーツの修正を何回も繰り返した
特に表の挿入と表の装飾には手間取った
印刷機能も中々改善されなかった
ヘッダー、フッターの配置、図面の余白の問題も修正が大変だった
繰り返し修正をして、Claude Codeが中々思うように修正しない、/clearを繰り返してやり直しをさせる・・・何とか許容範囲まで来たのでいったん決着とする
1-5.ビュー（resources/views/projects_plan/setup.blade.php）
状態A（計画書あり）の主な変更：
- ヘッダーバー：PDF取込 → テンプレート作成、💾 保存 ボタンを追加
- 印刷テンプレート行を廃止 → 用紙設定エリアに変更
- 📐 A4縦（余白設定） ボタン → 用紙設定モーダル
- ヘッダー/フッター選択も同エリアに移動
- 工事種別のラジオボタンを編集可能に（read-only解除、確認ポップアップ付き）
- セクション一覧にドラッグ&ドロップ並び替えを追加
- セクション一覧に使用フラグ・提出フラグのチェックボックスを追加
- 表紙・目次にも「編集」ボタンを追加（sections.edit ページに遷移）
- カスタム項目追加フィールドを追加
- 削除ボタン（✕）を追加
- 目次プレビューを Alpine.js 反応型に変更（並び替え結果をリアルタイム反映）
状態B（新規作成）の変更：
- タイトル入力をヘッダーバー内に移動してコンパクト化
- 工事種別ラジオボタンの修正（$watch 使用）
- 建築系24項目に対応
用紙設定モーダル：
- A4縦縮小プレビュー（210×297px、余白の変化をリアルタイム反映）
- 上下左右余白を mm 単位で設定
- 保存は「💾 保存」ボタンで一括保存
1-9.変更した機能
| 変更内容 | 詳細 |
|---|---|
| アクションバー | 図面モードのみ。モード切替ボタンなし → 「💾 保存」「🖨️ 印刷」のみ |
| 図面モードを「常時アクティブ」化 | diagram-editor-script を直接ロード、初期化時から図面表示 |
| 保存ボタン | クリックで saveDiagram() を直接呼び出し |
| 印刷ボタン | クリックで printDiagram() を直接呼び出し |
1-10.サイドバーの変更
| 変更内容 | 詳細 |
|---|---|
| 幅を拡大 | 120px → 170px |
| ラベル文字サイズを拡大 | 8px → 11px（視認性改善） |
| テンプレートグループを最上段に移動 | 📂 呼び出す / 📋 登録する を grp-tmpl グループとして最上段に配置 |
| テンプレートグループ背景色 | 淡黄（#fefce8）で他グループと区別 |
| グループ順序 | ① テンプレート → ② 操作(Undo/Redo) → ③ ツール → ④ 挿入 → ⑤ グリッド → ⑥ 編集 |