Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔ͷ࿩

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ࠓ೔ͷࢿྉ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

iOS/AndroidͷUIͰ ҧ͏ͱ͜Ζ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

J04 "OESPJE

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

J04 "OESPJE

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

J04 "OESPJE

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

J04 "OESPJE

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

"OESPJE J04

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ϓϩύςΟએݴ

Slide 33

Slide 33 text

Φϓγϣφϧ

Slide 34

Slide 34 text

Ξϯϥοϓ

Slide 35

Slide 35 text

ؔ਺

Slide 36

Slide 36 text

഑ྻૢ࡞

Slide 37

Slide 37 text

Ϋϥε֦ு

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

ͦͷଞ

Slide 40

Slide 40 text

ActivityɺFragmentΛ ཧղ͠Α͏

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Α͘࢖͏ListViewͱ RecyclerViewΛ஌Ζ͏

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

ListViewʢ࣮૷ʣ

Slide 54

Slide 54 text

ListViewʢϨΠΞ΢τʣ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

RecyclerViewʢຊମʣ

Slide 58

Slide 58 text

RecyclerViewʢAdapterʣ

Slide 59

Slide 59 text

RecyclerViewʢViewHolderʣ

Slide 60

Slide 60 text

RecyclerViewʢϨΠΞ΢τʣ

Slide 61

Slide 61 text

RecyclerViewʢϨΠΞ΢τʣ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

-BZPVU 8JEHFU -BZPVU

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

͓·͚ɿϓϨϏϡʔTips

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

·ͱΊ

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

એ఻

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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