tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceページのStyleタグ外出しについて

Visualforceページ開発でCSSを指定するときにページ内に記載すると、CSSの処理が多い場合にコードが読みづらくなってしまいます。それを防ぐためにCSSの処理を外出しすることがあると思うのですが、そのことについてちょっと考えてみました。


通常外出しを行う場合は静的リソースにアップして 'apex:stylesheet'タグで読み込んだりすると思います。静的リソースにCSSをアップする場合はCSSフォルダにまとめてZip形式でアップすると思います。その方法の場合、Force.com IDEでは編集ができなくなるため毎回修正してアップするという作業が必要になってしまいとても手間が掛かります。


かといってCSSファイルを一つずつ静的リソースにアップすると静的リソースが散らかってしまい管理が大変になってしまうと思います。


そこでCSS情報は別ページに書き出して 'apex:include'タグを使って読み込ませる方法はどうかなと思いました。この方法ならForce.com IDEで簡単に編集も可能です。例えばAccountSearchPage.pageのCSSを用意する場合はAccountSearchCss.pageというような名称で用意すると編集時に探すのも容易になると思います。ページは増えてしまいますが、CSSを外出しすることでコードが読みやすくなり保守対応も、やりやすくなるんじゃないかと思いました。


サンプルソースはこちらです。

f:id:tyoshikawa1106:20130623021732p:plain