Mixer2 + SpringMVCで

夢のDynamic CSS Sprite

第三回 #渋谷Java

http://atnd.org/events/42501

2013-09-28

@nabedge http://mixer2.org

本日のデモ予定

1. Mixer2によるフルーツショップサンプルアプリ

2. ダイナミックCSS Spriteサンプルアプリ。

3. もし時間があればMixer2に

インラインJavaScriptをからめた

サンプルアプリ

※すべてのソースはhttps://github.com/nabedge にて公開

ところで

「全ページSSL」の時代

https://twitter.com https://github.com

https://facebook.com

https://グループ企業システム.com

https://www.google.com

Googleアドセンスがhttpsページ対応

全ページ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^￣

処理可能な

同時セッション数

ライセンスキーの

価格

10,000 50万円

50,000 100万円

100,000 200万円

もっと必要!? 性能限界です。

上位機種の購入を

ご検討ください

とあるSSLアクセラレータ（あくまで例）

甘く見ないほうがいいですよ

• 出典「SSL のパフォーマンスでお嘆きの貴兄に」 http://d.hatena.ne.jp/nappa_zzz/20111204/1322

961826

SSL アクセラレータの価格に胃を痛めている貴兄、それが買えず SSL のためだけにサーバの台数をニョキニョキ増やしている貴兄、そうでなくとも SSL のパフォーマンスでお嘆きの貴兄のために、（以下略）

一方、Webデザインの現場では

出典：「HTTPリクエストを減らすために －

【CSS Sprite編】スプライト地獄からの解放」 http://t32k.me/mol/log/reduce-http-requests-css-sprite

(中略)考えてもみてください、画像の変更があるたびにPhotoshopを開いて、画像を置き直して、その位置をルーラーで割り出す。（中略）気の遠くなるような面倒くさいタスクです。

（中略）もう、なんというかCSSスプライトが嫌すぎてデザイナーと喧嘩することもしばしば。これでは精神衛生上よくありません。

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

https://github.com/nabedge/googlemap-mixer2-sample

Mixer2の特徴を一言でいうと

Mixer2は、htmlタグをJavaオブジェクトとして

扱うので、実質なんでもできる。

HTML5のタグやdata-*属性なども

もちろんOK！

CSS Spriteデモの動作原理(1)

1. Tomcat起動＆Springコンテナ起動

2. DI対象クラスをすべてインスタンス化

3. CssSpriteServiceクラスインスタンス化と同時にテンプレートhtml（複数可）をMixer2でロード

4. <img class=“sprite” src=“...” />タグをImg型オブジェクトして全部拾い出す。<img>がどこにあってもOK

CSS Spriteデモの動作原理（２）

5. 画像のパス（src属性から絶対パス算出）と、

画像サイズを取得してMapに維持

6. 画像をタテに連結してBufferedImageで維持

7. ブラウザからのhttpリクエストをSpringMVCのコントローラが受け取る

8. コントローラがViewオブジェクトを作る

9. Viewオブジェクトがhtmlテンプレートをロード。

10.<img class=“sprite” src=“...” />タグをImg型オブジェクトして全部拾い出す。

CSS Spriteデモの動作原理（３）

11.画像のパスをCssSpriteServiceインスタンスで維持しているMapと照合。

12.マッチしたらImgタグ型オブジェクトを操作

13.CssSpriteServiceが維持するmap情報からstyle属性用の値を取得し、style=“...”をImgオブジェクトにsetStyle()

14. src=“clear.gif”（1ドット透過gif)をImgオブジェクトにsetSrc()

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リクエストにはあらかじめ作った巨大画像を直接レスポンス。

インラインJavaScriptデモのポイント

1. 「サーバサイドからの埋め込みデータ」と

「JavaScriptプログラム」とを、

別々の<script>タグに分けてモックアップhtmlを作っておく。

– こうすれば、「JavaScriptがちゃんと動く状態のhtmlモックアップ」を維持できる！

2. APサーバ上で稼働させるときにMixer2で「データ」のscriptタグだけを置換する

おしまい

•詳しくは公式サイトとgithubを

見てね！

http://mixer2.org/

http://github.com/nabedge