アプリリリースまでのつらみあれこれ

Slide 1

Slide 1 text

ΞϓϦϦϦʔε·Ͱͷ ͭΒΈ͋Ε͜Ε @nitaking_

Slide 2

Slide 2 text

About Satoshi Nitawaki  • ॴଐ • ΤΞʔΫϩʔθοτ • ΞϓϦϝΠϯ / ϑϩϯτ / αʔό    • ܦྺ • SIer / ࣾ಺SE • ΞΧ΢ϯτ • Twitter: @nitaking_ • Github: @nitaking

Slide 3

Slide 3 text

ΤΞʔΫϩʔθοτ • αʔϏε • ϓϩͷελΠϦετ͕͋ͳͨͷͨΊʹίʔσΟωʔτ • ύʔιφϧελΠϦϯά • ঁੑ޲͚आΓ์୊ͷϑΝογϣϯϨϯλϧαʔϏε

Slide 4

Slide 4 text

React Native࠾༻ʹࢸΔ·Ͱ • طଘͷiOSΞϓϦʢSwitfʣΛϦϓϨʔε • iOSΤϯδχΞෆࡏ • ϝϯςφϯε͞Εͳ͍ΞϓϦ • ߋ৽͞Εଓ͚ΔWEBΞϓϦ • ಡΊͳ͍Swiftͷίʔυ • Android΋ཉ͍͠

Slide 5

Slide 5 text

ϦϓϨʔεͷํ਑ • ϝΠϯػೳ͸React NativeͰ࣮૷ • ҎԼ͸WebViewͰճආ • ϦϦʔεʹؒʹ߹Θͳ͍༏ઌ౓௿Ίͳػೳ • ܾࡁपΓը໘ • tokenೝূ͕͠ΜͲͦ͏

Slide 6

Slide 6 text

ओʹਏ͔ͬͨͱ͜ Android WebView

Slide 7

Slide 7 text

Android • WebViewͷFileUploadͰ͖ͳ͍݅ • FlatList × Image => ϨϯμϦϯά͓͔͍͠

Slide 8

Slide 8 text

WebViewͷFileUploadͰ͖ͳ͍݅ • ϦϦʔε1िؒલʹൃ֮ • RN v0.55.4Ͱൃੜ • v0.57.0Ͱʢ΍ͬͱʣղফ͞ΕͨΒ͍͠ ͜ͷλΠϛϯάͰ RNΞοϓάϨʔυʂʁ

Slide 9

Slide 9 text

WebViewͷFileUploadͰ͖ͳ͍݅ • ༗ࢤʹॿ͚ΒΕͨʂʂʂ • Android͸Λ͜ΕͱೖΕସ͑ͯ࢖༻͢Δ • ࠓ΋ݩؾʹಈ͍͍ͯΔ • RNόʔδϣϯΞοϓ͢Δ·Ͱ͓ੈ࿩ʹ

Slide 10

Slide 10 text

FlatList × Image • ͳʹ͕ى͖͔ͨ • ϨϯμϦϯά͕·͹Β • දࣔ΋ΧΫ͍ͭͯΔײ • දࣔ͞Εͳ͍Component΋ • iOSͰ͸ى͖ͳ͔ͬͨ *NBHF

Slide 11

Slide 11 text

FlatList × Image • ղܾࡦ • props: removeClippedSubviews This may improve scroll performance for large lists.

Slide 12

Slide 12 text

FlatList × Image removeClippedSubviews: false removeClippedSubviews: true • iOS͸ϝϞϦϦʔΫ͕͏·͍͕ Android͸ϝϞϦϦʔΫ͞Εͯͳ͍ʁ

Slide 13

Slide 13 text

iOS༏लʁ

Slide 14

Slide 14 text

WebView • webίϯςϯπΛදࣔ • ࣗಈϩάΠϯ • AuthޙͷtokeΛCookieʹηοτͯ͠ೝূ • ͭ·Γ • RNͷWebViewʹCookieΛηοτͯ͠ೝূʁ

Slide 15

Slide 15 text

WebView • ΍ͬͨ͜ͱ • WebViewͷதʹCookie৘ใηοτʁ • injectJavaScriptʹsetCookieͷॲཧΛ ߦ͏JSΛ౉࣮ͯ͠ߦͰ͖ͦ͏ͳײ͕͋͡Δ ࣦഊ

Slide 16

Slide 16 text

WebView • ߦ͖ண͍ͨ౴͑ • react-native-cookies(star 600~)  • ͔͋ͨ΋ϝδϟʔͬΆ͍react-native-cookie͸ඍົ • iOSͱAndroidͰؔ਺΋༩͑Δύϥϝʔλ͸ผʑ • iOS͸CookieೝূOKͰ΋Android͸NGɺ  ͱ͍͏͜ͱ͕ൃੜ͍ͯͨ͠

Slide 17

Slide 17 text

WebView AndroidͱiOSͰ༻్ಉ͡ͳͷʹΠϯλϑΣʔεҧ͏ →݁ߏϋϚͬͨ

Slide 18

Slide 18 text

͞Βʹ Apple৹ࠪ

Slide 19

Slide 19 text

Apple৹ࠪ • Ұճ໨ɿϕʔλ൛౤͛ͨ • ௨աͨ͠ • ೋճ໨ɿ҆৺ͯ͠΋͏Ұճ౤͛ͨ • मਖ਼ͯ͠ͳ͍ͱ͜ΖͷࢦఠͰ৹ࠪམͪͨɻɻɻ

Slide 20

Slide 20 text

ͳͥʁ

Slide 21

Slide 21 text

Apple৹ࠪ • ཧ༝ɿ • ձһొ࿥͸Safariͷwebϖʔδʹඈ͹͍ͯͨ͠  ʢApp಺ϦϯΫ -> Safariϖʔδʣ • ձһొ࿥͸ΞϓϦ಺Ͱ׬݁ͤͯ͞΄͍͠ͱͷ͜ͱ • UXͷ؍఺͔ΒΞϓϦ಺͕͍͍Αͱͷ͜ͱ ཧ༝͸Θ͔ͬͨɻ Ͱ΋ͳΜͰҰճ৹ࠪ௨ͬͨɾɾɾʁ

Slide 22

Slide 22 text

Apple৹ࠪ • App಺WebViewʹ੾Γସ͑ • iOS͢Μ͍͝ΧΫΧΫ͢Δ • Safariͩͱ͘͢͝αΫαΫಈ͍ͯΔ  • Android͍͢͝αΫαΫಈ͘ɾɾɾ εΫϩʔϧ͢ΒͰ͖ͳ͍݅

Slide 23

Slide 23 text

WebViewΧΫΧΫ໰୊ RN WebView Safari

Slide 24

Slide 24 text

WebViewΧΫΧΫ໰୊ • ݪҼʢݸਓతݟղʣ  • RNͷWebView͸ύϑΥʔϚϯε͕ѱ͍ • ձһొ࿥webϖʔδͷύϑΥʔϚϯε͕ѱ͍ • ্هͷʮѱ͍×ѱ͍ʯʹΑͬͯҾ͖ى͜͞Ε͍ͯΔ • WKWebViewͱUIWebViewͷҧ͍ʁʁ • iOS8ͷSafariͰ΋ಉ͡ݱ৅Λ࠶ݱ • iOS8 SafariʹRN WebView

Slide 25

Slide 25 text

WebViewΧΫΧΫ໰୊ • ରॲ  • ෳ਺ͷཁҼ͕͋Γͦ͏ͰݪҼ௥ٻ͸੾Γ্͛ɻ • ΞϓϦ༻ձһొ࿥ϖʔδΛ༻ҙͯ͠৐Γӽ͑Δ ΋͠ ؔ࿈͢Δ஌ݟΛ͓࣋ͪͷํ͕͍Ε͹ ڭ͍͑ͯͩ͘͞ʂʂ

Slide 26

Slide 26 text

·ͱΊ • Android͸ϨϯμϦϯά͕ऑ͍ • Android͸WebView͕ڧ͍ • iOS͸WebViewͷύϑΥʔϚϯε͕ѱ͍  ʢԿ͔͠Βରॲ๏͸ଘࡏͦ͠͏ʣ • Apple৹ࠪ͸ݸਓ͕ࠩ͋Δɻ • όʔδϣϯΞοϓ͸։ൃத΋͜·Ίʹ΍͍ͬͯͨ΄͏ ͕݈શ͔

Slide 27

Slide 27 text

͋Γ͕ͱ͏͍͟͝·ͨ͠