Mixer2によるdynamic css sprite 201309第三回渋谷java

871 views
789 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
871
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mixer2によるdynamic css sprite 201309第三回渋谷java

  1. 1. Mixer2 + SpringMVCで 夢のDynamic CSS Sprite 第三回 #渋谷Java http://atnd.org/events/42501 2013-09-28 @nabedge http://mixer2.org
  2. 2. 本日のデモ予定 1. Mixer2によるフルーツショップサンプルアプ リ 2. ダイナミックCSS Spriteサンプルアプリ。 3. もし時間があればMixer2に インラインJavaScriptをからめた サンプルアプリ ※すべてのソースは https://github.com/nabedge にて公開
  3. 3. ところで 「全ページSSL」の時代 https://twitter.com https://github.com https://facebook.com https://グループ企業システム.com https://www.google.com Googleアドセンスがhttpsページ対応
  4. 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. 5. 処理可能な 同時セッション数 ライセンスキーの 価格 10,000 50万円 50,000 100万円 100,000 200万円 もっと必要!? 性能限界です。 上位機種の購入を ご検討ください とあるSSLアクセラレータ(あくまで例)
  6. 6. 甘く見ないほうがいいですよ • 出典「SSL のパフォーマンスでお嘆きの貴兄に」 http://d.hatena.ne.jp/nappa_zzz/20111204/1322 961826 SSL アクセラレータの価格に胃を痛めて いる貴兄、それが買えず SSL のためだ けにサーバの台数をニョキニョキ増やし ている貴兄、そうでなくとも SSL のパ フォーマンスでお嘆きの貴兄のために、 (以下略)
  7. 7. 一方、Webデザインの現場では 出典:「HTTPリクエストを減らすために - 【CSS Sprite編】スプライト地獄からの解放」 http://t32k.me/mol/log/reduce-http-requests-css-sprite (中略)考えてもみてください、画像の変更があ るたびにPhotoshopを開いて、画像を置き直し て、その位置をルーラーで割り出す。(中略)気 の遠くなるような面倒くさいタスクです。 (中略)もう、なんというかCSSスプライトが嫌 すぎてデザイナーと喧嘩することもしばしば。 これでは精神衛生上よくありません。
  8. 8. デモへ ソースはこちら↓ https://github.com/nabedge/dynamic-css-sprite https://github.com/nabedge/googlemap-mixer2-sample
  9. 9. Mixer2の特徴を一言でいうと Mixer2は、htmlタグを Javaオブジェクトとして 扱うので、実質なんでも できる。 HTML5のタグや data-*属性なども もちろんOK!
  10. 10. CSS Spriteデモの動作原理(1) 1. Tomcat起動&Springコンテナ起動 2. DI対象クラスをすべてインスタンス化 3. CssSpriteServiceクラスインスタンス化と同時 にテンプレートhtml(複数可)をMixer2でロード 4. <img class=“sprite” src=“...” />タグをImg型オ ブジェクトして全部拾い出す。<img>がどこに あってもOK
  11. 11. CSS Spriteデモの動作原理(2) 5. 画像のパス(src属性から絶対パス算出)と、 画像サイズを取得してMapに維持 6. 画像をタテに連結してBufferedImageで維持 7. ブラウザからのhttpリクエストをSpringMVCの コントローラが受け取る 8. コントローラがViewオブジェクトを作る 9. Viewオブジェクトがhtmlテンプレートをロード。 10.<img class=“sprite” src=“...” />タグをImg型 オブジェクトして全部拾い出す。
  12. 12. CSS Spriteデモの動作原理(3) 11.画像のパスをCssSpriteServiceインスタンス で維持しているMapと照合。 12.マッチしたらImgタグ型オブジェクトを操作 13.CssSpriteServiceが維持するmap情報から style属性用の値を取得し、style=“...”をImgオ ブジェクトにsetStyle() 14. src=“clear.gif”(1ドット透過gif)をImgオブジェ クトにsetSrc()
  13. 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. 14. インラインJavaScriptデモのポイント 1. 「サーバサイドからの埋め込みデータ」と 「JavaScriptプログラム」とを、 別々の<script>タグに分けてモックアップ htmlを作っておく。 – こうすれば、「JavaScriptがちゃんと動く状態の htmlモックアップ」を維持できる! 2. APサーバ上で稼働させるときにMixer2で 「データ」のscriptタグだけを置換する
  15. 15. おしまい • 詳しくは公式サイトとgithubを 見てね! http://mixer2.org/ http://github.com/nabedge

×