Share
Embed
Slide 1
Slide 1 text
おから（仮）
ngx_small_light と ngx_mruby
で作る動的画像変換サーバ
2015-04-19
第1回ペパボテックカンファレンス
@yano3
Slide 2
Slide 2 text
自己紹介
矢野 哲平 （@yano3 / やのさん）
● EC事業部（少し前までカラメル）
● バックエンド寄り中心にいろいろ
○ Solr（全文検索エンジン）
○ 動的画像変換
Slide 3
Slide 3 text
目次
● 動的画像変換とは
● 動的画像変換導入のメリット
● 動的画像変換サーバおから（仮）
Slide 4
Slide 4 text
動的画像変換とは
Slide 5
Slide 5 text
従来の（よくある）画像変換
アップロード時に S, M, L のように数パターンのリ
サイズ済み画像を作成（静的）
Slide 6
Slide 6 text
例
35689801_large.jpg
35689801_thumb.jpg
35689801_small.jpg
Slide 7
Slide 7 text
動的画像変換
● アップロード時は変換しないでそのまま
○ もしくは十分な解像度を保った1サイズだけ変換
● リクエストのタイミングで必要なサイズの画像を
作成
● 同サイズに再度リクエストが来る場合に備えて
キャッシュ
Slide 8
Slide 8 text
例
ブラウザ
動的画像変換サーバ
300x300px 150x150px 50x50px
オリジナル画像
Slide 9
Slide 9 text
動的画像変換のメリット
Slide 10
Slide 10 text
メリット
● デザインの自由度
○ いつでも画像サイズの変更を伴うデザインの変更ができ
る
○ 大量の画像（例えばカラメル1800万商品）の再変換は
すごく大変！！
● Retina ディスプレイ等の新しいデバイスへの対
応が容易
Slide 11
Slide 11 text
メリット
● 適正な転送量
○ 転送コストの削減
■ 負荷（大事）
■ お金（すごく大事）
○ ユーザビリティ向上（読み込み速い！）
Slide 12
Slide 12 text
動的画像変換サーバ
おから（仮）
Slide 13
Slide 13 text
おから（仮）
動的画像変換サーバ（プロキシ）
● 幅、高さを指定してリサイズ
● 画像形式の変換（jpeg, png, webp）
● 品質の指定（不可逆圧縮な形式の場合）
● 他...
Slide 14
Slide 14 text
おから（仮）
URL 例
http://d3ndjch8hfnps9.cloudfront.
net/calamel/product/300x300cq80/92d05e13ff804d006ee4e
8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.
jp/PA01149/951/product/35689801.jpg
Slide 15
Slide 15 text
おから（仮）
変換コマンド（サイズ等）
http://d3ndjch8hfnps9.cloudfront.
net/calamel/product/300x300cq80/92d05e13ff804d006ee4
e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.
jp/PA01149/951/product/35689801.jpg
Slide 16
Slide 16 text
おから（仮）
秘密のハッシュ値（後述）
http://d3ndjch8hfnps9.cloudfront.
net/calamel/product/300x300cq80/92d05e13ff804d006ee4
e8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.
jp/PA01149/951/product/35689801.jpg
Slide 17
Slide 17 text
おから（仮）
画像形式
http://d3ndjch8hfnps9.cloudfront.
net/calamel/product/300x300cq80/92d05e13ff804d006ee4e
8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.
jp/PA01149/951/product/35689801.jpg
Slide 18
Slide 18 text
おから（仮）
オリジナル画像の URL
http://d3ndjch8hfnps9.cloudfront.
net/calamel/product/300x300cq80/92d05e13ff804d006ee4e
8a2960d0dc85ea0cf5d.jpg/img17.shop-pro.
jp/PA01149/951/product/35689801.jpg
Slide 19
Slide 19 text
おから（仮）
使っている技術
● Nginx
● ngx_small_light
● ngx_mruby
● CDN
Slide 20
Slide 20 text
ngx_small_light
Slide 21
Slide 21 text
ngx_small_light
ngx_small_light is a dynamic image transformation module
for nginx.
https://github.com/cubicdaiya/ngx_small_light より引用
URL 例
● http://localhost/small_light(dw=300,dh=300)/img/image.jpg
Slide 22
Slide 22 text
ngx_small_light
Nginx に ngx_small_light を組み込んでビルドす
るだけで動的画像変換サーバを作れるが...
Slide 23
Slide 23 text
ngx_small_light
サービスの一部として提供するにあたっての問題
点
● URL の仕様変えたい
● URL をいじって誰でも自由に変換できてしまう
のはマズい
Slide 24
Slide 24 text
ngx_mruby
Slide 25
Slide 25 text
ngx_mruby
ngx_mruby is A Fast and Memory-Efficient Web Server
Extension Mechanism Using Scripting Language mruby for
nginx.
https://github.com/matsumoto-r/ngx_mruby より引用
Slide 26
Slide 26 text
ngx_mruby
● Nginx を mruby スクリプトで制御
● mruby は軽量な Ruby 実装
● CRuby すべての機能は持たないが mrbgem
で拡張可能
Slide 27
Slide 27 text
ngx_mruby
問題点のおさらい
● URL の仕様変えたい
● URL をいじって誰でも自由に変換できてしまう
のはマズい
Slide 28
Slide 28 text
ngx_mruby
URL 変換（おから → ngx_small_light）
● Nginx の設定ファイルで実現するのは辛い
● mruby なら正規表現等使ってラクラク
Slide 29
Slide 29 text
ngx_mruby
コード例（簡略化し
ています）
Slide 30
Slide 30 text
ngx_mruby
● 正規表現
● mattn/mruby-onig-regexp
Slide 31
Slide 31 text
ngx_mruby
URL の有効性の確認
● http_secure_link_module 等もあるがハッシュ
関数が md5 固定だったり制限あり
● mruby ならハッシュ関数もいろいろ使える
Slide 32
Slide 32 text
ngx_mruby
コード例（簡略化し
ています）
Slide 33
Slide 33 text
ngx_mruby
● sha1 ダイジェストの計算
● iij/mruby-digest
Slide 34
Slide 34 text
まとめ
Slide 35
Slide 35 text
まとめ
● 動的画像変換でサービス提供者もユー
ザーも幸せ
● ngx_small_light 簡単動的画像変換
● ngx_mruby で便利に拡張