1. カンタン画像サムネイル生成
株式会社ライブドア
開発部
山下 拓也

2. 画像サムネイル
サムネイルの構築
– アップロードされた画像をサムネイル化（縮小）
– サムネイル化された画像を保存
よくあること
– 複数パターンのサムネイル（大・中・小・縦長など）
– 機能追加によるサムネイルパターンの増加
管理が面倒
動的に生成

3. Small Light
Small Light(スモールライト)
– 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. smalled lighted
sharpen=0

17. smalled lighted
sharpen=1

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. ありがとうございました