Web からアプリの世界にやってきてハマったこと

BearTail エンジニア交流 #1 での発表スライド（再構成版）
https://atnd.org/events/68533

Transcript

1. Web ͔ΒΞϓϦͷੈքʹ ΍͖ͬͯͯϋϚͬͨ͜ͱ
2. ͋ͳͨ͸୭ ᖛాҰتɺWeb ΤϯδχΞ ΫοΫύουגࣜձࣾ
3. ʮ͓͍͍݈͠߁ʯ ͱ͍͏αʔϏεΛ࡞ͬͯΔ
4. "Web" ΤϯδχΞ ͷ͸͚ͣͩͬͨͲ……ɻ
5. (Web|ΞϓϦ) ΤϯδχΞʹ ԟʑʹͯ͋͠Δ͜ͱ
6. ࠓ೔࿩͢͜ͱ • Web ΍ౕͬͯͨΒ͕͸͡ΊͯΞϓϦ։ൃ΍ͬͨΒେมͩͬͨ • ͭ·͖͕ͮͪͳϙΠϯτΛవΊͯΈͨΑ
7. ը໘ͷ੾Γ෼͚ઃܭ
8. Web - جຊతʹจॻʢϋΠύʔςΩετʣ • ϖʔδ୯ҐͰϏϡʔΛ࡞੒ • ϖʔδ͸Ϧιʔεͷ CRUD ૢ࡞୯Ґ͕جຊ • Ͱ͖ͨϖʔδΛϦϯΫͰͭͳ͍Ͱ͍͘ • Ϣʔβ͸ࣗ༝ʹϖʔδ͍ؒͬͨΓདྷͨΓͰ͖Δ
9. ΞϓϦ - OS ͷ UI ͱಉ౳ Ϗϡʔ͸ GUI ͦͷ΋ͷ • ΠϯλϥΫςΟϒͳ UI ཁૉΛଟ༻ • ͳΔ΂͘ը໘ભҠΛ͠ͳ͍ ϦϯΫͷ֓೦͸ͳ͍ • Ϣʔβ͸޷͖ͳը໘ʹδϟϯϓͰ͖ͳ͍ • ֤ը໘ͷදࣔϑϩʔ͸ݶఆ
10. Web ͬΆ͍ભҠʹ͠ͳ͍ ͍͍ͨͯը໘Λ෼͚͗͢Δ •
    ࡞੒ը໘ˠ֬ೝը໘ˠ׬ྃը໘ • ̋ ϞʔμϧͰೖྗը໘ग़͖͙ͯͯ͢ফ͑Δ • ʮؔ৺ʯ΍ʮ໨తʯ୯ҐͰҰͭͷը໘ʹ·ͱΊΔͱΞϓϦͬ Ά͘ͳΔ • ίϯςϯπϝΠϯͰͳ͍ը໘Ͱ͸εΫϩʔϧආ͚Δ
11. Android ͱ iOS ͷ UI ͷ ҧ͍Λແࢹͯ͠͠·͏
12. Α͋͘Δߟ͑ ʮ྆ OS ڞ௨ͷ UI ΛσβΠϯͯ͠࢖͍·Θͦ͏ʯ
13. ΍Ίͨ΄͏͕͍͍ ʮ྆ OS ڞ௨ͷ UI ΛσβΠϯͯ͠࢖͍·Θͦ͏ʯ
14. OS ͝ͱͷࣗવͳૢ࡞ମݧ͕ࣦΘΕΔ • λϒͷҐஔ • ʮ໭ΔʯΛͲ͜ʹஔ͔͘ʁ UI ΧελϚΠζ͕େม • ڞ௨σβΠϯʹ߹ΘͤΔͨΊʹඪ४ίϯϙʔωϯτΛΧελ ϚΠζ
15. Dropbox ͷྫ
16. ը໘෦඼ͷΧελϚΠζ͕େม
17. Web ͷΧελϜ෦඼࡞੒ UI ίϯϙʔωϯτ = HTML ཁૉ + CSS + JS جຊతͳྲྀΕ 1. div ϘοΫεΛ༻ҙ 2. CSS Ͱ഑ஔɺ૷০ 3. JS ͰΠϯλϥΫγϣϯΛ͚ͭΔ
18. Web ͷΧελϜ෦඼࡞੒ • ը໘૷০༻ͷ؆қͳݴޠ͕༻ҙ͞Ε͍ͯΔ • ͲΜͳ DOM ΋ (form ܥΛআ͍ͯ) ಉ͡Α͏ʹѻ͑Δ • ΠϯλϥΫγϣϯઃఆ΋ΠϕϯτΩϟονˠclass ͷมߋͱ୯ ७
19. ΞϓϦ(iOSͷ৔߹)ͷΧελϜ෦඼࡞੒ UI ίϯϙʔωϯτ = Swift ͷ Ϋϥε جຊతͳྲྀΕ 1. ݩͱͳΔΫϥεͷܧঝؔ܎Λ֬ೝ 2. Swift ίʔυͰ഑ஔɺ૷০ 3. Swift ίʔυͰΠϕϯτͷॲཧ
20. ΞϓϦ(iOSͷ৔߹)ͷΧελϜ෦඼࡞੒ • جຊతʹ͢΂ͯͷઃఆΛ Swift ʢ൚༻ݴޠʣͰߦ͏ඞཁ • ܧঝؔ܎ʹΑͬͯίϯϙʔωϯτ͝ͱʹઃఆՄೳͳ૷০߲໨ ͕ҟͳΔ • ίϯϙʔωϯτ͝ͱʹ࣮૷͠ͳ͚Ε͹ͳΒͳ͍ϝιου౳͕ ࡉ͔ܾ͘ΊΒΕ͍ͯΔ • جຊతʹॻ͔ͳ͚Ε͹ͳΒͳ͍ྔ͕ଟ͍
21. ͜ΜͳཁૉΛͭ͘Ζ͏ͱͨ͠ͱ͖ • ఺ઢϘʔμ • ؙ֯
22. Web border: 2px dotted solid; corner-radius: 4px;
23. ΞϓϦ(!) var line = UIBezierPath() lineColor.setStroke() line.lineWidth = lineWidth line.flatness = pathFlatness line.setLineDash(linePattern, count: linePattern.count, phase: 0) line.lineCapStyle = correctedLineCap if drawTopLeftCorner { line.moveToPoint(borderTopLeftCornerEntry) line.addArcWithCenter(borderTopLeftCornerCenter, radius: borderTopLeftRadius, startAngle: CGFloat(M_PI), endAngle: CGFloat(1.5*M_PI), clockwise: true) } if drawTop { if !drawTopLeftCorner { line.moveToPoint(borderTopLeftCornerExit) } line.addLineToPoint(borderTopRightCornerEntry) } if drawTopRightCorner { if !drawTop { line.moveToPoint(borderTopRightCornerEntry) } line.addArcWithCenter(borderTopRightCornerCenter, radius: borderTopRightRadius, startAngle: CGFloat(1.5*M_PI), endAngle: CGFloat(2.0*M_PI), clockwise: true) } if drawTrailing { if !drawTopRightCorner { line.moveToPoint(borderTopRightCornerExit) } line.addLineToPoint(borderBottomRightCornerEntry) } if drawBottomRightCorner { if !drawTrailing { line.moveToPoint(borderBottomRightCornerEntry) } line.addArcWithCenter(borderBottomRightCornerCenter, radius: borderBottomRightRadius, startAngle: CGFloat(0.0), endAngle: CGFloat(0.5*M_PI), clockwise: true) } if drawBottom { if !drawBottomRightCorner { line.moveToPoint(borderBottomRightCornerExit) } line.addLineToPoint(borderBottomLeftCornerEntry) } if drawBottomLeftCorner { if !drawBottom { line.moveToPoint(borderBottomLeftCornerEntry) } line.addArcWithCenter(borderBottomLeftCornerCenter, radius: borderBottomLeftRadius, startAngle: CGFloat(0.5*M_PI), endAngle: CGFloat(1.0*M_PI), clockwise: true) } if drawLeading { if !drawBottomLeftCorner { line.moveToPoint(borderBottomLeftCornerExit) } line.addLineToPoint(borderTopLeftCornerEntry) } line.stroke() self.layoutIfNeeded()
24. ΞϓϦͰΧελϜ UI Λ࡞Δͱ͖ • جຊతʹͳΔ΂͘࡞Βͳ͍ • Ұ౓࡞ͬͨΒΞϓϦશମͰ࢖͍·ΘͤΔઃܭʹ͓ͯ͘͠ • ݩͱͳΔ UI ෦඼ͷੑ࣭Λԡ͑͞Δ • جఈΫϥε͸ͳʹ͔ʁ • ͲΜͳϓϩύςΟ͕͋Δ͔ʁ
25. ϕʔλ഑෍͕೉͍͠(iOS)
26. Web • εςʔδϯάαʔόΛݐͯͯͦ͜ʹσϓϩΠ • ςελ͸ࣗ෼ͷϚγϯͷϒϥ΢β͔Βࣗ༝ʹ੡඼ʹΞΫηε • ։ൃ͕ਐΜͩΒ޷͖ͳλΠϛϯάͰ࠷৽൛ʹߋ৽Ͱ͖Δ
27. iOS • ςελ୺຤ʹ௚઀సૹɺ΋͘͠͸ AppleStore ʹҰ౓ఏग़ (TestFlight) • ςελ͸୺຤ UUID ʗϝʔϧΞυϨεΛ։ൃऀʹఏग़͢Δඞ ཁ • ߋ৽ͷͨͼʹసૹ͠ͳ͓͠ʗApple ʹਃ੥ νʔϜͰͷυοάϑʔσΟϯά͕ਏ͍
28. Deploy gate Λ࢖ͬͯղফ • UUID ͷ؅ཧɺΞϓϦΠϝʔδͷ؅ཧ Λ΍ͬͯ͘ΕΔαʔϏε • ٬ઌ౳ʹ഑෍͢Δͱ͖͸ϥΠηϯε ஫ҙ Alternative • Fabric
29. େมͩͬͨ…… !
30. ͦΕͰ΋ΞϓϦͷྑ͞Λ஌ͬͨ • ͘͘͞͞ಈ͘ • ʮ͖ͬͪΓʯͯ͠Δײ͡ʢॏཁʣ • Ϣʔβମݧͷ͢΂ͯΛ੍ޚͰ͖Δ
31. Ұ౓ࣗ෼ͷ Web ΞϓϦΛωΠςΟϒԽͯ͠ΈΑ͏ ! αΫαΫײ͸ମݧͯ͠ΈΔՁ஋͕͋Δ