Webサービスにおける画像変換の実践 / ImageFlux meetup - hands-on

Webサービスにおける画像変換の実践
ピクシブ株式会社
道井俊介
ImageFlux meetup #2 — 2018-09-25

Transcript

1. MICHII Shunsuke, pixiv Inc. ImageFlux meetup #2 — 2018-09-25 8FC؟٦ؽأחֶֽ׷歗⫷㢌䳔ך㹋騧
2. 8FC؟٦ؽأחֶֽ׷歗⫷
   *NBHF'MVYך㼪Ⰵ
   ⵃ欽דֹ׷歗⫷㢌䳔ػًٓ٦ة
   ،فٔ؛٦ءّٝפך穈׫鴥׫
3. 8FC؟٦ؽأחֶֽ׷歗⫷ ECαʔϏεʹ͓͚Δ঎඼ը૾ ιʔγϟϧαʔϏεʹ͓͚ΔϓϩϑΟʔϧը૾ ϝσΟΞʹ͓͚Δ഑৴޿ࠂը૾ ΠϥετɺϚϯΨɺχϡʔείϯςϯπ
4. رؠ؎ٝחさ׻ׇג醱侧珏겲ך歗⫷ָ䗳銲
5. 䖞勻ך歗⫷ꂁ⥋ • ඞཁͳը૾Λࣄલʹੜ੒ͯ͠ετϨʔδʹอଘ • ImageMagickɺGDͱ͍ͬͨը૾ॲཧϥΠϒϥϦͷӡ༻͕ඞཁ • σβΠϯมߋ࣌ʹ͸ඞཁͳը૾શͯΛ࠶ੜ੒ ! αʔόʔαΠυΞϓϦέʔγϣϯ ౤ߘऀ ImageMagick, GD…
6. • ࠷దͳUXΛఏڙ͍ͨ͠ • σβΠφʔɺσΟϨΫλʔͰ΋ͦͷॠؒʹඞཁͳը૾͕ཉ͍͠ • ը૾ม׵Ͱ͸ͳ͘ɺαʔϏεͷ࣮૷ʹूத͍ͨ͠
8. *NBHF'MVYך㼪Ⰵ
9. *NBHF'MVYך㼪Ⰵ • ؅ཧը໘͔ΒΦϦδϯαʔόΛઃఆ • ը૾ͷURLΛมߋ • ը૾ͷετϨʔδҠߦ࡞ۀ͸ඞཁͳ͠
10. *NBHF'MVYך㼪Ⰵ 傀㶷أزٖ٦آ׾ⵃ欽 63-׾㢌刿 ؔٔآٝ؟٦غ׾鏣㹀
11. زٓ؎،ٕ歍׃鴥׫ַ׵鸐䌢㌀噟傈⟃ⰻח،ؕؐٝز׾涪遤׃תׅ
14. 5ZQF
    ˖ )551)5514
    ˖ 4
    )PTU
    ؔٔآٝ؟٦غךمأزせ׾䭷㹀
    1BUI1SFY
    ػأךفٖؿ؍حؙأ׾䭷㹀
    ⢽
    JNBHFT
15. ⵃ欽דֹ׷歗⫷㢌䳔ػًٓ٦ة
16. 䭁㣐簭㼭 ؿؓ٦وحزך㢌䳔
17. https://demo.imageflux.jp/c/w=600/bridge.jpg https://demo.imageflux.jp/c/w=600,h=600/bridge.jpg 䌴QYך歗⫷׾《䖤 䌴ծ넝ׁQYך歗⫷׾《䖤
18. a=0 a=1 a=2 a=3 簚埆嫰׾笝䭯 ٔ؟؎ؤ ؙٗحؾؚٝ ػر؍ؚٝ
19. a=2,g=1 㛇彊挿׾䭷㹀
20. w=600,h=600,a=3,b=ffffff/bridge.jpg w=600,h=600,a=3,b=ffffff,g=2/bridge.jpg ػر؍ؚٝך胜兝葿׾䭷㹀 㛇彊挿׾䭷㹀
21. https://demo.imageflux.jp/c/w=600,f=webp:auto/bridge.jpg https://demo.imageflux.jp/c/f=webp,q=50/bridge.jpg https://demo.imageflux.jp/c/w=600,f=webp:jpeg/bridge.jpg ,# +1&( ,# 8FC1 8FC1㼎䘔ـٓؐؠחכ8FC1׾䘔瘶
    㼎䘔׃גְזְـٓؐؠח㼎׃גכؿؓ٦ٕغحؙ ,# ؙؓٔذ؍ػًٓ٦ة׾䭷㹀 8FC1
    R
22. 歗⫷ךؔ٦غ٦ٖ؎さ䧭 歗⫷ךⴖ׶䫙ֹ ׉ך➭ך堣腉
23. ،فٔ؛٦ءّٝפך穈׫鴥׫
24. ،فٔ؛٦ءّٝד63-䭷㹀  盖椚歗꬗דػًٓ٦ة䭷㹀 
25. ،فٔ؛٦ءّٝדך63-穈׫甧ג //{{ imageflux_hostname }}/c/w=600,h=600,a=2/{{ image_path }} ذٝفٖ٦زפך湫䱸㙵׭鴥׫ 3VCZ(FNT
    JNBHF@VY
 IUUQTHJUIVCDPNTQBDFQJSBUFTMMDJNBHF@VY require 'image_flux' origin = ImageFlux::Origin.new(domain: 'example.imageflux.jp') origin.image_url("/original.jpg", width: 100) # => https://example.imageflux.jp/c/w=100/original.jpg
26. 盖椚歗꬗דך鏣㹀
27. 盖椚歗꬗דך鏣㹀 1SFY
    ػأךفٖؿ؍حؙأ׾䭷㹀
    ⢽
    TNBMM
    1BUI
    《䖤⯓ךػأفٖؿ؍حؙأ׾䭷㹀
    1BSBNFUFS
    歗⫷㢌䳔ךػًٓ٦ة׾䭷㹀
28. https://demo.imageflux.jp/w=100/bridge.jpg 䌴QYך歗⫷׾《䖤 https://demo.imageflux.jp/small/bridge.jpg 㹀纏幥׫ךػًٓ٦ةדך㢌䳔 ֮׵ַׄ׭㹀纏׃׋ػًٓ٦ةדך歗⫷㢌䳔
29. 8FC؟٦ؽأחֶֽ׷歗⫷
    *NBHF'MVYך㼪Ⰵ
    ⵃ欽דֹ׷歗⫷㢌䳔ػًٓ٦ة
    ،فٔ؛٦ءّٝפך穈׫鴥׫
30. תה׭ • ImageFluxΛར༻͢Δ͜ͱͰɺը૾ม׵ʹ։ൃίετΛ ׂ͘͜ͱͳ͘ɺϏδωεʹ஫ྗ͢Δ͜ͱ͕Ͱ͖·͢ • ·ͣ͸Ұ౓ແྉτϥΠΞϧΛ͓ࢼ͍ͩ͘͠͞ɻ
 αʔϏεϖʔδ͔Β͓ਃ͠ࠐΈՄೳͰ͢