フリルの商品を色で検索できるようにした話

Fashion Tech meetup #2 の発表資料です。 http://fashion-tech.connpass.com/event/28335

Transcript

1. ϑϦϧͷ঎඼Λ
   ৭ͰݕࡧͰ͖ΔΑ͏ʹͨ͠࿩
   גࣜձࣾ'BCMJD
   Ҫࡔজଠ
   ⛄
   

   View Slide

2. ࣗݾ঺հ
   
   

   View Slide

3. Ҫࡔজଠ
   w 'BCMJD JOD
   w ϢʔβʔϑΝʔετνʔϜ
   w J043VCZPO3BJMTը૾ॲཧ
   w ৭ݕࡧ"QQMF8BUDIରԠ4XJGUҠߦ
   
   !TIPCZTIPCZ
   

   View Slide

4. ֓ཁ
   
   

   View Slide

5. ֓ཁ
   w ৭ݕࡧͱ͸ʁ
   w ͳ࣮ͥ૷ͨ͠ͷ͔
   w ࣮૷
   w ΧϥʔύϨοτͷ࡞੒
   w ը૾ॲཧʹΑΔ৭ݕग़
   w ݁Ռ
   
   

   View Slide

6. ৭ݕࡧͱ͸ʁ
   
   

   View Slide

7. 
   

   View Slide

8. ৭ݕࡧͱ͸ʁ
   w ৭Ͱ঎඼ΛߜΓࠐΊΔ
   w ྫɿϫϯϐʔεʷϗϫΠτ
   w ྫɿίʔτʷϒϥ΢ϯ
   w ৭͸ࣗಈͰݕग़
   w ग़඼ऀ͸৘ใೖྗͷඞཁͳ͠
   w ঎඼ը૾͔Βը૾ॲཧͰݕग़
   
   

   View Slide

9. ͳ࣮ͥ૷ͨ͠ͷ͔
   
   

   View Slide

10. ͳ࣮ͥ૷ͨ͠ͷ͔
    w ৭Λج४ʹ෰Λങ͏ͱ͍͏Ϣʔβʔ͕ଟ͍͘Δ
    w Ξϯέʔτ
    w ΠϯλϏϡʔ
    w ݕࡧΩʔϫʔυ
    w ϑϦϧΛϑΝογϣϯʹಛԽ͍ͤͨ͞
    w ঁੑ޲͚ϑϦϚΞϓϦˠϑΝογϣϯϑϦϚΞϓϦ
    w ϑΝογϣϯʹಛԽͨ͠ݕࡧػೳ
    
    

    View Slide

11. ࣮૷
    ΧϥʔύϨοτͷ࡞੒
    
    

    View Slide

12. 3(#Λͦͷ··࢖͏ͱ
    
    
    ৭
    

    View Slide

13. ΧϥʔύϨοτΛ࡞Δͱ
    
    ৭ ☺
    

    View Slide

14. ͳͥ৭ʁ
    
    

    View Slide

15. ͳͥ৭ʁ
    w ਓؒͷ৭ೝࣝʹؔ͢Δݚڀ<>
    w جຊͱͳΔ৭͸͋ΒΏΔݴޠʹଘࡏ͠ɺීวత
    w ϨουɺΠΤϩʔɺάϦʔϯɺϒϧʔɺΦϨϯδɺύʔ
    ϓϧɺϐϯΫɺϒϥ΢ϯɺάϨʔɺϒϥοΫɺϗϫΠ
    τ
    w ϢʔβʔͷݕࡧΫΤϦ
    w ৭໊ΛؚΉݕࡧΫΤϦΛଟ͍ॱʹྻڍ
    w جຊͷ৭ʹ౷߹ʢྫɿΩϟϝϧˠϒϥ΢ϯʣ
    w ౷߹͢Δͱҧ࿨ײͷ͋Δϕʔδϡ͸࢒ͨ͠
    <>#FSMJO#BOE,BZ1
    l#BTJD$PMPS5FSNT5IFJS6OJWFSTBMJUZBOE&WPMVUJPOz
    

    View Slide

16. ࣮૷
    ը૾ॲཧʹΑΔ৭ݕग़
    
    

    View Slide

17. ը૾ॲཧʹΑΔ৭ݕग़
    w ϗϫΠτόϥϯεͷௐ੔
    w എܠͷ࡟আ
    w ࠷ස৭ͷݕग़
    w 3(#஋ͱΧϥʔύϨοτͷϚονϯά
    
    

    View Slide

18. ϗϫΠτόϥϯεͷௐ੔
    
    

    View Slide

19. ϗϫΠτόϥϯεͷௐ੔
    w ܬޫ౮ͰࡱӨ͞Εͨը૾ͷ৭Λิਖ਼
    w ܬޫ౮͸྘ͷ੒෼͕ଟ͘ɺը૾͕྘͕͔Δ
    w ϑϦϧͷ঎඼͸ࣨ಺ࡱӨ͕ଟ͍
    w 3FUJOFY<>
    w ਓؒͷࢹ֮ಛੑΛϞσϧԽͨ͠ख๏
    w Ճ޻͞Εͨը૾͸৭ຯ͕มԽ͠ͳ͍
    <>&-BOEBOE+.D$BOO l-JHIUOFTTBOE3FUJOFYUIFPSZ z
    

    View Slide

20. require 'RMagick'
    image = ImageList.new('image.jpg')
    red_extrema = image.channel_extrema(Magick::RedChannel)
    green_extrema = image.channel_extrema(Magick::GreenChannel)
    blue_extrema = image.channel_extrema(Magick::BlueChannel)
    red_max = red_extrema.last.to_f
    green_max = green_extrema.last.to_f
    blue_max = blue_extrema.last.to_f
    white_balanced_image = image
    white_balanced_image = white_balanced_image.convolve_channel(1,
    [green_max / red_max], Magick::RedChannel)
    white_balanced_image = white_balanced_image.convolve_channel(1,
    [green_max / blue_max], Magick::BlueChannel)
    
    3.BHJDLʹΑΔ3FUJOFY
    

    View Slide

21. 
    #FGPSF "GUFS
    άϦʔϯ ϗϫΠτ
    

    View Slide

22. എܠͷ࡟আ
    
    

    View Slide

23. എܠͷ࡟আ
    w എܠ͕঎඼ͷ৭ͱͯ͠൑ఆ͞ΕΔͷΛ๷ࢭ
    w എܠ෦෼ΛϚθϯλʹͨ͠ϚεΫը૾Λ࡞੒͢Δ
    w എܠϚεΫͷ࡞੒ॲཧ
    w Τοδݕग़
    w ࢛۱͔ΒϚθϯλΛྲྀ͠ࠐΉ
    w Ϛθϯλ෦෼ΛഎܠϚεΫͱ͢Δ
    
    

    View Slide

24. 
    ݩը૾ Τοδݕग़
    Ϛθϯλͷྲྀ͠ࠐΈ എܠϚεΫ
    

    View Slide

25. ࠷ස৭ͷݕग़
    
    

    View Slide

26. ࠷ස৭ͷݕग़
    w ը૾ͷதԝ෦෼͔Β࠷ස৭Λݕग़
    w ϑϦϧͰ͸ը૾தԝʹ঎඼͕͍ࣸͬͯΔ͜ͱ͕ଟ͍
    w தԝ෦෼͸എܠͷӨڹΛड͚ͮΒ͍
    w ࠷ස৭ͷݕग़ॲཧ
    w தԝΛ੾Γൈ͘
    w ৭ʹݮ৭
    w എܠϚεΫΛ߹੒
    w ώετάϥϜΛऔͬͯ࠷ස৭Λग़͢
    
    

    View Slide

27. 
    ݩը૾ தԝΛ੾Γൈ͘
    ˍ৭ʹݮ৭
    എܠϚεΫΛ߹੒
    ώετάϥϜ
    ͔Β࠷ස৭
    "#
    

    View Slide

28. 3(#஋ͱ
    ΧϥʔύϨοτͷϚονϯά
    
    

    View Slide

29. 3(#஋ͱΧϥʔύϨοτͷϚονϯά
    w ݕग़ͨ͠ΧϥʔίʔυΛ৭ʹׂΓ౰ͯΔ
    w ʢ ʣˠ
    w 3(#஋ͱ৭໊ͷରԠ෇͚ௐࠪ<>Λར༻
    w 3(#஋ͷ ৭ͷ৭໊͕෼͔Δ
    w )4-ʹม׵ޙɺ֤৭໊ͷ)4-ͷൣғΛར༻ͨ͠
    w Ϛονϯάॲཧ
    w 3(#஋Λ)4-ʹม׵
    w )4-͔Β࠷΋͍ۙΧϥʔύϨοτΛબͿ
    IUUQCMPHYLDEDPNDPMPSTVSWFZSFTVMUT
    

    View Slide

30. ๻ʮ͏·͍ͬͨͧ͘ʂʯ
    
    
    

    View Slide

31. ࣾ಺ͷϢʔβʔʮ͓͔͍͠ʯ
    
    
    

    View Slide

32. Ұൠతͳ৭ϑΝογϣϯͷ৭
    
    

    View Slide

33. ৭ͷೝࣝ͸
    ϑΝογϣϯ஌ࣝͷ༗ແͰ
    มԽ͢Δ
    
    

    View Slide

34. 
    Կ৭ʹݟ͑Δʁ
    άϦʔϯʁ
    %$#
    

    View Slide

35. 
    ςΟϑΝχʔzϒϧʔz
    
    

    View Slide

36. ϑΝογϣϯʹৄ͍͠ਓʹ
    Կ౓΋ݟͤͯௐ੔
    
    
    

    View Slide

37. 
    ׬੒
    

    View Slide

38. ݁Ռ
    
    

    View Slide

39. ৭ͷݕग़ਫ਼౓
    
    

    View Slide

40. ݕग़ਫ਼౓
    w ϝδϟʔͳΧςΰϦͰ঎඼Λ໨ࢹνΣοΫ
    w ฏۉͰ͸ͱ௿Ί
    w ग़඼͕ଟ͍৭͸·ͣ·ͣ
    w ϒϥοΫɿ
    w Ϩουɿ
    w ϐϯΫɿ
    w ϗϫΠτɿ
    w ग़඼͕গͳ͍৭͸ϊΠζͷׂ߹͕ଟ͘ͳΔ
    
    

    View Slide

41. ໨తͷ঎඼ʹ
    ͨͲΓண͖΍͘͢ͳ͔ͬͨ
    
    

    View Slide

42. ݕࡧͷ਺஋
    w ৭ͰݕࡧΛͨ͠Ϣʔβʔ͸Ωʔϫʔυ͚ͩͰ
    ݕࡧͨ͠Ϣʔβʔʹൺ΂ɺݕࡧ݁ՌͰ঎඼Λ
    ։ׂ͘߹͕໿΄Ͳߴ͍
    w ୆ˠ୆
    w ໨తͷ঎඼ʹͨͲΓண͖΍͘͢ͳ͍ͬͯΔ
    
    

    View Slide

43. ·ͱΊ
    
    

    View Slide

44. ·ͱΊ
    w ৭Ͱ঎඼ΛߜΓࠐΊΔ৭ݕࡧΛ࣮૷ͨ͠
    w ϢʔβʔͷߪೖߦಈΛௐࠪ͠ɺ৽͍͠ϑϦϧ
    ͷϑΝογϣϯಛԽػೳͱ࣮ͯ͠૷
    w ΧϥʔύϨοτ͸৭ೝ஌ͷݚڀΛϕʔεʹϢʔ
    βʔͷݕࡧΫΤϦΛ౷߹ͯ͠৭ʹͨ͠
    w ৭ิਖ਼ɺഎܠը૾ͷ࡟আΛߦ͍ɺը૾ͷதԝ
    ෦෼͔Β3(#৭Λݕग़͠ɺ৭ʹϚοϐϯά
    w ৭ݕࡧʹΑΓɺΩʔϫʔυΑΓ΋໨తͷ঎඼
    ʹͨͲΓண͖΍͘͢ͳͬͨ
    
    

    View Slide

45. ͓ΘΓ
    
    ⛄
    

    View Slide