デザイナーとエンジニアの垣根を超えたフロントエンド開発

2106b2453a34c3e73972feb1c1a9d52b?s=47 711fumi
July 08, 2018

 デザイナーとエンジニアの垣根を超えたフロントエンド開発

Forkwellというサービスの開発について「デザイナーとエンジニアの垣根を超えたフロントエンド開発」という内容で発表させていただきました。
@ HTML5 APP CONFERENCE 2018

2106b2453a34c3e73972feb1c1a9d52b?s=128

711fumi

July 08, 2018
Tweet

Transcript

  1. 'PSLXFMM )5.-"11$0/'&3&/$& σβΠφʔͱΤϯδχΞͷ֞ࠜΛ௒͑ͨ ϑϩϯτΤϯυ։ൃ ϦχϡʔΞϧͷཪଆ

  2. גࣜձࣾHSPPWFTͷσβΠφʔɻ தݪැݟେ !GVNJ ΤϯδχΞͷ੒௕Λαϙʔτ͢ΔαʔϏε ʮ'PSLXFMMʯͷ։ൃʹܞΘͬͯ·͢ɻ ࣗݾ঺հ

  3. ࠓճ͓࿩͢Δ಺༰ ໨࣍ શһͰਐΊΔϑϩϯτΤϯυ։ൃ 6*σβΠϯͰଥڠ͠ͳ͍

  4. 'PSLXFMMʹ͍ͭͯ

  5. 'PSLXFMMͱ͸ʁ 'PSLXFMM͸ ੒௕͠ଓ͚ΔΤϯδχΞ
 Λࢧԉ͢ΔαʔϏεͰ͢ɻ ɾస৬ࢧԉ ɾϙʔτϑΥϦΦ IUUQTGPSLXFMMDPN

  6. 'PSLXFMMͱ͸ʁ 'PSLXFMM͸ ੒௕͠ଓ͚ΔΤϯδχΞ
 Λࢧԉ͢ΔαʔϏεͰ͢ɻ ɾస৬ࢧԉ ɾϙʔτϑΥϦΦˡ3FOFXBM IUUQTGPSLXFMMDPN

  7. 'PSLXFMMϙʔτϑΥϦΦ͸ *5ΤϯδχΞͷͨΊͷ ੒௕ʹͭͳ͕Δ ΦʔϓϯͳϙʔτϑΥϦΦ Λ໨ࢦͯ͠࡞Γ·ͨ͠ɻ ʢ͋Γͦ͏Ͱҙ֎ͱͳ͍ʣ 'PSLXFMMͱ͸ʁ

  8. *5ΤϯδχΞͷͨΊͷΦʔϓϯͳϙʔτϑΥϦΦ ɾࣗݾ঺հαΠτͱͯ͠ʢษڧձɺస৬ʣ ɾଞਓͱൺֱʢଞͷਓ͸ͲΜͳײ͡ʁʣ ɾࠓޙͳΓ͍ͨ࢟Λߟ͑Δʢ্࢘ͱͷPOʣ ࠓޙ΋༷ʑͳػೳΛ௥Ճ͍͖ͯ͠·͢ʂ 'PSLXFMMͱ͸ʁ

  9. 6*։ൃ΋खΛൈ͚ͳ͍ɻ ΑΓଟ͘ͷ*5ΤϯδχΞʹ ࢖ͬͯ΋Β͏ͨΊɺ

  10. ࠓճͷϦχϡʔΞϧʹ͋ͨͬͯɺ ͲͷΑ͏ʹνʔϜશମͰ6*։ൃʹऔΓ૊Μͩͷ͔ ͓࿩͍͖ͤͯͨͩ͞·͢ɻ ͳʹ͔গ͠Ͱ΋ࢀߟʹͳΔ৘ใ͕͋Ε͹޾͍Ͱ͢ʜ

  11. ̍શһͰਐΊΔϑϩϯτΤϯυ։ൃ

  12. 'PSLXFMM։ൃνʔϜ ޾͔ෆ޾͔ ։ൃϝϯόʔશһ͕+BWB4DSJQUΛ ॻ͘νʔϜ

  13. 'PSLXFMM։ൃνʔϜ ΤϯδχΞ໊ σβΠφʔ໊ "ϓϩμΫτϚωʔδϟʔͱ։ൃΛ݉ͶΔϝΨω #ύϑΥʔϚϯεվળʹ໨Λ഑ΔϝΨω ϝϯόʔ঺հʢࡶʣ $Πϯϑϥ΋ϑϩϯτΤϯυ΋͜ͳ͢ϝΨω
 %σβΠϯˍϑϩϯτΤϯυʹ΋ৄ͍͠ϝΨω &ࢲɻ6*σβΠϯˍ࣮૷ΛϝΠϯͰ୲౰͢ΔϝΨω

  14. Ͳ͏΍ͬͯ΍͍ͬͯΔͷ͔ʁ ϝϦοτ͸ʁ શһͰϑϩϯτΤϯυ։ൃ

  15. ϑϩϯτΤϯυʹҰ൪ৄ͍͠σβΠφʔʢ%͞Μʣ͕ ཰ઌͯ͠؀ڥΛ੔͑ͨ
 શһͰϑϩϯτΤϯυ։ൃ ϦχϡʔΞϧϓϩδΣΫτҎલͷऔΓ૊Έ

  16. 'PSLXFMMελΠϧΨΠυͷ࡞੒ 3BJMTΞϓϦέʔγϣϯͰͷ؀ڥߏங ։ൃʹඞཁͳϥΠϒϥϦΛ࡞੒ˠ )BNM 4"44 3FBDUʹΑΔελΠϧΨΠυͰ6*࣮૷ͷޮ཰Խ ΤϯδχΞͱڠྗ͠ͳ͕ΒߏஙΛ͢͢Ίͨ &4 #BCFM 8FCQBDL

    8FCQBDLFS 3FBDU 3FBDU3BJMT .PDIB &O[ZNF  શһͰϑϩϯτΤϯυ։ൃ %͞Μ ੵۃతʹ৘ใڞ༗ɺஸೡʹϨϏϡʔ
  17. 3FEVY͕ΦʔόʔεϖοΫͳͷͰ ίϯϙʔωϯτ୯ҐͰ4UBUF؅ཧͰ͖ΔίϯϙʔωϯτΛ࡞੒ શһͰϑϩϯτΤϯυ։ൃ

  18. શһͰϑϩϯτΤϯυ։ൃ શһ͕ܞΘΔ͜ͱͷڧΈ ྫʣࣗಈੜ੒ϓϩϑΟʔϧͷ දࣔίϯϙʔωϯτ࡞੒ͷྲྀΕ

  19. ԾσʔλͰࢲʢσβΠφʔʣ͕ϕʔεͱͳΔ3FBDUίϯϙʔωϯτΛ࡞੒ ɹˠઃܭͨ͠ਓ͕·ͣݟͨ໨Λ࡞ͬͯ͠·͏ શһͰϑϩϯτΤϯυ։ൃ ίϯϙʔωϯτ࣮૷ͷྲྀΕ ΤϯδχΞ͕αʔόʔαΠυ͔ΒσʔλΛ౉͢ ɹˍදࣔ಺༰Λ૊ΈཱͯΔ෦෼Λ࣮૷ ϑϩϯτΤϯυಘҙͳσβΠφʔΛத৺ʹ ɹϝϯόʔΈΜͳͰϨϏϡʔ

  20. શһͰϑϩϯτΤϯυ։ൃ શһ͕ϑϩϯτΤϯυ΁ͷཧղΛ͓࣋ͬͯ͘͜ͱͰ ͦΕͧΕͷڧΈΛ׆͔ͯ͠ޮ཰తͳ6*։ൃ͕Ͱ͖Δ 'SPOUFOE 6*%FTJHO 4FSWFS4JEF

  21. ɾͦͷࣄฑʹੵۃతͳϦʔμʔ ·ͱΊͦͷ ɾҰॹʹऔΓ૊ΜͰ͘ΕΔϑΥϩϫʔ ΍Γ͍ͨਓ͕Ի಄ΛͱΔͱεϜʔζɻ੹೚͸νʔϜͰͱΔɻ
 ϑΥϩϫʔ͕͍ͳ͍ͱػೳɾλεΫ͕ଐਓԽ͢Δɻ ΈΜͳ͕ੵۃతͰͳͯ͘΋͍͍ɺಋೖ΁ͷ߹ҙ͕ඞཁɻ શһͰϑϩϯτΤϯυ։ൃ ཰ઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒ΋େࣄ

  22. ɾຎࡲ͕ੜ͡ʹ͍͘ ·ͱΊͦͷ ɾαʔϏεઃܭͷٞ࿦͕ਂ·Δ ڞ௨ཧղ͕͋ΔͨΊɺ͍ΘΏΔσβΠφʔΤϯδχΞରཱͷΑ͏ͳ ໰୊͕ൃੜ͠ʹ͍͘ 6*࣮૷ʹશһ͕ؔΘΔ͜ͱͰɺαʔϏεઃܭʢ69ʣͷٞ࿦͕ਂ·Δ ͔ͭ۩ମతͳ࣮૷ઃܭ·Ͱ͢͹΍͘མͱ͠ࠐΉ͜ͱ͕Ͱ͖Δ શһͰϑϩϯτΤϯυ։ൃ αʔϏεʢ։ൃʣͷํ޲ੑ͕ఆΊ΍͍͢

  23. 6*σβΠϯͰଥڠ͠ͳ͍

  24. ɾΞ΢τϓοτͷެ։Λָʹ͍ͨ͠ 6*Ͱଥڠ͠ͳ͍͜ͱ ϙʔτϑΥϦΦͷ6*Ͱ໨ࢦͨ͜͠ͱ ɾΤϯδχΞʹ΋ྑ͍ҹ৅Λ࣋ͬͯ΋Β͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛ໨ࢦ͢ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹ৅ʹ࢒Δݟͨ໨ʢΧϥʔɺΩϟϥΫλʔʣ

  25. ɾΞ΢τϓοτͷެ։Λָʹ͍ͨ͠ ϙʔτϑΥϦΦͷ6*Ͱ໨ࢦͨ͜͠ͱ ɾΤϯδχΞʹ΋ྑ͍ҹ৅Λ࣋ͬͯ΋Β͑Δ6*σβΠϯ ɾଥڠͷͳ͍σβΠϯΛ໨ࢦ͢ʁ 344ɺϦϙδτϦɺεϥΠυͳͲΛखܰʹ·ͱΊͯެ։Ͱ͖ΔΑ͏ʹ γϯϓϧʹɺ͔ͭҹ৅ʹ࢒Δݟͨ໨ʢΧϥʔɺΩϟϥΫλʔʣ 6*Ͱଥڠ͠ͳ͍͜ͱ

  26. ʺ ଥڠͷͳ͍σβΠϯ ׬ᘳͳσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ

  27. ʹ ଥڠͷͳ͍σβΠϯ Ձ஋ݕূ͕Ͱ͖Δ ϨϕϧͷσβΠϯ 6*Ͱଥڠ͠ͳ͍͜ͱ

  28. ʮͱʹ͔͘ૣ͘ϦϦʔεͯ͠ɺϢʔβʔͷ൓ԠΛΈΑ͏ʯ 6*Ͱଥڠ͠ͳ͍͜ͱ աڈͷࢲୡ Ͱ͖Δͱ͜·ͰɺͰϦϦʔε

  29. ͲͪΒ͔൑அͰ͖ͳ͍ʜ ˣ Ձ஋ݕূ͕Ͱ͖ͳ͍ʂ ࢥͬͨΑ͏ͳ൓Ԡ͕ͳ͔ͬͨ৔߹ʜ "ఏڙͨ͠ػೳʹ Ձ஋Λײͯ͡΋Β͑ͳ͔ͬͨɻ #6*͕࢖͍ͮΒ͍ͨΊɺՁ஋͕ Ϣʔβʔʹ఻ΘΒͳ͔ͬͨɻ PS 6*Ͱଥڠ͠ͳ͍͜ͱ

  30. ࠷খػೳ͕໰୊ͳ͘࢖͑ΔϨϕϧͷ6*ʢ.71ʣͱ͸ɺ ɾϓϩϑΟʔϧΛ҆৺ͯ͠ΈΜͳʹެ։Ͱ͖Δ ɾ(JU)VC΍ϒϩά΍εϥΠυαʔϏεͱ࿈ܞͯ͠ΞϐʔϧͰ͖Δ ৽نϢʔβʔ͕͜ͷػೳΛ໰୊ͳ͘࢖͑Δ͜ͱɺͦ͜͸ଥڠ͠ͳ͍ɻ 6*Ͱଥڠ͠ͳ͍͜ͱ

  31. ͱ͸͍͑࣌ؒʹ੍ݶ΋͋ΔʜՁ஋͕Ϣʔβʔʹಧ͘͜ͱ͕ୈҰ ɾຊ౰͸"KBYͰߋ৽͍͚ͨ͠Ͳɺී௨ͷTVCNJUͰՁ஋͸ఏڙͰ͖Δ ɾਤ΍ΞχϝʔγϣϯΛ࢖ͬͯઆ໌͍͚ͨ͠ͲɺςΩετͰ΋఻ΘΔ 6*Ͱଥڠ͠ͳ͍͜ͱ

  32. #FGPSFɿʮͰ͖Δ͜ͱʯʮͦͷͨΊʹ͢Δ͜ͱʯ͕Θ͔Βͳ͍ʜ 6*Ͱଥڠ͠ͳ͍͜ͱ

  33. 6*Ͱଥڠ͠ͳ͍͜ͱ /PXɿΘ͔Γ΍͘͢͸ͳ͍ɺͨͩ͠ʮͰ͖Δ͜ͱʯʮͦͷϝϦοτʯ͸ඞͣ఻͑Δ

  34. ଥڠ͠ͳ͍ͨΊʹͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾσβΠφʔ͔ΒͷϨϏϡʔ Θ͔Γ΍͢͞ɾ఻ΘΓ΍͢͞ɺσβΠϯͷόϥϯεʢݟͨ໨ʣ ɾΤϯδχΞ͔ΒͷϨϏϡʔ λʔήοτͱͯ͠ͷࢹ఺ɺ࣮૷͠΍͢͞ɺψέϞϨͷνΣοΫ

  35. ଥڠ͠ͳ͍ͨΊʹͦͷ̍ 6*σβΠϯϞοΫͷϨϏϡʔ 6*Ͱଥڠ͠ͳ͍͜ͱ ɾޮ཰తˍޮՌͷ͋ΔϨϏϡʔํ๏Λ୳Δ 6*σβΠϯҊΛݟͳ͕ΒͷϨϏϡʔձ πʔϧΛ࢖ͬͨඇಉظϨϏϡʔʢྫɿ*O7JTJPOʣ ࣮૷ͪ͠Όͬͯ(JU)VC্ͰίʔυˍσβΠϯϨϏϡʔ υοάϑʔσΟϯάձ

  36. ɾϨϏϡϫʔͷ৺ߏ͑ ଥڠ͠ͳ͍ͨΊʹͦͷ ϨϏϡʔΛؾܰʹґཔͰ͖Δۭؾͮ͘Γ ୲౰ऀ΁ͷϦεϖΫτɻ࡞ͬͨਓ΁ͷܟҙɻ ࢦఠͰ͸ͳ͘ఏҊͬͯߟ͑Δͷྑ͘ͳ͍Ͱ͔͢ʁ ɾϨϏϡΠʔͷ৺ߏ͑ ϨϏϡʔͱ͸ਓͰ͸ͳ͘Ξ΢τϓοτʹରͯ͠ͷ΋ͷ ֆจࣈͷྑ͞ ͓͢͢Ίຊɿ ΈΜͳͰ͸͡ΊΔσβΠϯ൷ධ

    6*Ͱଥڠ͠ͳ͍͜ͱ
  37. ɾσβΠφʔ͕࣮૷·Ͱ୲౰͢Δ৔߹ʢࠓճͷࢲʣ ଥڠ͠ͳ͍ͨΊʹ͓·͚ σβΠϯϞοΫΞοϓ͸Ͳ͜·Ͱ࡞ΓࠐΉͷ͔ʁ ࢲ͸࣮૷·Ͱ୲౰͢ΔͷͰɺਖ਼ৗܥʢجຊύλʔϯʣ͕Ͱ͖͍ͯΕ͹ ͋ͱ͸࣮૷ͰΧόʔ͢Δ৔߹͕ଟ͍ ΞχϝʔγϣϯͳΜ͔΋ίϝϯτͰදݱ͢ΔͷΈ ɾσβΠφʔ͕࣮૷ʹ͔͔ΘΒͳ͍৔߹ ༷ʑͳঢ়گͷϞοΫΞοϓΛ࡞͓ͬͯ͘ඞཁ͕͋Γͦ͏ ϓϩτλΠϓͷ࡞੒΍ৄࡉͳࢿྉʢ;FQMJO౳ʣΛར༻͢Δ΄͏͕͍͍৔߹΋ 6*Ͱଥڠ͠ͳ͍͜ͱ

  38. ଥڠ͠ͳ͍ࣄͷҙຯ΍ํ๏͸ͳΜͱͳ͘Θ͔͚ͬͨͲʜ 6*Ͱଥڠ͠ͳ͍͜ͱ σβΠϯ൑அͬͯ೉͘͠Ͷʁʂʁʁ ҙݟͷ૬ҧɺͲ͜·Ͱ͕ଥڠͳͷ͔ʁɺͳͲͳͲ Α࣭͘໰͞ΕΔ͜ͱ

  39. ɾσβΠϯ͸σβΠφʔ͕੹೚Λ࣋ͭ ·ͱΊ σβΠϯʢ6*ʣΛ࡞Δͷ͕σβΠφʔͰ͸ͳ͍ɻ ੈʹग़͢Ξ΢τϓοτʹ੹೚Λ࣋ͭͷ͕ओͳ໾ׂɻ ҆৺͍ͯͩ͘͠͞ɺͦͷͨΊʹσβΠφʔ͕͍·͢Α 6*Ͱଥڠ͠ͳ͍͜ͱ %#ઃܭ΍ΠϯϑϥʹΤϯδχΞ͕ࡋྔΛ࣋ͭͷͱಉ͡ɻ σβΠϯʹ͍ͭͯ͸σβΠφʔʹ͓೚͍ͤͩ͘͞ɻ

  40. શһͰਐΊΔϑϩϯτΤϯυ։ൃ ࠓ೔ͷ·ͱΊ ɾ཰ઌ͢ΔϦʔμʔˍϑΥϩʔ͢ΔϝϯόʔͲͪΒ΋େࣄ 6*Ͱଥڠ͠ͳ͍͜ͱ 6*σβΠϯͰଥڠ͠ͳ͍ ɾαʔϏεʢ։ൃʣͷํ޲ੑ͕ఆΊ΍͍͢ ɾՁ஋ݕূ͕Ͱ͖ΔϨϕϧ·Ͱଥڠ͠ͳ͍ ɾઐ໳ՈͰ͋ΔσβΠφʔΛத৺ʹ

  41. ࠓޙ΋νʔϜͷΈΜͳͰվળΛਐΊ͍͖ͯ·͢ɻ ΋͠͝ҙݟͳͲ͋Γ·ͨ͠Β 'PSLXFMMϖʔδ΁ͷ͓໰͍߹Θͤ΍ 5XJUUFSͳͲͰ͝࿈བྷ͍͚ͨͩΔͱخ͍͠Ͱ͢ʂ ࠷ޙʹ IUUQTQPSUGPMJPGPSLXFMMDPN IUUQTUXJUUFSDPN'PSLXFMM@KB

  42. ͓ΘΓ