カテゴリー: Pet

システムログインでは、最初に会社概要に遷移し、工事一覧と進んでいたが、最初に工事一覧へ遷移するように切り替え、工事一覧のデザインを変更して、工事のサムネイルが表示されるようにした・・・バタバタと変更するが、じっくり見るとボタンの配置が雑多なので、少し変更することにする

その他の改善

• キャンバス表示範囲の拡張：工期ぴったりの表示から「工期の前後1ヶ月」に拡張。工期前後への工程配置が可能になり、読込時は工期開始位置へ自動スクロール。印刷は従来どおり指定範囲のみ
• 印刷範囲外工程の除外：バーチャートの印刷で範囲外の工程・接続線が出力される問題を修正。あわせてアノテーション（テキスト・フリー線）が印刷範囲変更時にずれる問題も修正（日付アンカー方式を導入）
• フリー線の太さ・矢印修正：太さ変更が即反映されない問題と、1pxで矢印が見えなくなる問題を修正（矢印を固定サイズに変更）
• ダブルクリック編集の修正：委譲化により発生した問題。DOM再構築のタイミング制御（requestAnimationFrame遅延・3px閾値）で解消

結果

工程表（バーチャート・ネットワーク）の品質改善

アノテーション機能の全面整備（メイン作業）

背景：2画面でアノテーション（テキストボックス・フリー線）の実装がバラバラで、barchartに欠けている機能が多かった・・設計書を作成してから4段階で実装した

あわせてモーダルのUI表記も両画面で統一（ボタンラベル・フォント選択肢・フリー線太さをselect化等）・・・P4完了後に発覚した退行（barchartのテキストボックス）：長文・大フォントで文字が枠からはみ出し、クリック・ダブルクリックが効かなくなる問題。原因はforeignObjectの固定サイズ・・・networkにあった「文字量に合わせた自動拡大」が移植漏れだったため、共通モジュールに追加して解消

印刷機能の連続修正

楽観ロック実装

楽観ロックとは

複数ユーザーが同じデータを同時に編集した際、後から保存した人の内容が前の人の変更を上書きしてしまう問題を防ぐ仕組み

共通基盤の構築

4ファイルを新規作成して土台を整備

2.onclick / onchange インラインハンドラを addEventListener に移行する

サーバー側のバリデーション・サニタイズと、ブラウザ側のCSPの両方が必要

• グループA：サイドバー（id 付き → そのまま addEventListener）
• グループB：サイドバー（id なし → id を付与してから addEventListener）
• グループC：ページタブバー（id なし → id 付与）
• グループD：ナビバー（Blade 条件分岐内）
• フローティングRTB（書式ツールバー）のインラインハンドラ移行

施工計画のエディット画面（edit_section_blade.php）が、ほぼ実装が完了したので、再びコードの検証を行う・・・やはり、まだ課題が多く残っていたので、順にコードの手直しをする

1.生HTML出力（{!! !!}）を使用している

{!! !!} はエスケープなしの生出力のため、$headerHtml / $footerHtml がDB経由で、悪意あるスクリプトを含む場合、XSS攻撃が成立する。
サーバーサイドでのサニタイズ（無害化）状況を確認し、不十分であれば修正する・・・XSS（クロスサイトスクリプティング）、SQLインジェクション・・以下はサニタイズの手法

これらの手法は、Laravelでは多くは自動で処理してくれるが、施工計画のSVGダイアグラムエディタのような自前JS処理部分は別途確認が必要

1-1.データの流れを追跡する

• コントローラを特定する（ルート名 project_plans.sections.editから逆引きする）
• $headerHtml / $footerHtml の生成箇所を特定する
• DBカラムの確認

1-2.現状の判定（サニタイズ処理必要性の検証）

• ✅ 安全なケース（修正不要）
• ❌ 要修正なケース（対応する、入力時サニタイズ、HtmlPurifier の導入確認、サービスクラスまたはヘルパーの作成、コントローラの保存処理にサニタイズを追加、既存DBデータの一括サニタイズ（Artisan コマンド））

1-3.実施結果

Claude Codeでの実施結果ではOK、変更なし、コメントを追記