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

by ImageFlux

Slide 1

Slide 1 text

MICHII Shunsuke, pixiv Inc. ImageFlux meetup #2 — 2018-09-25 8FC؟٦ؽأחֶֽ׷歗⫷㢌䳔ך㹋騧

Slide 2

Slide 2 text

8FC؟٦ؽأחֶֽ׷歗⫷ *NBHF'MVYך㼪Ⰵ ⵃ欽דֹ׷歗⫷㢌䳔ػًٓ٦ة ،فٔ؛٦ءّٝפך穈׫鴥׫

Slide 3

Slide 3 text

8FC؟٦ؽأחֶֽ׷歗⫷ ECαʔϏεʹ͓͚Δ঎඼ը૾ ιʔγϟϧαʔϏεʹ͓͚ΔϓϩϑΟʔϧը૾ ϝσΟΞʹ͓͚Δ഑৴޿ࠂը૾ ΠϥετɺϚϯΨɺχϡʔείϯςϯπ

Slide 4

Slide 4 text

رؠ؎ٝחさ׻ׇג醱侧珏겲ך歗⫷ָ䗳銲

Slide 5

Slide 5 text

䖞勻ך歗⫷ꂁ⥋ • ඞཁͳը૾Λࣄલʹੜ੒ͯ͠ετϨʔδʹอଘ • ImageMagickɺGDͱ͍ͬͨը૾ॲཧϥΠϒϥϦͷӡ༻͕ඞཁ • σβΠϯมߋ࣌ʹ͸ඞཁͳը૾શͯΛ࠶ੜ੒ ! αʔόʔαΠυΞϓϦέʔγϣϯ ౤ߘऀ ImageMagick, GD…

Slide 6

Slide 6 text

• ࠷దͳUXΛఏڙ͍ͨ͠ • σβΠφʔɺσΟϨΫλʔͰ΋ͦͷॠؒʹඞཁͳը૾͕ཉ͍͠ • ը૾ม׵Ͱ͸ͳ͘ɺαʔϏεͷ࣮૷ʹूத͍ͨ͠

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

*NBHF'MVYך㼪Ⰵ

Slide 9

Slide 9 text

*NBHF'MVYך㼪Ⰵ • ؅ཧը໘͔ΒΦϦδϯαʔόΛઃఆ • ը૾ͷURLΛมߋ • ը૾ͷετϨʔδҠߦ࡞ۀ͸ඞཁͳ͠

Slide 10

Slide 10 text

*NBHF'MVYך㼪Ⰵ 傀㶷أزٖ٦آ׾ⵃ欽 63-׾㢌刿 ؔٔآٝ؟٦غ׾鏣㹀

Slide 11

Slide 11 text

زٓ؎،ٕ歍׃鴥׫ַ׵鸐䌢㌀噟傈⟃ⰻח،ؕؐٝز׾涪遤׃תׅ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

5ZQF ˖ )551)5514 ˖ 4 )PTU ؔٔآٝ؟٦غךمأزせ׾䭷㹀 1BUI1SFY ػأךفٖؿ؍حؙأ׾䭷㹀 ⢽JNBHFT

Slide 15

Slide 15 text

ⵃ欽דֹ׷歗⫷㢌䳔ػًٓ٦ة

Slide 16

Slide 16 text

䭁㣐簭㼭 ؿؓ٦وحزך㢌䳔

Slide 17

Slide 17 text

https://demo.imageflux.jp/c/w=600/bridge.jpg https://demo.imageflux.jp/c/w=600,h=600/bridge.jpg 䌴QYך歗⫷׾《䖤䌴ծ넝ׁQYך歗⫷׾《䖤

Slide 18

Slide 18 text

a=0 a=1 a=2 a=3 簚埆嫰׾笝䭯 ٔ؟؎ؤ ؙٗحؾؚٝ ػر؍ؚٝ

Slide 19

Slide 19 text

a=2,g=1 㛇彊挿׾䭷㹀

Slide 20

Slide 20 text

w=600,h=600,a=3,b=ffffff/bridge.jpg w=600,h=600,a=3,b=ffffff,g=2/bridge.jpg ػر؍ؚٝך胜兝葿׾䭷㹀㛇彊挿׾䭷㹀

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

歗⫷ךؔ٦غ٦ٖ؎さ䧭歗⫷ךⴖ׶䫙ֹ ׉ך➭ך堣腉

Slide 23

Slide 23 text

،فٔ؛٦ءّٝפך穈׫鴥׫

Slide 24

Slide 24 text

،فٔ؛٦ءّٝד63-䭷㹀  盖椚歗꬗דػًٓ٦ة䭷㹀 

Slide 25

Slide 25 text

،فٔ؛٦ءّٝדך63-穈׫甧ג //{{ imageflux_hostname }}/c/w=600,h=600,a=2/{{ image_path }} ذٝفٖ٦زפך湫䱸㙵׭鴥׫ 3VCZ(FNTJNBHF@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

Slide 26

Slide 26 text

盖椚歗꬗דך鏣㹀

Slide 27

Slide 27 text

盖椚歗꬗דך鏣㹀 1SFY ػأךفٖؿ؍حؙأ׾䭷㹀 ⢽TNBMM 1BUI 《䖤⯓ךػأفٖؿ؍حؙأ׾䭷㹀 1BSBNFUFS 歗⫷㢌䳔ךػًٓ٦ة׾䭷㹀

Slide 28

Slide 28 text

https://demo.imageflux.jp/w=100/bridge.jpg 䌴QYך歗⫷׾《䖤 https://demo.imageflux.jp/small/bridge.jpg 㹀纏幥׫ךػًٓ٦ةדך㢌䳔 ֮׵ַׄ׭㹀纏׃׋ػًٓ٦ةדך歗⫷㢌䳔

Slide 29

Slide 29 text

8FC؟٦ؽأחֶֽ׷歗⫷ *NBHF'MVYך㼪Ⰵ ⵃ欽דֹ׷歗⫷㢌䳔ػًٓ٦ة ،فٔ؛٦ءّٝפך穈׫鴥׫

Slide 30

Slide 30 text

תה׭ • ImageFluxΛར༻͢Δ͜ͱͰɺը૾ม׵ʹ։ൃίετΛ ׂ͘͜ͱͳ͘ɺϏδωεʹ஫ྗ͢Δ͜ͱ͕Ͱ͖·͢ • ·ͣ͸Ұ౓ແྉτϥΠΞϧΛ͓ࢼ͍ͩ͘͠͞ɻ  αʔϏεϖʔδ͔Β͓ਃ͠ࠐΈՄೳͰ͢