Download as PDF, PPTX
![httpd.conf
RewriteRule ^/small_light[^/]+/(http://.+)$ $1 [P,L]
<LocationMatch ^/small_light[^/]+/>
SetOutputFilter SMALL_LIGHT
</LocationMatch>
</LocationMatch>
RewriteRule ^/resize/(L|M|S)/(.+¥.jpg)$ http://localhost/small_light(p=$1)/http://image.exa
^/resize/(L|M|S)/(.+¥ jpg)$ http://localhost/small_light(p=$1)/http://image.exa
mple.com/$2 [P,L]
mple.com/$2
SmallLightPatternDefine L sx=5p,sy=5p,sw=90p,sh=90p,dw=200,dh=200,da=l,d
sx=5p,sy=5p,sw=90p,sh=90p,dw=200,dh=200,da=l,d
s=s,cw=200,ch=200,cc=ffffff,q=80,of=jpg
=s,cw=200,ch=200,cc=ffffff,q=80,of=jpg
SmallLightPatternDefine M sx=5p,sy=5p,sw=90p,sh=90p,dw=100,dh=100,da=l,
sx=5p,sy=5p,sw=90p,sh=90p,dw=100,dh=100,da=l,
ds=s,cw=100,ch=100,cc=ffffff,q=70,of=jpg
ds=s,cw=100,ch=100,cc=ffffff,q=70,of=jpg
SmallLightPatternDefine S sx=5p,sy=5p,sw=90p,sh=90p,dw=50,dh=50,da=l,ds
sx=5p,sy=5p,sw=90p,sh=90p,dw=50,dh=50,da=l,ds
=s,cw=50,ch=50,cc=ffffff,q=60,of=jpg
=s,cw=50,ch=50,cc=ffffff,q=60,of=jpg
# /resize/L/ → small_light(p=L)
small_light(p=L)
# /resize/M/ → small_light(p=M)
small_light(p=M)
# /resize/S/ → small_light(p=S)
small_light(p=S)](https://image.slidesharecdn.com/smalllight2-100729214727-phpapp01/85/Smalllight-11-320.jpg)
![nginx + squid
nginx + squidの詳細について
– [ hideden + nginx ] というキーワードで、
Googleでググったり、
NAVERでネバったりしてみてください。](https://image.slidesharecdn.com/smalllight2-100729214727-phpapp01/85/Smalllight-23-320.jpg)
カンタン画像サムネイル作成「Smalllight」
- 1. カンタン画像サムネイル生成 株式会社ライブドア 開発部 山下 拓也
- 2. 画像サムネイル サムネイルの構築 – アップロードされた画像をサムネイル化（縮小） – サムネイル化された画像を保存 よくあること –複数パターンのサムネイル（大・中・小・縦長など） – 機能追加によるサムネイルパターンの増加 管理が面倒 動的に生成
- 3. Small Light SmallLight(スモールライト) – to smaller → 小さく – to lighter → 軽く Small + Light = Small Light
- 4. 導入コンテンツ coming soon
- 5. Small Lightの概要 Apache module – mod_small_light – OutputFilter – Imlib2 – ImageMagick(wand)
- 6. mod_small_light URL中にリサイズ定義を含める 単純な縮小 長辺・短辺を基準としたcrop 単色の枠をつける（モバイル向け） Sharpen/Blur/UnsharpMask
- 7. Small Light 定義文字列 /small_light(dw= http://example.com 60,dh=60,...e=imlib2)/http://int ernal.example.com/images/12345678.jpg URL中に – small_light(定義文字列)
- 8. small_light( ) 変換前の画像の座標指定： sx 変換前画像x座標 sy 変換前画像y座標 sw 変換前画像横幅 sh 変換前画像縦幅 変換後の画像の座標指定： dx 変換後画像x座標 dy 変換後画像y座標 dw 変換後画像横幅 dh 変換後画像縦幅 変換オプション： da 変換後画像アスペクト比制御種別 (s=短辺基準 l=長辺基準 n=なし 初期値:l) ds 変換後画像スケーリング制御種別 (s=小さい画像も拡大 n=小さい画像はそのまま 初期値:n)
- 9. small_light( ) キャンバス： cw キャンバス横幅 ch キャンバス縦幅 cc キャンバス色 ボーダー： bw ボーダー横幅 bh ボーダー縦幅 bc ボーダー色 出力オプション： of 出力形式(jpeg,png) q クォリティー(0～100)
- 10. small_light( ) その他： info HTTPヘッダーに詳細情報を出力 p パターン名 e 画像変換ライブラリ名 (imlib2,imagemagick,gegl,dummy) sharpen シャープ unsharp アンシャープマスク blur ブラー（ぼかし）
- 11. httpd.conf RewriteRule ^/small_light[^/]+/(http://.+)$ $1[P,L] <LocationMatch ^/small_light[^/]+/> SetOutputFilter SMALL_LIGHT </LocationMatch> </LocationMatch> RewriteRule ^/resize/(L|M|S)/(.+¥.jpg)$ http://localhost/small_light(p=$1)/http://image.exa ^/resize/(L|M|S)/(.+¥ jpg)$ http://localhost/small_light(p=$1)/http://image.exa mple.com/$2 [P,L] mple.com/$2 SmallLightPatternDefine L sx=5p,sy=5p,sw=90p,sh=90p,dw=200,dh=200,da=l,d sx=5p,sy=5p,sw=90p,sh=90p,dw=200,dh=200,da=l,d s=s,cw=200,ch=200,cc=ffffff,q=80,of=jpg =s,cw=200,ch=200,cc=ffffff,q=80,of=jpg SmallLightPatternDefine M sx=5p,sy=5p,sw=90p,sh=90p,dw=100,dh=100,da=l, sx=5p,sy=5p,sw=90p,sh=90p,dw=100,dh=100,da=l, ds=s,cw=100,ch=100,cc=ffffff,q=70,of=jpg ds=s,cw=100,ch=100,cc=ffffff,q=70,of=jpg SmallLightPatternDefine S sx=5p,sy=5p,sw=90p,sh=90p,dw=50,dh=50,da=l,ds sx=5p,sy=5p,sw=90p,sh=90p,dw=50,dh=50,da=l,ds =s,cw=50,ch=50,cc=ffffff,q=60,of=jpg =s,cw=50,ch=50,cc=ffffff,q=60,of=jpg # /resize/L/ → small_light(p=L) small_light(p=L) # /resize/M/ → small_light(p=M) small_light(p=M) # /resize/S/ → small_light(p=S) small_light(p=S)
- 12. smalled lighted 元画像 160x160の画像から 60x60 のサムネイル 60x60 元画像 160x160 http://.../small_light(dw=60,dh=60)/...
- 13. smalled lighted 枠つき 枠つき small_light(dw=60,dh=60, bw=3,bh=3,bc=808080)
- 14. smalled lighted ブラー効果 ブラー効果 small_light(dw=60,dh=60, blur=8)
- 15. smalled lighted キャンバスとは？ small_light（cw=160,ch=160,cc=ff00ff） キャンバスなし 160x43 キャンバスあり 160x160
- 16.
- 17.
- 18.
- 19.
- 20. nginx + squid nginx – ngx_http_upstream_consistent_hash – failover squid
- 21. サーバー構成 サービスA サービスA サービスB サービスB サービスC サービスC load balancer load balancer nginx nginx nginx nginx nginx nginx nginx nginx squid squid squid squid squid squid squid squid apache apache apache apache apache apache apache apache (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) STF / image storage STF / image storage
- 22. 稼働状況 複数のコンテンツで4台を共有 1台約450万reqs/day (4台約1,800万reqs/day) squid キャッシュヒット率約70% cache hits = 300万, cache misses = 150万 150万reqs/day = small light load averageはまだまだ余裕
- 23. nginx + squid nginx + squidの詳細について – [ hideden + nginx ] というキーワードで、 Googleでググったり、 NAVERでネバったりしてみてください。
- 24.
- 25.