dhtmlxGanttライブラリを使ってASP.NET MVCアプリにガントチャートを組み込んでいましたが、開発環境と本番環境で行の高さが異なってしまう問題が発生しました。
開発環境に配置すると、行の高さが27pxなのに対して、本番環境では35px。もちろん同じコードです。
この問題の対応策と発生原因をまとめておきます。
手っ取り早い対応(ガントチャート設定で高さを固定する)
ガントチャートの各行の高さを明示的に指定するには、ガントチャートのプロパティにあるrow_heightを指定します。
gantt.config.row_height = 27;
gantt.init("ガントチャートを格納するdivのid");
gantt.configオブジェクトのプロパティ設定値はinitメソッドを呼ぶ前のもののみ有効です(Configuring Gantt Chart)。なので、ガントチャート初期化処理中でrow_heightを設定することになると思います。
こうすれば問題が発生した原因はともかくとして、強制的に同じ高さを適用できます。
適用されるスキンによってrow_heightの値が決まる
実際には、問題が発生したプログラム中では、row_heightを指定していませんでした。
ブラウザの開発者ツールで原因を探ってみると、開発環境では”skyblue”のスキンが適用され、本番環境は”terrace”スキン(デフォルトのスキンです)が適用されていました。
dhtmlxGanttのJavaScriptファイル内を検索してみると、skyblueだとrow_heightは27px、terraceだと35pxでした。これは配置先でブラウザの開発者ツールを使って確認したガントチャート各行の高さと一致します。
よって、問題は、同じソースであるにもかかわらず、配置すると別のスキンが適用されることに起因するとわかりました。なお、ソース中では、skyblueを明示的に指定していました。
本番では、この指定が無効になったということですね。
ASP.NET MVCのバンドル機能でcssファイル名が変わってしまう
ASP.NET MVCはスクリプトやCSSをバンドルする(複数のファイルを仮想パスで1つにまとめる)機能があり、ソース中ではバンドル機能を使ってskyblueスキンのCSSファイルを参照していました。
バンドル機能を使うことで、本来は「dhtmlxgantt_skyblue.css」という名前で参照するはずのskyblueスキンのCSSが別名でアクセスされてしまいます。
実験してみたところ、バンドル機能を使わずに「dhtmlxgantt_skyblue.css」を直接参照することで、本番環境でも設定どおりskyblueスキンが適用されることがわかりました。恐らくcssのファイル名で適用するスキンを決定しているようです。
ちなみに、開発環境で問題が発生しなかったのは、デバッグビルドで配置していたためです。リリースビルドするとデフォルトで作成されるWeb.configの変換設定によってdebug=”true”属性が削除されます。この属性があると、ソースでバンドル指定していても、ブラウザ経由では個別ファイルに直接アクセスする(＝ファイル名が変わらない)ためです。
参照：https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification#controlling-bundling-and-minification