渋谷で働くエンジニアの開発メモ

環境
・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になっていることを確認

ページのロードが遅いので画像リクエストを減らすことに。
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くらいに抑えたので問題なかったのだが、バグだろうか。。