MonacaアプリをネイティブのUXに近づけるために

Monaca UG Conference 2019で発表したスライドです。
https://monacaug.mobi/conference-2019/

仮想スクロールとダークモードについては、以下記事で詳細をまとめています。併せてどうぞ。

仮想スクロール
https://qiita.com/kishisuke/items/d00862008fc90163f55b

ダークモード
https://qiita.com/kishisuke/items/e1fecb20d35693680421

Transcript

1. MonacaΞϓϦΛ ωΠςΟϒͷUXʹ͚ۙͮΔͨΊʹ Daisuke Kishino Monaca UG Conference 2019 2019.10.26
2. ࣗݾ঺հ • ϐʔϓϧιϑτ΢ΣΞגࣜձࣾ • ؛໺ େี(@kishisuke) • Ԭࢁݝ૔ෑࢢࡏॅ • ͜͜2೥͸BaaS@rakuza+MonacaΞϓϦͷ։ൃ (Vue.jsϝΠϯ) • ༗ࢤͰIoTσόΠεͷ։ൃ΋(RaspberryPi+JS+Python) • Monaca UG OKAYAMA΍ͬͯ·͢
3. MonacaΞϓϦͬͯ ஗͍ͬͯݴΘΕͨ͜ͱͳ͍Ͱ͔͢ʁ
4. ࣮ࡍͷͱ͜Ζ جຊతʹ UI/UX͸ωΠςΟϒ ʼ Monaca(Cordova/WebView) ͩͱࢥ͍·͢ɻ͘΍͍͚͠Ͳ
5. Monacaͷྑ͍ͱ͜Ζ • ։ൃίετ͕௿͍ͱ͜Ζʢ1ιʔεɺWebܥͷਓࡐଟ਺ʣ • αʔϏεͷ্ཱ͛࣌΍ɺ୔ࢁͷΞϓϦΛ։ൃ͢Δ࣌ʹ༗ར ߴ͍։ൃίετΛ͔͚ͯ ແཧ΍ΓωΠςΟϒͷUXΛ໨ࢦ͢ͱຊ຤స౗
6. ͦ͜Ͱ
7. MonacaͰ͖ΔൣғͰ BetterͳUI/UXΛ໨ࢦ͢ํ๏ ʹ͍ͭͯ࿩͠·͢ʂ
8. λʔήοτ • Monacaͷ։ൃΛ͍ͯͯ͠ɺ଎౓໘ͷνϡʔχ ϯάΛ͍ͨ͠ํ • MonacaΛಋೖ͍͚ͨ͠ͲɺUI/UXͷ৺഑͕͋ Δํ
9. ΞδΣϯμ • جຊฤ • جຊతͳςΫχοΫΛ঺հ • Ԡ༻ฤ • ωΠςΟϒΞϓϦͷτϨϯυΛ঺հ
10. جຊฤ جຊతͳςΫχοΫΛ঺հ
11. ͷલʹ
12. ͦ΋ͦ΋ྑ͍UXͬͯʁ • ࣗ෼ʢϢʔβʔʣͷࢥ͍௨Γʹಈ͔͘ʁ • ʮ஗͍ʯͰ͸ͳ͘ʮࢥ͍௨Γʹͳ͍ͬͯͳ͍ʯͨΊΠϥΠ ϥ͍ͯ͠Δʁ Ϣʔβʔ͕ظ଴͢Δಈ͖ʹͳΕ͹ྑ͍
13. Ͱ͸ຊ୊
14. ඇಉظॲཧ
15. ѱ͍ྫ
16. ɾϑΟʔυόοΫ͕ͳ͍ ɾϦϑϩʔ͕ෳ਺૸ͬͯΧΫπΫ ɾϢʔβʔͷૢ࡞ΛϒϩοΫ͍ͯ͠Δ ɾϩʔυ͕׬ྃ͢Δ·Ͱɺଞͷը໘Λ։ ͚ͳ͍
17. ྑ͍ྫ
18. ɾ͢΂ͯ̍ճͰදࣔ ɾϓϩάϨε͸ίϯςϯπ෦෼ʹදࣔ ɾߴ͞ΛݻఆʢϦϑϩʔͷ཈ࢭʣ
19. φϏήʔγϣϯ
20. ɾ͢΂ͯͷϖʔδ͕DOMπϦʔʹ࢒Δ ɾݟ͍͑ͯͳ͍ϖʔδ͸display: noneʹͳΔͨ ΊɺϨϯμʔπϦʔ͔Β͸࡟আ͞ΕΔ ɹରԠࡦ ɾແݶભҠ͠ͳ͍࢓༷ʹ͢Δ ɾ֤ը໘ͷDOMπϦʔͷαΠζΛݮΒ͢ʢԾ૝ε ΫϩʔϧͳͲʣ ɾΞϓϦશମͰ1ͭͷφϏήʔγϣϯʹ͢Δ
21. Ծ૝εΫϩʔϧ
22. Ұཡ͋Δ͋Δ • ͢΂ͯϨϯμϦϯάͯ͠͠·͏ • σʔλ͕਺ઍ݅͋ͬͯ… • 20݅ͣͭϖʔδϯά͠ͳ͕ΒಡΈࠐΉͷ΋ख • Ұ౓ಡΈࠐΉͱDOMπϦʔ্ʹ࢒ΔͷͰɺͲΜͲΜ஗͘ ͳΔ
23. Ծ૝εΫϩʔϧ(vue-virtual-scrollerͷྫ) • Viewport(ݟ͑Δ෦෼)ͷItemͷΈϨϯμϦϯά • εΫϩʔϧ࣌ʹͲͷItem͕Viewportʹೖ͔ͬͨΛܭࢉ • ViewportʹೖͬͨItemΛϨϯμϦϯά • Viewport͔Β֎ΕͨItemΛ࡟আ
24. Viewport(ݟ͑Δ෦෼) Item
25. Viewport͕ҠಈʢεΫ ϩʔϧ͞Εͨʣ Viewport֎ʹͳͬͨͨΊϨϯ μʔπϦʔ͔Β࡟আ Viewport಺ʹͳͬͨͨΊϨϯμ Ϧϯά ϨϯμʔπϦʔͷߴ͕͞มΘΔ ͱΧΫπΫ
26. Ϧετશମ (min-heightͰߴ͞Λݻఆ) Item͸transform: translateY ͰදࣔҐஔΛௐ੔ ʢදࣔҐஔ͕ݻఆʹͳΔͨΊɺ ΧΫ͔ͭͳ͍ʣ
27. Itemͷߴ͕͞Մมͷ৔߹ • Ұ୴ɺԾͷߴ͞ͰܭࢉΛߦ͍ɺItemͷϨϯμϦϯάޙʹߋ ৽͢Δ • Itemͷߴ͞͸Ωϟογϡ͢Δ
29. Ҿͬுͬͯߋ৽
30. • iOSͰҾͬுͬͯߋ৽ΛUIΛ࣮૷Λ ͢ΔͱͪΒͭ͘ • UIWebViewͷόά
31. ղܾࡦ WKWebViewΛ࢖͏
32. WKWebViewΛ࢖͏ • ϋοΫͰղܾͰ͖ͳ͍͜ͱ΋ͳ͍͕ɺਅͬ౰ͳखஈͰղܾ ͨ͠ํ͕Α͍ • 2019/8຤͔ΒɺUIWebViewΛϦϯΫ͍ͯ͠ΔΞϓϦΛApp Storeʹఏग़͢Δͱɺܯࠂ͕දࣔ͞ΕΔΑ͏ʹͳͬͨ
33. ଞʹ΋ؾΛ͚ͭΔ఺͸৭ʑ • ࣮ػͰࣗ෼Ͱ৮ͬͯҧ࿨ײ͕ͳ͍͔ɺࢥ͍௨Γʹͳ͍ͬͯ Δ͔ɺ։ൃऀࣗ਎Ͱ֬ೝ͢Δͷ͕ྑ͍ • ͜͏͍͏࣌͸MonacaͷσόοΨʔ௒ศར
34. Ԡ༻ฤ ωΠςΟϒΞϓϦͷτϨϯυΛ঺հ
35. ͷલʹ
36. ͳͥτϨϯυ͔ʁ ”4.2 ࠷௿ݶͷػೳ AppΛ࡞੒͢Δࡍ͸ɺWebαΠτΛ୯ʹ࠶ύοέʔδͨ͠Α͏ͳ΋ͷͰ͸ͳ ͘ɺ༏ΕͨػೳɺίϯςϯπɺUIΛ࡞੒͢ΔΑ͏ʹ͍ͯͩ͘͠͞ɻಛʹศརͰ ΋ɺϢχʔΫͰ΋ɺʮAppΒ͘͠ʯ΋ͳ͍৔߹ɺͦͷAppΛApp StoreͰఏڙ͢ Δ͜ͱ͸Ͱ͖·ͤΜɻ” App Store ReviewΨΠυϥΠϯΑΓ
37. ͳͥτϨϯυ͔ʁ • ʮAppΒ͘͠ʯͷج४͸೥ʑมΘ͍ͬͯΔ • τϨϯυʹ෇͍͍͔ͯͳ͍ͱɺʮAppΒ͘͠ʯແ͘ͳͬͯ ͠·͏Մೳੑ
38. Ͱ͸ຊ୊
39. Fluid Interfaces
40. ࢥߟͷԆ௕ͷ༷ʹײ͡Δ ΠϯλʔϑΣʔε
41. Redirectable
42. iPhone 8 (Not Redirectable) iPhone X (Redirectable)
43. Not Redirectable=ߟ͔͑ͯΒಈ͔͢ ߟ͑Δ ܾఆ͢Δ ಈ͔͢ ཭͢
44. Redirectable=ߟ͑ͳ͕Βಈ͔͢ ߟ͑Δ ܾఆ͢Δ ಈ͔͢ ཭͢ ਓ͸ߟ͑ͳ͕Βಈ͘ੜ͖෺ UI΋RedirectableͰ͋Ε͹ɺࢥߟͷԆ௕ͷ༷ʹײ͡Δ
45. ྫ)YouTubeϥΠΫͳUI • ಈը෦෼ΛԼʹҾͬுΔͱด͡Δ • λονΠϕϯτ(touchmove)ͰҠಈͨ͠෼ ͚ͩɺtransform: translateYͳͲͷελΠ ϧΛมߋ
46. YouTubeϥΠΫͳUIͷࣦഊஊ • ಈը෦෼ͷαΠζΛheight/widthͰมߋ͓ͯ͠ ΓɺϦϑϩʔ͞Εͯݹ͍୺຤ͩͱ͕ΧΫπΫ… • transformͱopacity͚ͩมߋ͢ΔΑ͏ʹͨ͠ • ಈը͸scaleͰॖখ • ಈըΑΓԼ͸translate: transformYͰҐஔΛ ௐ੔ • ΍Γ͗͢ײ
48. ϋʔϑϞʔμϧ • iOS13͔Βඪ४ͱͳͬͨUI • UIͷཁ݅తʹϨΠΞ΢τมߋ͕ෆཁ • ͜Ε͙Β͍Ͱ͋Ε͹ɺൺֱత؆୯ʹ ࣮૷Ͱ͖ΔͷͰɺ࠾༻ͯ͠΋ྑ͍͔ ΋
49. μʔΫϞʔυ
50. Ionicਪ঑ͷํ๏͕Αͦ͞͏ • ϝσΟΞΫΤϦʔ(prefers-color-scheme)ͷ஋ΛݩʹɺΫϥεͰϑΥʔϧόοΫ • ॳճ͸ϝσΟΞΫΤϦʔ͔ΒݱࡏͷςʔϚ(dark/light)Λऔಘ • ςʔϚมߋ࣌ͷΠϕϯτϋϯυϥΛొ࿥ͯ͠ɺมߋ࣌͸ΫϥεΛ੾Γସ͑ Δ • ݹ͍iOS΋ରԠͰ͖ΔɺखಈͰมߋ΋Ͱ͖Δ https://ionicframework.com/docs/theming/dark-mode
51. mounted() { this.$ons.ready(() => { // prefersDark.matches=trueͷ৔߹ɺμʔΫϞʔυ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)') // ݱࡏͷϞʔυʹมߋ this.changeTheme(prefersDark.matches) // ϞʔυͷมߋΛݕ஌ prefersDark.addListener((mediaQuery) => this.changeTheme(mediaQuery.matches)) }) }, methods: { changeTheme(dark) { // μʔΫϞʔυͷ৔߹ɺbodyʹ"dark"ΫϥεΛ෇༩ document.body.classList.toggle('dark', dark) } }
53. AndroidͷWebView ͩͱಈ͔ͳ͍
54. AndroidରԠ • Android͸WebViewࣗମ΍਌ϏϡʔͷςʔϚʹґଘ͢Δ • WebView͸WebSettings#setForceDarkͰมߋՄೳͳΑ͏ͩ ͕ɺมΘΒͳ͍ʢAndroidͷόάʁʣ • CordovaϓϥάΠϯΛ࡞੒ͯ͠ωΠςΟϒAPIΛࢀরͯ͠ղ ܾ
55. ղܾ͸͕ͨ࣌͠ظঘૣײ • ຊདྷWebͰͰ͖Δ͜ͱͳͷʹɺϓϥάΠϯԽ͕ඞཁ • ݱ࣌఺Ͱ͸ɺMonaca͸ରԠ͍ͯ͠ͳ͍ • Xcode11ɺAndroid API Ϩϕϧ 29͕ඞཁ
56. ͦΕͰ΋ಋೖ͢ΔϝϦοτΛߟ͑Δ ྫ͑͹…
57. ؍ޫΞϓϦ ࢖༻࣌ؒ͸୹͘ ಛఆͷ೔ʹ͔͠࢖༻͠ͳ͍ ࢖༻͕࣌ؒ௕͘ μʔΫϞʔυΛಋೖ͢Ε͹໨ʹ༏͍͠ Ϛετυϯ(SNS)ͷΞϓϦ ଟগίετ΍ϦεΫ͸͋ͬͯ ΋ಋೖ͢ΔϝϦοτ͸͋Δʂ
58. τϨϯυٕज़ͷಋೖ͸৻ॏʹ • ·ͣ͸αϯϓϧΛ࣮૷͢Δ • อकίετͱϝϦοτΛఱṝʹ͔͚ͯಋೖΛݕ౼ • CordovaϓϥάΠϯ͠ͳ͍ͱͰ͖ͳ͍ʂ͸ԫ৭৴߸
59. ·ͱΊ
60. ·ͱΊ • جຊΛԡ͑ͯ͞ɺϢʔβʔͷࢥ͍௨Γʹಈ͘Α͏ʹ͢Δ • ωΠςΟϒͷUI/UX͸ਐԽ͢ΔͷͰɺτϨϯυʹ෇͍͍ͯ͘͜ͱ΋ॏཁ • ͍͖ͳΓಋೖͰ͸ͳ͘ɺίετͱͷ݉Ͷ߹ΘͤΛߟྀͯ͠গͮͭ͠࠾ ༻͢Δ গ͠Ͱ΋MonacaΞϓϦͷUI/UXʹ໨Λ޲͚͍͚ͯͨͩΕ͹ʂ