1. ngx_small_lightで
動的サムネイル生成
Tatsuhiko Kubo
cubicdaiya@gmail.com
at YAPC::Asia 2012

2. 自己紹介
• 久保 達彦 (bokko)
• @cubicdaiya
• インフラ兼ソフトウェアエンジニア@pixiv

3. ngx_small_light
• 画像サムネイル生成サーバ with Nginx
• サムネイルの生成パターンをURLで指定
• mod_small_lightのNginx移植版

4. URLのパスを変えるだけで
いろんなサムネイルを生成♪
/tank.jpg /small_light(p=medium)/tank.jpg /small_light(p=small)/tank.jpg
オリジナル Mサイズ Sサイズ

5. 設定ファイル
server {
listen 80;
server_name localhost;
# small_lightを有効にする
small_light on;
# 変換パターンを定義
small_light_pattern_define medium dw=500,dh=500;
small_light_pattern_define small dw=120,dh=120;
location ~ small_light[^/]*/(.+)$ {
set $file $1;
rewrite ^ /$file;
}
}

6. ngx_small_lightのディレクティブ

7. small_light
• ngx_small_lightのon/off(デフォルトはoff)
small_light on;

8. small_light_pattern_define
• サムネイル生成パターンに名前を付ける
small_light_pattern_define medium dw=500,dh=500;
以下の二つのURLは同じレスポンスを返す
http://localhost/small_light(dw=500,dh=500)/tank.jpg
http;//localhost/small_light(p=medium)/tank.jpg
dw, dh：生成するサムネイルの幅と高さ

9. small_light_material_dir
• 合成用素材ディレクトリ
small_light_material_dir /var/materials;
• embedicon, ix, iyと組み合わせて使う
http://localhost/small_light(embedicon=icon.jpg,ix=0,iy=0)/tank.jpg
•
tank.jpgの座標(0, 0)に/var/materials/icon.jpgを埋め込む

10. 最後に
• ngx_small_lightはgithubで公開中
https://github.com/cubicdaiya/ngx_small_light
•

11. おまけ

12. 僕がngx_small_light
をつくったわけ

13. 去年、某社の技術資料を見た僕の当時の上司が、
サムネイルの動的生成か。
よし、うちもやろう！

14. 半年後

15. そういや、そんなことあったなぁ
一から書くの面倒だし、
mod_small_lightってのを使ってみよう

16. 二日後

17. 原型留めてないくらい改造した
mod_small_lightを見せに行く
bokko++
うちでも使える
ように改造したよ∼♪

18. 原型留めてないくらい改造した
mod_small_lightを見て・・・
・・・
♪ ♪♪

19. Nginxでやらない？

20. Nginxでやらない？

21. Nginxでやらない？

22. mod_small_lightに
約350行の巨大パッチあてた次の日に

23. mod_small_lightに
約350行の巨大パッチあてた次の日に
Nginxでやらない？

24. mod_small_lightに
約350行の巨大パッチあてた次の日に
Nginxでやらない？
大事なことなので三回言いました

25. mod_small_lightにあてた
約350行の巨大パッチ

26. mod_small_lightにあてた
約350行の巨大パッチ
パッチってレベルじゃねぇ！！！

27. そもそもの前提として
• 当時既にpixiv内のHTTPサーバは大体
ApacheからNginxに置き換わってた

28. 結局、
そうするか
Apacheで
いきましょう
@cubicdaiya @kamipo

29. 半年後

30. ngx_small_lightリリース

31. 当時の弊社のNginxマスターからの反応

32. ngx_small_lightは
こうして生まれました！

33. 一部誇張されていますが
概ね事実です！！！

34. ご静聴ありがとございました