「iOSエンジニアだし、Androidアプリも作れるでしょ？」

Transcript

1. ʮiOSΤϯδχΞͩ͠ɺ
   AndroidΞϓϦ΋
   ࡞ΕΔͰ͠ΐʁʯ
   iOSDC Japan 2020
   @akatsuki174
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. • ਢ౻ຘʢ@akatsuki174ʣ
   • iOS→AndroidΤϯδχΞ
   • גࣜձࣾTimersॴଐ
   • ࠷ۙiOS΋࢓ࣄͰ΍ͬͯΔ
   • Α͘࢖ͬͯΔ୺຤͸ɺiPhone Xͱ
   Pixel 3
   • iOSDC Japan 2020 core staff
   

   View Slide

4. ࠓ೔ͷ࿩
   

   View Slide

5. ໨࣍
   • iOS/AndroidͷUIͰҧ͏ͱ͜Ζ
   • Swiftͱൺֱͭͭ͠KotlinΛֶ΅͏
   • ActivityɺFragmentΛཧղ͠Α͏
   • Α͘࢖͏ListViewͱRecyclerViewΛ஌Ζ͏
   • ؆୯ͳUI͕૊ΊΔΑ͏ʹͳΖ͏
   • ࠷௿ݶͷσόοά͕Ͱ͖ΔΑ͏ʹͳΖ͏
   

   View Slide

6. ͳΜͱͳ͘Ͱ͖ΔΑ͏ʹͳΔ͜ͱ
   • iOS/Androidͷҧ͍͕Θ͔Δ
   • Kotlinίʔυ͕ಡΊΔΑ͏ʹͳΔ
   • AndroidΞϓϦͷ࡞Γํ͕Θ͔Δ
   • ෆ۩߹ͷಛఆ͕Ͱ͖ΔΑ͏ʹͳΔ
   

   View Slide

7. ࠓ೔ͷࢿྉ
   

   View Slide

8. ࠓ೔ͷࢿྉ
   • SpeakerDeckʹ্͛ͯ·͢
   • TwitterͰྲྀͯ͠·͢
   

   View Slide

9. iOS/AndroidͷUIͰ
   ҧ͏ͱ͜Ζ
   

   View Slide

10. ࣅͯΔ͚Ͳɺҧ͏
    • iOS/AndroidͰࣅͯΔ΋ͷʹ͍ͭͯઆ໌
    • ࣅͯͯ΋ࡉ෦͕ҟͳ͍ͬͯͨΓ͢ΔͷͰ҆қ
    ʹஔ͖׵͑ΒΕͳ͍͜ͱ΋
    

    View Slide

11. ը໘ભҠ
    • iOS
    • ϓογϡભҠ͕ج࣠ɻ֊૚Λ۷ΔΠϝʔδɻ
    • ঢ়گʹΑͬͯɺϞʔμϧભҠ
    • Android
    • ϖʔδΛੵΈॏͶΔΠϝʔδɻ
    

    View Slide

12. ໭ΔϘλϯͷ༗ແ
    • iOS
    • ΄΅ඞ͍͍ͣͭͯΔ
    • Android
    • ͍ͭͯͳ͍͜ͱ΋͋Δ
    • ୺຤ʹ໭ΔϘλϯ͕͋Δ
    

    View Slide

13. J04 "OESPJE
    

    View Slide

14. ը໘λΠτϧͷҐஔ
    • iOS
    • தԝ
    • ϥʔδλΠτϧͩͱࠨ୺
    • Android
    • ࠨ୺
    

    View Slide

15. J04 "OESPJE
    

    View Slide

16. ཁૉબ୒
    • iOS
    • ϦετɺυϥϜϩʔϧɺΞΫγϣϯγʔτ
    • Android
    • νΣοΫϘοΫεɺϥδΦϘλϯɺυϩοϓ
    μ΢ϯϦετɺϘτϜγʔτ
    

    View Slide

17. J04 "OESPJE
    

    View Slide

18. Ϧετͷ໼ҹ
    • iOS
    • Disclosure IndicatorΛ෇͚ͨΓ͢Δ
    • Android
    • ෇͚ͳ͍ํ͕Ұൠతʁ
    

    View Slide

19. J04 "OESPJE
    

    View Slide

20. ೔෇બ୒
    • iOS
    • υϥϜϩʔϧ
    • iOS 14͔Β͸ΧϨϯμʔܕ΋
    • Android
    • ΧϨϯμʔܕ
    

    View Slide

21. "OESPJE
    J04
    

    View Slide

22. ϑϩʔςΟϯάΞΫγϣϯϘλϯ
    • ͦͷը໘ͷओΞΫγϣϯϘλϯ
    • iOSͰ΋࢖͍ͬͯΔྫ΋ͪΒ΄Β
    

    View Slide

23. View Slide

24. γϟυ΢
    • ϚςϦΞϧσβΠϯʹӨͷষ͕͋Δ
    • Z࣠ɺಈ͖ͷํ޲Λ஌֮ͤ͞Δ
    • Өͷೱ͞͸ߴ͞ɺଞͱͷؔ܎ʹΑܾͬͯ·Δ
    

    View Slide

25. https://material.io/design/environment/light-shadows.html#shadows
    ᶃ
    ᶄ
    ᶅ
    

    View Slide

26. φϏήʔγϣϯυϩϫʔ
    • iOS
    • كʹͦΕͬΆ͍ͷ͕͋Δ
    • Android
    • ը໘ࠨ͔ΒεϥΠυͯ͠දࣔͰ͖Δϝχϡʔ
    

    View Slide

27. View Slide

28. ࢀߟʹͳΔαΠτ
    • consim
    • iOS/Androidͷը໘ΛൺֱͰ͖ΔαΠτ
    • https://consim.design/
    • ʮAndroid͸iOSͱಉ͡σβΠϯͰʂʯͱݴΘΕͨͱ͖ͷ
    ରԠҊ
    • https://qiita.com/ogapants/items/
    8a551ed3b16bcf0cc3ed
    

    View Slide

29. Swiftͱൺֱͭͭ͠
    KotlinΛֶ΅͏
    

    View Slide

30. Kotlinͱ͸
    • JetBrains͕։ൃͨ͠ΦϒδΣΫτࢦ޲ɹɹɹ
    ϓϩάϥϛϯάݴޠ
    • Google I/O 2017ͰAndroidνʔϜ͕KotlinΛ
    ެࣜʹαϙʔτ͢Δ͜ͱΛൃද
    • Javaͷࢿ࢈ͷଟ͘Λྲྀ༻Ͱ͖Δ
    • 1ͭͷϓϩδΣΫτʹJavaͱKotlinͷࠞࡏՄ
    

    View Slide

31. KotlinͱSwift
    • ΘΓͱॻ͖ํ͕ࣅͯΔ
    • جຊจ๏Ͱࣅ͍ͯΔ΋ͷΛ঺հ
    

    View Slide

32. ϓϩύςΟએݴ
    

    View Slide

33. Φϓγϣφϧ
    

    View Slide

34. Ξϯϥοϓ
    

    View Slide

35. ؔ਺
    

    View Slide

36. ഑ྻૢ࡞
    

    View Slide

37. Ϋϥε֦ு
    

    View Slide

38. ΠϯλʔϑΣʔεɺϓϩτίϧ
    

    View Slide

39. ͦͷଞ
    

    View Slide

40. ActivityɺFragmentΛ
    ཧղ͠Α͏
    

    View Slide

41. ActivityͱFragment
    • MVCͰݴ͏ͱ͜ΖͷControllerΈ͍ͨͳ΋ͷ
    • ϥΠϑαΠΫϧΛ͍࣋ͬͯΔ
    

    View Slide

42. Activityͱ͸
    • ௨ৗɺ1ͭͷActivityͰ1ͭͷը໘Λ࣮૷͢Δ
    • ≒ UIViewController
    

    View Slide

43. https://developer.android.com/guide/components/
    activities/activity-lifecycle?hl=ja
    

    View Slide

44. "DUJWJUZ
    ੜ੒࣌
    "DUJWJUZ͔Β཭ΕΑ
    ͏ͱ͍ͯ͠ΔɻӬଓԽॲཧ
    ͸͜͜Ͱɻ
    Ϣʔβ͕ΠϯλϥΫ
    γϣϯΛ࣮ࢪͰ͖Δঢ়ଶ
    "DUJWJUZ͕
    ݟ͑ͳ͘ͳͬͨͱ͖
    https://developer.android.com/guide/components/
    activities/activity-lifecycle?hl=ja
    

    View Slide

45. ActivityͷϨΠΞ΢τ
    • Activity#onCreate(Bundle)ͷதͰ
    Activity#setContentView(int)Λݺͼग़͢
    • int͸ϨΠΞ΢τϑΝΠϧͷid
    

    View Slide

46. Fragmentͱ͸
    • Activityʹ૊ΈࠐΜͰ࢖͏
    • 1ͭͷActivityʹෳ਺ͷFragmentΛ૊Έ߹Θͤɹ
    ΒΕΔ
    • ଟղ૾౓ରԠ࣌ʹศར
    • ෳ਺ͷActivityͰFragmentΛ࠶ར༻Ͱ͖Δ
    

    View Slide

47. https://developer.android.com/guide/
    components/fragments?hl=ja#Creating
    

    View Slide

48. https://developer.android.com/guide/
    components/fragments?hl=ja#Creating
    'SBHNFOU͕
    "DUJWJUZʹ
    ૊Έࠐ·Εͨঢ়ଶ
    'SBHNFOU
    ͕࣋ͭ
    7JFXΛߏங
    'SBHNFOU
    ͕"DUJWJUZ͔Β
    ੾Γ཭͞ΕΔ
    

    View Slide

49. https://developer.android.com/guide/components/fragments?hl=ja#Design
    

    View Slide

50. Α͘࢖͏ListViewͱ
    RecyclerViewΛ஌Ζ͏
    

    View Slide

51. ListViewͱ͸
    • Androidͷॳظ͔Β༻ҙ͞Ε͍ͯΔΫϥε
    • γϯϓϧͳҰཡදࣔ
    

    View Slide

52. ొ৔ਓ෺ͷΠϝʔδ
    %BUB4PVSDF "EBQUFS -JTU7JFX
    $VSTPS
    "SSBZ-JTU
    FUD
    

    View Slide

53. ListViewʢ࣮૷ʣ
    

    View Slide

54. ListViewʢϨΠΞ΢τʣ
    

    View Slide

55. RecyclerViewͱ͸
    • ListViewΛ֦ுͯ͠ॊೈੑΛ΋ͨͤͨվྑ൛
    • εϫΠϓɺD&DͳͲΛ͢ΔͳΒͬͪ͜
    • ϔομʔɺϑολʔͷ࢓૊Έ͸ଘࡏ͠ͳ͍
    • ۠੾Γઢ͸ࣗ෼Ͱ࣮૷͢Δඞཁ͕͋Δ
    

    View Slide

56. ొ৔ਓ෺ͷΠϝʔδ
    %BUB4PVSDF
    "EBQUFS
    7JFX)PMEFS
    3FDZDMFS7JFX
    -BZPVU.BOBHFS
    

    View Slide

57. RecyclerViewʢຊମʣ
    

    View Slide

58. RecyclerViewʢAdapterʣ
    

    View Slide

59. RecyclerViewʢViewHolderʣ
    

    View Slide

60. RecyclerViewʢϨΠΞ΢τʣ
    

    View Slide

61. RecyclerViewʢϨΠΞ΢τʣ
    

    View Slide

62. ؆୯ͳUI͕
    ૊ΊΔΑ͏ʹͳΖ͏
    

    View Slide

63. AndroidͷϨΠΞ΢τͷ࡞Γํ
    • xmlͰ௚઀هड़ɺ΋͘͠͸GUIͰ࡞੒
    ʢStoryboard, xibΈ͍ͨͳ͔Μ͡ʣ
    • ͍ͣΕʹͯ͠΋xml͕ੜ੒͞ΕΔ
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. LayoutsͱWidgets
    • LayoutͰ࿮Λࢦఆ͠ɺ෦඼ͱͳΔWidgetΛɹ
    ฒ΂͍ͯ͘
    • Widgetʹ͸Button, ImageView, TextView,
    ListViewͳͲ͕͋Δ
    

    View Slide

68. -BZPVU
    8JEHFU
    -BZPVU
    

    View Slide

69. ͞·͟·ͳϓϩύςΟ
    • LayoutɺWidget͸iOSͱಉ͡Α͏ʹɺ༷ʑͳɹ
    ઃఆΛՃ͑Δ͜ͱ͕Ͱ͖Δ
    • ΋ͪΖΜLayout/WidgetʹΑͬͯઃఆͰ͖Δɹ
    ϓϩύςΟ͸ҟͳΔ
    • ͜͜Ͱ͸୅දతͳ΋ͷΛ঺հ
    

    View Slide

70. id
    • ݴ༿௨Γɺࣝผࢠ
    • ಉҰϑΝΠϧ಺ͰҰҙͳ໊લʹͳ͍ͬͯΕ͹ɹ
    ྑ͍
    • xmlͰৼͬͨidΛݩʹKotlinϑΝΠϧ͔Βݺͼɹ
    ग़͕͠Ͱ͖Δ
    

    View Slide

71. View Slide

72. View Slide

73. width/height
    • ݴ༿௨Γɺ෯ͱߴ͞
    • `match_parent`ͩͱ਌ͷViewʹର͍ͯͬ͠ͺ͍
    ʹ޿͕Δ
    • `wrap_content`͸಺༰ʹ߹Θͤͯௐઅ͞ΕΔ
    • ΋ͪΖΜઈର஋ࢦఆ΋Մ
    

    View Slide

74. View Slide

75. ओͳLayoutͷछྨ
    • LinearLayout
    • ॎorԣ1ྻʹཁૉΛฒ΂Δ
    • UIStackViewͬΆ͍͔Μ͡
    • ConstraintLayout
    • ཁૉʹ੍໿Λ෇͚ɺҐஔΛ૬ରతʹܾΊΔ
    

    View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. ͓·͚ɿϓϨϏϡʔTips
    

    View Slide

82. ༨ஊɿJetpack Compose
    • Google I/O 2019Ͱൃද͞ΕͨɺUIπʔϧΩοτ
    • SwiftUIͷΑ͏ʹɺએݴతʹUIΛߏஙͰ͖Δ
    

    View Slide

83. https://developer.android.com/jetpack/compose?hl=ja
    

    View Slide

84. ࠷௿ݶͷσόοά͕
    Ͱ͖ΔΑ͏ʹͳΖ͏
    

    View Slide

85. 2௨Γ঺հ
    • ϒϨʔΫϙΠϯτΛுΔํ๏
    • Ϗϡʔ֊૚Λ೺Ѳ͢Δํ๏
    

    View Slide

86. ϒϨʔΫϙΠϯτͷுΓํ
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. ͜Μͳέʔε͋Γ·ͤΜ͔ʁ
    • RecyclerViewͷpositionͳͲɺมΘΓΏ͘஋Λ
    ೺Ѳ͍ͨ͠
    • ͍͍ͪͪϒϨʔΫϙΠϯτͰࢭ·ͬͯ΄͘͠ɹ
    ͳ͍
    • ίʔυʹLog.dॻ͍ͯ࠶Ϗϧυ͢Δͷ΋໘౗
    

    View Slide

91. ղܾͰ͖·͢
    • Evaluate and logΛ׆༻͢Ε͹࠶Ϗϧυͤͣɹ
    ϩάΛग़ྗͰ͖Δ
    • ίʔυ΋͍͡Δඞཁ͕ͳ͍
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

95. Ϗϡʔ֊૚ͷݟํ
    • Layout InspectorΛ࢖͏
    

    View Slide

96. View Slide

97. ·ͱΊ
    

    View Slide

98. ·ͱΊ
    • iOSͷੈքΛ஌͍ͬͯΕ͹Android΋ͦ͜·Ͱɹ
    ೉͘͠ͳ͍ʂʂʂ
    

    View Slide

99. એ఻
    

    View Slide

100. • αʔόʔαΠυΤϯδχΞ (PHP, Golang, AWS)
     • AndroidΤϯδχΞ (Kotlin)
     • iOSΤϯδχΞ (Swift)
     TimersͰ͸ݱࡏΤϯδχΞશ৬छ࠾༻தʂ
     ৄ͘͠͸”Timers”Ͱݕࡧ
     

     View Slide

101. ͝ਗ਼ௌ
     ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
     

     View Slide