質問
⚠️ この事例は公開されてから1年以上経過しています。 情報が古い可能性がありますので、ご注意ください。
🕓 事例公開日 : 2024-06-18
【背景】
ワークフローシステムのポータル画面において、タブの色をカスタマイズするためにテーマCSSファイルを編集した。検証環境では正常に反映されたが、本番環境では変更が適用されない状況が発生した。1. 事象
症状の説明：
テーマCSSファイル（theme.css）を修正してデプロイを実施したが、本番環境でタブの色変更が反映されない。一方、検証環境では同じCSSファイルを使用して正常に反映されることを確認している。実施した作業内容：
1. ポータル画面のタブ（非選択時）の色を変更するため、CSSファイルの1490行目付近の属性を修正2. eBuilderのpublic配下にディレクトリ構造を作成し、修正済みCSSファイルを配置
3. immファイルを出力後、Jugglingでwar/zipファイルを生成
4. 管理サイトからwar/zipファイルをデプロイ
5. サーバー上の実ファイルに修正済みファイルが配置されたことをWinSCPで確認
6. ブラウザから複数クライアントでアクセスしたが、タブ色が反映されない
7. ブラウザキャッシュをクリアして再表示しても変化なし
修正内容の詳細：
CSSファイルの1490～1494行目を以下のように変更：変更前：
background: #333333;/*for IE8*/
background: rgba(0, 0, 0, 0);
/* not IE8 */変更後：
background: #666666;/*for IE8*/
/*background: rgba(0, 0, 0, 0);*/
background: linear-gradient(#bbbbbb 0%, #666666 50%);
/* not IE8 */2. 発生条件
・本番環境のシステムでテーマCSSをカスタマイズした場合に発生・検証環境では同じCSSファイルで正常に動作
・Jugglingでの静的ファイル出力時に「運用環境」を選択している
・複数のテーマ（orchid_pink、blue）で同様の現象を確認
回答
1. 原因
技術的な原因：
本番環境では、Jugglingで静的ファイルを出力する際に「運用環境」を選択していたため、システムは圧縮版のCSSファイル（theme.min.css）を参照していました。しかし、カスタマイズ作業ではtheme.cssのみを修正し、theme.min.cssは更新していなかったため、変更内容が反映されませんでした。技術的要因の分析：
・実行環境の種別による動作の違い：Jugglingで「運用環境」を選択すると、UI基本モジュールがlink rel="stylesheet"タグのラッパータグファイルを最小化し、theme.min.cssを参照する仕様となっている → 本番環境ではtheme.min.cssが使用される・検証環境の設定：「統合テスト環境」として出力していたため、圧縮されていないtheme.cssが直接参照されていた → 検証環境ではtheme.cssの修正が即座に反映された
・CSSファイルの更新漏れ：theme.cssのみを修正し、対応するtheme.min.cssを更新していなかった → 本番環境で参照されるファイルに変更が含まれていなかった
根本的な要因：
実行環境の種別によって参照されるCSSファイルが異なる仕様を把握せずにカスタマイズ作業を行ったため、本番環境で使用される圧縮版CSSファイル（theme.min.css）の更新が漏れていたことが根本原因です。2. 対応方法
根本解決方法：
1. 修正したtheme.cssをCSS圧縮・軽量化（Minify）ツールを使用してtheme.min.cssを生成します2. 生成したtheme.min.cssをeBuilderのプロジェクトに配置します
3. immファイルを出力し、Jugglingでwar/zipファイルを作成します
4. 管理サイトから再度デプロイを実施します
5. ブラウザでアクセスし、タブの色変更が反映されていることを確認します
参考情報：
製品仕様として、テーマが使用するCSSはLESSを利用して生成することが推奨されています。スクラッチでテーマモジュールを作成する場合も、LESSを使用してCSSを生成することをご検討ください。参考ドキュメント：
intra-mart Accel Platform テーマ仕様書 - CSS
3. 原因究明に至るまでの調査方法
1. お客様から提供されたharファイル（本番環境と検証環境）を比較分析しました2. 本番環境と検証環境で参照しているCSSファイルのパスに以下の違いがあることを確認しました：
・本番環境：https://example.com/foo/bar/theme.min.css
・検証環境：https://example.com/baz/qux/theme.css
3. サーバー上の複数のtheme.cssファイル（異なるテーマ）の1490行目付近を確認し、すべて同じ修正内容が反映されていることを確認しました
4. 実行環境の種別による動作仕様を確認しました：
・「運用環境」：UI基本モジュールがlink rel="stylesheet"タグのラッパータグファイルを最小化し、theme.min.cssを参照
・「統合テスト環境」：theme.cssを直接参照
5. お客様にJugglingでの静的ファイル出力時の実行環境選択について確認したところ、以下の設定であることが判明しました：
・検証環境：統合テスト環境
・本番環境：運用環境
6. theme.min.cssの更新状況を確認したところ、修正が行われていないことが判明し、これが原因であると特定しました
参考ドキュメント：
intra-mart Accel Platform セットアップガイド - 環境種別毎における各モジュールの動作仕様