Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

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

774a937b74096e82576b37678d00aeca?s=128

Daisuke Kishino

October 26, 2019
Tweet

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ͷߴ͞͸Ωϟογϡ͢Δ

  28. None
  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ͰҐஔΛ ௐ੔ • ΍Γ͗͢ײ
  47. None
  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) } }
  52. None
  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ʹ໨Λ޲͚͍͚ͯͨͩΕ͹ʂ

  61. None