Dynamic image transformation server Okara BETA
by
Teppei Yano
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 で便利に拡張