プログラマとWebデザイナを悩ませるCSS Spriteを、Webアプリ内部で完全自動でやってのけたぜ！

1. Mixer2 + SpringMVCで
夢のDynamic CSS Sprite
第三回 #渋谷Java
http://atnd.org/events/42501
2013-09-28
@nabedge http://mixer2.org

2. 本日のデモ予定
1. Mixer2によるフルーツショップサンプルアプ
リ
2. ダイナミックCSS Spriteサンプルアプリ。
3. もし時間があればMixer2に
インラインJavaScriptをからめた
サンプルアプリ
※すべてのソースは
https://github.com/nabedge にて公開

3. ところで
「全ページSSL」の時代
https://twitter.com
https://github.com
https://facebook.com
https://グループ企業システム.com
https://www.google.com
Googleアドセンスがhttpsページ対応

4. 全ページSSL化とCSS Spriteの関係
1. ひとつのhtml上に20種の<img>タグ
2. 「全ページSSL」なので
画像もhttpsでレスポンス。
– さもないと変なダイアログが出ちゃうから。
3. 100人がアクセスしてきたら？
4. (1+20)*100=2100リクエスト
CSS Spriteで20個の画像が
1個にまとまっていれば
(1+1)*100 = 200
＿人人人人人人＿
＞ ひとケタ違う！＜
￣^Y^Y^Y^Y^￣

5. 処理可能な
同時セッション数
ライセンスキーの
価格
10,000 50万円
50,000 100万円
100,000 200万円
もっと必要!? 性能限界です。
上位機種の購入を
ご検討ください
とあるSSLアクセラレータ（あくまで例）

6. 甘く見ないほうがいいですよ
• 出典「SSL のパフォーマンスでお嘆きの貴兄に」
http://d.hatena.ne.jp/nappa_zzz/20111204/1322
961826
SSL アクセラレータの価格に胃を痛めて
いる貴兄、それが買えず SSL のためだ
けにサーバの台数をニョキニョキ増やし
ている貴兄、そうでなくとも SSL のパ
フォーマンスでお嘆きの貴兄のために、
（以下略）

7. 一方、Webデザインの現場では
出典：「HTTPリクエストを減らすために －
【CSS Sprite編】スプライト地獄からの解放」
http://t32k.me/mol/log/reduce-http-requests-css-sprite
(中略)考えてもみてください、画像の変更があ
るたびにPhotoshopを開いて、画像を置き直し
て、その位置をルーラーで割り出す。（中略）気
の遠くなるような面倒くさいタスクです。
（中略）もう、なんというかCSSスプライトが嫌
すぎてデザイナーと喧嘩することもしばしば。
これでは精神衛生上よくありません。

8. デモへ
ソースはこちら↓
https://github.com/nabedge/dynamic-css-sprite
https://github.com/nabedge/googlemap-mixer2-sample

9. Mixer2の特徴を一言でいうと
Mixer2は、htmlタグを
Javaオブジェクトとして
扱うので、実質なんでも
できる。 HTML5のタグや
data-*属性なども
もちろんOK！

10. CSS Spriteデモの動作原理(1)
1. Tomcat起動＆Springコンテナ起動
2. DI対象クラスをすべてインスタンス化
3. CssSpriteServiceクラスインスタンス化と同時
にテンプレートhtml（複数可）をMixer2でロード
4. <img class=“sprite” src=“...” />タグをImg型オ
ブジェクトして全部拾い出す。<img>がどこに
あってもOK

11. CSS Spriteデモの動作原理（２）
5. 画像のパス（src属性から絶対パス算出）と、
画像サイズを取得してMapに維持
6. 画像をタテに連結してBufferedImageで維持
7. ブラウザからのhttpリクエストをSpringMVCの
コントローラが受け取る
8. コントローラがViewオブジェクトを作る
9. Viewオブジェクトがhtmlテンプレートをロード。
10.<img class=“sprite” src=“...” />タグをImg型
オブジェクトして全部拾い出す。

12. CSS Spriteデモの動作原理（３）
11.画像のパスをCssSpriteServiceインスタンス
で維持しているMapと照合。
12.マッチしたらImgタグ型オブジェクトを操作
13.CssSpriteServiceが維持するmap情報から
style属性用の値を取得し、style=“...”をImgオ
ブジェクトにsetStyle()
14. src=“clear.gif”（1ドット透過gif)をImgオブジェ
クトにsetSrc()

13. CSS Spriteデモの動作原理（4）
BEFORE:
<img class="sprite" src="foo/bar.png" />
AFTER:
<img class=“sprite” src=“clear.gif"
style=“width:40px; height:60px;
background:url(/bigImage) 0 -319px;"/>
/contextPath/bigImage へのhttpリクエストには
あらかじめ作った巨大画像を直接レスポンス。

14. インラインJavaScriptデモのポイント
1. 「サーバサイドからの埋め込みデータ」と
「JavaScriptプログラム」とを、
別々の<script>タグに分けてモックアップ
htmlを作っておく。
– こうすれば、「JavaScriptがちゃんと動く状態の
htmlモックアップ」を維持できる！
2. APサーバ上で稼働させるときにMixer2で
「データ」のscriptタグだけを置換する

15. おしまい
• 詳しくは公式サイトとgithubを
見てね！
http://mixer2.org/
http://github.com/nabedge