Mixer2によるdynamic css sprite 201309第三回渋谷java
•
2 likes•1,461 views
プログラマとWebデザイナを悩ませるCSS Spriteを、Webアプリ内部で完全自動でやってのけたぜ！
Mixer2によるdynamic css sprite 201309第三回渋谷java
- 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 にて公開
- 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 のパ フォーマンスでお嘆きの貴兄のために、 （以下略）
- 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型 オブジェクトして全部拾い出す。
- 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タグだけを置換する