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

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

akatsuki174
September 20, 2020

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

2020/09/20 iOSDC Japan 2020 day 1

akatsuki174

September 20, 2020
Tweet

More Decks by akatsuki174

Other Decks in Programming

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