カンタン画像サムネイル作成「Smalllight」
Upcoming SlideShare
Loading in...5
×
 

カンタン画像サムネイル作成「Smalllight」

on

  • 10,297 views

 

Statistics

Views

Total Views
10,297
Views on SlideShare
10,029
Embed Views
268

Actions

Likes
4
Downloads
20
Comments
0

5 Embeds 268

http://blog.livedoor.jp 261
https://twitter.com 3
http://b.hatena.ne.jp 2
http://reader.freerss.net 1
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

カンタン画像サムネイル作成「Smalllight」 カンタン画像サムネイル作成「Smalllight」 Presentation Transcript

  • カンタン画像サムネイル生成 株式会社ライブドア 開発部 山下 拓也
  • 画像サムネイル サムネイルの構築 – アップロードされた画像をサムネイル化(縮小) – サムネイル化された画像を保存 よくあること – 複数パターンのサムネイル(大・中・小・縦長など) – 機能追加によるサムネイルパターンの増加 管理が面倒 動的に生成
  • Small Light Small Light(スモールライト) – to smaller → 小さく – to lighter → 軽く Small + Light = Small Light View slide
  • 導入コンテンツ coming soon View slide
  • Small Lightの概要 Apache module – mod_small_light – OutputFilter – Imlib2 – ImageMagick(wand)
  • mod_small_light URL中にリサイズ定義を含める 単純な縮小 長辺・短辺を基準としたcrop 単色の枠をつける(モバイル向け) Sharpen/Blur/UnsharpMask
  • Small Light 定義文字列 /small_light(dw= http://example.com 60,dh=60,...e=imlib2)/http://int ernal.example.com/images/12345678.jpg URL中に – small_light(定義文字列)
  • small_light( ) 変換前の画像の座標指定: sx 変換前画像x座標 sy 変換前画像y座標 sw 変換前画像横幅 sh 変換前画像縦幅 変換後の画像の座標指定: dx 変換後画像x座標 dy 変換後画像y座標 dw 変換後画像横幅 dh 変換後画像縦幅 変換オプション: da 変換後画像アスペクト比制御種別 (s=短辺基準 l=長辺基準 n=なし 初期値:l) ds 変換後画像スケーリング制御種別 (s=小さい画像も拡大 n=小さい画像はそのまま 初期値:n)
  • small_light( ) キャンバス: cw キャンバス横幅 ch キャンバス縦幅 cc キャンバス色 ボーダー: bw ボーダー横幅 bh ボーダー縦幅 bc ボーダー色 出力オプション: of 出力形式(jpeg,png) q クォリティー(0~100)
  • small_light( ) その他: info HTTPヘッダーに詳細情報を出力 p パターン名 e 画像変換ライブラリ名 (imlib2,imagemagick,gegl,dummy) sharpen シャープ unsharp アンシャープマスク blur ブラー(ぼかし)
  • 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)
  • smalled lighted 元画像 160x160 の画像から 60x60 のサムネイル 60x60 元画像 160x160 http://.../small_light(dw=60,dh=60)/...
  • smalled lighted 枠つき 枠つき small_light(dw=60,dh=60, bw=3,bh=3,bc=808080)
  • smalled lighted ブラー効果 ブラー効果 small_light(dw=60,dh=60, blur=8)
  • smalled lighted キャンバスとは? small_light(cw=160,ch=160,cc=ff00ff) キャンバスなし 160x43 キャンバスあり 160x160
  • smalled lighted sharpen=0
  • smalled lighted sharpen=1
  • 以上 なんですが・・・
  • さすがに軽くはない
  • nginx + squid nginx – ngx_http_upstream_consistent_hash – failover squid
  • サーバー構成 サービス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
  • 稼働状況 複数のコンテンツで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はまだまだ余裕
  • nginx + squid nginx + squidの詳細について – [ hideden + nginx ] というキーワードで、 Googleでググったり、 NAVERでネバったりしてみてください。
  • まとめ サムネイルを動的に生成して楽をする 楽した分をキャッシュサーバーでカバー
  • ありがとうございました