2010年4月25日日曜日

TomcatとApacheの連携

環境
・Tomcat 6.0.10
・Apache 2.2.4



▼Apache httpd.confの設定
 ・モジュールmod_proxy_ajpと、mod_proxyも設定を有効にする。
  以下のコメントアウトを解除。

   LoadModule proxy_module modules/mod_proxy.so
   LoadModule proxy_ajp_module modules/mod_proxy_ajp.so

 ・Locationの設定

  <Location /docs/>
    ProxyPass ajp://localhost:8009/docs/
  </Location>
 ※docsはTomcatのコンテキストルート


 ※8009は、Tomcat側の連携コネクタポート番号

▼Tomcat server.xmlの設定
 ・連携コネクタの設定を有効にする。
  以下のコメントアウトを解除。


 

   <!-- Define an AJP 1.3 Connector on port 8009 -->
   <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />
 ※ ポート番号が8009になっていることを確認



CSS spriteに挑戦

ページのロードが遅いので画像リクエストを減らすことに。
CSSspriteってやつをやってみることにした。


使ったツールは「Tonttu」
http://collamo.jp/Tonttu/
AIR アプリなのでAdobe AIRをインストール。
http://www.adobe.com/jp/products/air/


最初にまとめる対象の画像を決める。
まず、repeat している背景画像には使えないので対象外に。
しかしrepeat している背景画像の多いこと多いこと。。
とりあえずグラデーションとかで置き換えられそうなとこは
画像を使わずCSSで対応。


次に、コンテンツとしての画像は対象外に。
alt属性が必要な画像は対象外としてユーザビリティの確保。


動的にサイズが変わる画像も対象外に。


まとめる対象の画像が決まったところで
「Tonttu」に放り込んで1枚の画像を生成。
CSSも一緒に生成されるので、それを元に
自分のCSSに適応させる。


微調整しつつなんとなく完成!


細かいとこまで確認していると、メニューの階層を表すアイコン画像が変なことに。
サイズが子要素に依存する要素の左端置いている画像なので、
子要素が2行になると一枚画像の1個下の画像が見えてる(汗
背景色も合ってない。。


ってことでまとめる画像間を広げてたり背景色を調整して
なんとか完成!!
以外に苦戦しました。


しかしメンテナンス性がかなり悪くなったな。
画像の変更やサイズ変更、CSS変更に手間がかかるようになってしまった。。


ちょっと気になったのは、「Tonttu」で1枚画像にする際、
縦に並べてたんだが、4000pxくらいを超えるとそれ以降の画像背景色が
何故か灰色になってしまう現象に遭遇。
まぁまとめる画像絞ったり、画像間の幅を短くしたり調整して
3000pxくらいに抑えたので問題なかったのだが、バグだろうか。。