ユニバーサルアプリの理想と現実: Yahoo! JAPAN MeetUp #2

Slide 1

Slide 1 text

೥݄೔ ,B[VIJSP)BZBTIJ ϢχόʔαϧΞϓϦ ͷཧ૝ͱݱ࣮ :BIPP+"1"/.FFU6Q

Slide 2

Slide 2 text

ࣗݾ঺հ ྛ࿨߂ ͸΍͔ͣ͠ͻΖ HJUIVC!LB[VIJSP RJJUB!LB[VIJSP UXJUUFSॾࣄ৘Ͱౚ݁த ˙͓࢓ࣄ w:BIPPγϣοϐϯά wJ04ΞϓϦ wUW04ΞϓϦ

Slide 3

Slide 3 text

ΞϓϦͷϢχόʔαϧԽʹ͍ͭͯ ࿩Λ͠·͢

Slide 4

Slide 4 text

޿͍ҙຯͰͷϢχόʔαϧΞϓϦͷ࿩ΑΓ͸ͪΐͬͱڱ͍ൣғΛѻ͍·͢ w࿩͞ͳ͍͜ͱ wࠃࡍԽ΍%ZOBNJD5ZQFͳͲ w࿩͢͜ͱ wը໘αΠζʹΑΔσβΠϯͷҧ͍

Slide 5

Slide 5 text

೥

Slide 6

Slide 6 text

̍୺຤ͷ-BOETDBQFɾ1PSUSBJUΛߟ͑Ε͹Α͔ͬͨ ग़య: https://developer.apple.com/videos/play/wwdc2016/222/

Slide 7

Slide 7 text

೥

Slide 8

Slide 8 text

ͨ͘͞ΜͷαΠζΛߟ͑Δඞཁ͕͋Δ ग़య: https://developer.apple.com/videos/play/wwdc2016/222/

Slide 9

Slide 9 text

ը໘αΠζ͸ ͲΜͲΜଟ༷Խ͍ͯ͠Δ

Slide 10

Slide 10 text

"EBQUJWF6*

Slide 11

Slide 11 text

88%$l#VJMEJOH"EBQUJWF"QQTXJUI6*,JUz wJ04Ҏ߱ͷϞμϯͳ։ൃํ๏ ͱͯ͠ɺz"EBQUJWF6*zͷ֓೦ Λߏங wσόΠεɾճసɾϏϡʔαΠζ ͷଟ༷ੑʹڞ௨ͷΫϥεͰରԠ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/

Slide 12

Slide 12 text

88%$l.BLJOH"QQT"EBQUJWF 1BSUɾ1BSUz w88%$ͷηογϣϯΛ ϕʔεʹz"EBQUJWF6*zΛ࣮ ΞϓϦ΁ద༻͢Δࡍͷ࿩ w࣮ફతʹͲ͏͍͏ઃܭɾ࣮૷Λ ߦ͑͹Α͍͔Λѻ͍ͬͯΔ ग़య: https://developer.apple.com/videos/play/wwdc2016/222/

Slide 13

Slide 13 text

"EBQUJWF6*Λࢧ͑Δ 6*,JUͷ࢓૊Έ

Slide 14

Slide 14 text

"EBQUJWF6*Λࢧ͑Δ6*,JUͷ࢓૊Έ w"VUP-BZPVU J04ʙ w6*5SBJU$PMMFDUJPO 4J[F$MBTT J04ʙ w6*4QMJU7JFX$POUSPMMFS 6*1SFTFOUBUJPO$POUSPMMFS J04ʙ w6*4UBDL7JFX J04ʙ

Slide 15

Slide 15 text

"VUP-BZPVU ग़య: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/ w 7JFXಉ࢜ͷ૬ରతͳִؒ΍αΠζͷൺ཰ Λઃఆ͢Δ͜ͱͰϨΠΞ΢τܾఆͤ͞Δ w Ұ൪֎ଆͷ΢Οϯυ΢αΠζʹԠͯࣗ͡ ಈతʹͦΕͧΕͷ7JFXͷҐஔ͕ܭࢉ͞Ε Δ w J04͔Β࢖͑Δ

Slide 16

Slide 16 text

4J[F$MBTT w εΫϦʔϯαΠζͷҧ͍Λந৅Խͨ͠΋ ͷ w ෯ͱߴ͞ͷαΠζʹ3FHVMBS $PNQBDU ͷछྨͷΧςΰϦΛఆٛ w 4UPSZCPBSE΍"TTFUT$BUBMPHͰ4J[F $MBTT୯Ґͷมߋ͕Մೳ w J04ҎલͰ͸࢖͑ͳ͍ ग़య: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITraitCollection_ClassReference/

Slide 17

Slide 17 text

6*5SBJU$PMMFDUJPO wεΫϦʔϯαΠζɾσόΠεͷछྨɾ ղ૾౓ͳͲ͕7JFX$POUSPMMFSɾ 7JFX୯ҐͰ֨ೲ͞Εͨ΋ͷ wJ04Ҏ߱Ͱ͸ճసɾը໘෼ׂͳͲ Ͱ7JFXαΠζ͕มߋ͞ΕΔ৔߹͸ ͜ΕΛݟΔ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/

Slide 18

Slide 18 text

6*4QMJU7JFX$POUSPMMFS w "EBQUJWFͳ7JFX$POUSPMMFS w .BTUFS%FUBJMߏ੒ͷը໘Ͱ࢖༻Մೳ w 5SBJU$PMMFDUJPOͷύϥϝʔλʹΑͬͯ ݟͤํΛม͑ΒΕΔ w J04Ҏલ͸J1BEͷΈͰར༻Մ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/

Slide 19

Slide 19 text

6*1SFTFOUBUJPO$POUSPMMFS w "EBQUJWFͳ1SFTFOUBUJPO w ϞʔμϧϏϡʔͷදࣔํ๏ΛΧελϚΠ ζͰ͖Δ w 5SBJU$PMMFDUJPOͷύϥϝʔλʹΑͬͯ ݟͤํΛม͑ΒΕΔ w J04ҎલͰ͸࢖͑ͳ͍ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/

Slide 20

Slide 20 text

6*4UBDL7JFX w7JFXཁૉΛ౳ִؒͰฒ΂Δ͜ ͱ͕Ͱ͖ΔศརΫϥε w4J[F$MBTT୯ҐͰִؒ΍ฒ΂ ํΛઃఆͰ͖Δ wJ04Ҏ߱Ͱͳ͍ͱ࢖͑ͳ͍ ग़య: https://developer.apple.com/videos/play/wwdc2015/218/

Slide 21

Slide 21 text

ͦΕΒͷ࢓૊ΈΛ߹Θͤͯ͜͏͍ͬͨΞϓϦΛ࡞Δ͜ͱ͕Ͱ͖Δ wͻͱͭͷ7JFX$POUSPMMFSΛ࢖ ͍ͳ͕Βҧͬͨը໘ΛݟͤΔ͜ ͱ͕Ͱ͖Δ w"QQMF͕ਪ঑͢Δzܕzʹ͸·ͬ ͨܗͰ"EBQUJWF6*͕࣮ݱͰ ͖Δ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/

Slide 22

Slide 22 text

ݱ࣮ͷ໰୊ʹ ޲͖߹͏

Slide 23

Slide 23 text

࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠

Slide 24

Slide 24 text

࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠ wݹ͍04ͷαϙʔτ

Slide 25

Slide 25 text

࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠ wݹ͍04ͷαϙʔτ wαʔϏεಠࣗͷσβΠϯ֓೦

Slide 26

Slide 26 text

࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠ wݹ͍04ͷαϙʔτ wαʔϏεಠࣗͷσβΠϯ֓೦ w։ൃϦιʔε΍εϐʔυͱͷ݉Ͷ߹͍

Slide 27

Slide 27 text

࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠ wݹ͍04ͷαϙʔτ wαʔϏεಠࣗͷσβΠϯ֓೦ w։ൃϦιʔε΍εϐʔυͱͷ݉Ͷ߹͍ ଟ༷ͳσόΠε΁࠷దԽ͍ͨ͠ ؾ࣋ͪͱͷᷤ౻

Slide 28

Slide 28 text

αʔϏεͷࣄ৘ʹ߹Θͤͨ Ћͷ޻෉͕ඞཁ

Slide 29

Slide 29 text

ϙΠϯτ ߇͑ΊͳมߋͰ ຊ࣭తͳҧ͍ʹཹΊΔ

Slide 30

Slide 30 text

೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ J1IPOFͷσβΠϯ͸͜ΕͰ͍͍ͱͯ͠J1BE͸Ͳ͏͢Δʁʁ ΤϯδχΞ σβΠφ

Slide 31

Slide 31 text

೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ J1IPOFͷσβΠϯ͸͜ΕͰ͍͍ͱͯ͠J1BE͸Ͳ͏͢Δʁʁ ͏ʔΜʜͦ͏͍͑͹ʜ ΤϯδχΞ σβΠφ

Slide 32

Slide 32 text

೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ ͜ͷػೳ͸J1BE༻ͷσβΠϯ΋࣮૷Ͱ͖ͦ͏ʁ σΟϨΫλʔ ΤϯδχΞ

Slide 33

Slide 33 text

೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ ͜ͷػೳ͸J1BE༻ͷσβΠϯ΋࣮૷Ͱ͖ͦ͏ʁ ೲظ͕ۙ͘ɺ༨༟͕ແ͍ͷͰJ1BEͰ͸͜ͷػೳ࡟Γ·͢ʜ σΟϨΫλʔ ΤϯδχΞ

Slide 34

Slide 34 text

೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ ͦ͏͍͑͹J1BE΍ճస࣌ͷಈ࡞֬ೝ͢ΔͷΪϦΪϦ·Ͱ๨Εͯͨ ΤϯδχΞ

Slide 35

Slide 35 text

೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ ͋ΕʁJ1BE൛ʹ͜ͷػೳ͸ͳ͍ͱ͍͏࢓༷Ͱਖ਼ղͳΜ͚ͩͬʜ σΟϨΫλʔ

Slide 36

Slide 36 text

αʔϏεΛఏڙ͠ଓ͚ΒΕΔϓϩμΫτΛ໨ࢦ͢ wେݪଇͱͯ͠J1IPOFͱJ1BEͰίʔυΛڞ༗͢Δ wۃྗɺશσόΠεɾ04Ͱػೳ࢓༷Λ౷Ұ͠ɺݟͨ໨͚ͩม͑Δ wͱΓ͋͑ͣJ1IPOFͷීٴ୺຤Ͱૉૣ͘σβΠϯΛܾΊͯ͠·͏ wେମͷέʔεͰ͸͔ͦ͜Β"VUPMBZPVUͰԣʹ৳͹ͨ͠Γɺ SFBEBCMF$POUFOU(VJEFͰϚʔδϯΛ࡞ͬͨΓ͢Δͷ͕ແ೉

Slide 37

Slide 37 text

αʔϏεΛఏڙ͠ଓ͚ΒΕΔϓϩμΫτΛ໨ࢦ͢ ͨͩ͠ ΤϯδχΞͱͯ͠ͷ ཧ૝͸ɺ σόΠεຖʹ࠷దԽ͞ΕͨϓϩμΫτΛఏڙ͍ͨ͠ wେݪଇͱͯ͠J1IPOFͱJ1BEͰίʔυΛڞ༗͢Δ wۃྗɺશσόΠεɾ04Ͱػೳ࢓༷Λ౷Ұ͠ɺݟͨ໨͚ͩม͑Δ wͱΓ͋͑ͣJ1IPOFͷීٴ୺຤Ͱૉૣ͘σβΠϯΛܾΊͯ͠·͏ wେମͷέʔεͰ͸͔ͦ͜Β"VUPMBZPVUͰԣʹ৳͹ͨ͠Γɺ SFBEBCMF$POUFOU(VJEFͰϚʔδϯΛ࡞ͬͨΓ͢Δͷ͕ແ೉

Slide 38

Slide 38 text

ϙΠϯτ 6*5BCMF7JFX͔Β 6*$PMMFDUJPO7JFXͰͷ࣮૷΁มߋ

Slide 39

Slide 39 text

6*$PMMFDUJPO7JFX w 6*5BCMF7JFXʹൺ΂ͯϨΠΞ΢τͷ ࣗ༝౓͕ߴ͍ w ෳࡶͳը໘Ληϧ Ϟδϡʔϧ ʹ෼཭ Ͱ͖Δ w J04͔Β࢖͑Δ 4UBDL7JFXͩͱ J04Ҏ͔߱͠࢖͑ͳ͍

Slide 40

Slide 40 text

6*$PMMFDUJPO7JFX'MPX-BZPVUΛ࢖ͬͯɺEFMFHBUF಺Ͱ෼ذͤ͞Δ ॳڃ func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { switch (indexPath.section, indexPath.item) { case (0, 0) where traitCollection.userInterfaceIdiom == .Phone: return CGSize(width: aWidth, height: aHeight) case (0, 0) where traitCollection.userInterfaceIdiom == .Pad: return CGSize(width: aWidth / 2, height: aHeight) .. .. .. } }

Slide 41

Slide 41 text

Slide 42

Slide 42 text

6*$PMMFDUJPO7JFX'MPX-BZPVUΛ࢖ͬͯɺEFMFHBUF಺Ͱ෼ذͤ͞Δ ॳڃ

Slide 43

Slide 43 text

6*$PMMFDUJPO7JFX'MPX-BZPVUΛ࢖ͬͯɺEFMFHBUF಺Ͱ෼ذͤ͞Δ ॳڃ w J1IPOFͰ͸ηϧΛॎʹ ฒ΂Δ w J1BEͰ͸ηϧΛԣʹฒ ΂Δ

Slide 44

Slide 44 text

6*$PMMFDUJPO7JFX'MPX-BZPVUΛܧঝͯ͠ɺϨΠΞ΢τΫϥε಺Ͱ෼ذͤ͞Δ தڃ class GridLayout: UICollectionViewFlowLayout { enum DisplayMode { case TwoColumns = 2 case FourColumns = 4 func estimatedWidth(viewWidth: CGFloat, space: CGFloat) -> CGFloat { return CGFloat(Int(viewWidth - space) /rawValue) } .. .. } .. .. }

Slide 45

Slide 45 text

Slide 46

Slide 46 text

6*$PMMFDUJPO7JFX'MPX-BZPVUΛܧঝͯ͠ɺϨΠΞ΢τΫϥε಺Ͱ෼ذͤ͞Δ தڃ

Slide 47

Slide 47 text

6*$PMMFDUJPO7JFX'MPX-BZPVUΛܧঝͯ͠ɺϨΠΞ΢τΫϥε಺Ͱ෼ذͤ͞Δ தڃ wJ1IPOFͰ͸ྻ wJ1BEͰ͸ྻ

Slide 48

Slide 48 text

J1IPOF༻ͱJ1BE༻ͷϨΠΞ΢τΫϥεΛ࡞ͬͯ੾Γସ͑Δ ্ڃ class UICollectionViewController { override func viewDidLoad() { super.viewDidLoad() if traitCollection.userInterfaceIdiom == .Pad { collectionView?.collectionViewLayout = SectionSplitLayout(delegate: self) } else { collectionView?.collectionViewLayout = UICollectionViewFlowLayout() } } } ͜͜Ͱ͸ۮ਺ηΫγϣϯΛࠨ΁ح਺ηΫγϣϯΛӈ΁ฒ΂ΔϨΠΞ΢τΫϥεΛ࡞੒ J1BEͷ͚࣌ͩͦͷಠ࣮ࣗ૷ͨ͠ϨΠΞ΢τΫϥεΛೖΕΔ

Slide 49

Slide 49 text

J1IPOF༻ͱJ1BE༻ͷϨΠΞ΢τΫϥεΛ࡞ͬͯ੾Γସ͑Δ ্ڃ J1BE J1IPOF

Slide 50

Slide 50 text

J1IPOF༻ͱJ1BE༻ͷϨΠΞ΢τΫϥεΛ࡞ͬͯ੾Γସ͑Δ ্ڃ J1BE J1IPOF wJ1IPOFͰ͸ηΫγϣϯΛ ॎʹฒ΂Δ wJ1BEͰ͸ۮ਺ηΫγϣϯ Λࠨɺح਺ηΫγϣϯΛ ӈʹ഑ஔ͢Δ

Slide 51

Slide 51 text

6*$PMMFDUJPO7JFXΛ࢖͏͜ͱͰ w7JFX΍7JFX$POUSPMMFS͔ΒϨΠΞ΢τͷΈΛ੾Γ཭ͤΔ wը໘ύʔπͷ૊Έ׵͑ʹΑͬͯɺʮը໘ͷ޿͞ͷҧ͍ʯʹ Ԡͨ͡࠷௿ݶͷมԽΛ༩͑Δࣄ͕Ͱ͖Δ

Slide 52

Slide 52 text

ϙΠϯτ 7JFX΍7JFX$POUSPMMFS͔Β ը໘αΠζґଘͷίʔυΛ੾Γ཭͢

Slide 53

Slide 53 text

88%$Ͱ΋ਪ঑͞Εͨํ๏ w ֤7JFX$POUSPMMFSຖʹz%FTJHO0CKFDU Λ༻ҙ͢Δ w TUSVDU΍FOVNΛޮՌతʹ࢖͏ w 7JFX$POUSPMMFS಺Ͱ෼ذ͢ΔͷͰ͸ͳ ͘ɺz%FTJHO0CKFDUz಺΁ΧϓηϧԽ͢ Δ ग़య: https://developer.apple.com/videos/play/wwdc2016/233/

Slide 54

Slide 54 text

7JFX$POUSPMMFS͔Βʮ΋͠J1BEͳΒʯͱ͍͏෼ذΛ੾Γ཭͢ enum LayoutContext { case DefaultScreen case WideScreen init(traitCollection: UITraitCollection, size: CGSize) { if traitCollection.horizontalSizeClass == .Regular && size.width >= size.height { self = .WideScreen } else { self = .DefaultScreen } } var navigationBarTranslucent: Bool { switch self { case .DefaultScreen: return true case .WideScreen: return false } } }

Slide 55

Slide 55 text

7JFX$POUSPMMFSͰ؅ཧ͞ΕΔը໘ͷϨΠΞ΢τύλʔϯ͕Θ͔Γ΍͘͢ͳΔ

Slide 56

Slide 56 text

7JFX$POUSPMMFSͰ؅ཧ͞ΕΔը໘ͷϨΠΞ΢τύλʔϯ͕Θ͔Γ΍͘͢ͳΔ w ྫ͑͹ɺ͖ͬ͞ͷܕͷத ͰɺJ1IPOF͸ಁ໌ɾ J1BE͸ෆಁ໌ͷφϏήʔ γϣϯΛఆٛ͢Δɻ w 7JFX$POUSPMMFS಺ͷ৭ ΜͳՕॴͰҧ͍͕ൃੜ͢ Δ৔߹ʹ͸ɺ͜ͷΑ͏ʹ ੾Γग़͢ͱɺ࢓༷͕·ͱ ·ͬͯΘ͔Γ΍͍͢

Slide 57

Slide 57 text

γεςϜ্ͷఆٛͱσβΠφɾσΟϨΫλ͔Βݟͨఆٛͷҧ͍Λٵऩ wྫ͑͹:BIPPγϣοϐϯάͰ͸σβΠφ಺ͰҎԼͷׅΓͰΞϓϦσ βΠϯΛ࡞͍ͬͯΔ ߋʹ04ͷόʔδϣϯʹΑͬͯ΋ҧ͏͜ͱ͕͋Δ wJ1IPOF wJ1BEॎ wJ1BEԣ w6*5SBJU$PMMFDUJPOΛ࢖͍ɺ4J[F$MBTTͱॎɾԣͷαΠζൺͰͭͷ ۠ผΛ͢Δɻͦͯͦ͠ͷҧ͍Λz%FTJHO0CKFDUzʹΧϓηϧԽ

Slide 58

Slide 58 text

·ͱΊ

Slide 59

Slide 59 text

·ͱΊ wJ1IPOF J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢

Slide 60

Slide 60 text

·ͱΊ wJ1IPOF J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢ wग़དྷΔݶΓ"QQMFͷෑ͍ͨϨʔϧʹ৐Δ

Slide 61

Slide 61 text

·ͱΊ wJ1IPOF J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢ wग़དྷΔݶΓ"QQMFͷෑ͍ͨϨʔϧʹ৐Δ w͔ͦ͜Β֎ΕΔ৔߹͸ɺຊ࣭తͳมԽͷΈΛ࡞Δ

Slide 62

Slide 62 text

·ͱΊ wJ1IPOF J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢ wग़དྷΔݶΓ"QQMFͷෑ͍ͨϨʔϧʹ৐Δ w͔ͦ͜Β֎ΕΔ৔߹͸ɺຊ࣭తͳมԽͷΈΛ࡞Δ w͋·Γಠࣗ࿏ઢͰڽΔͱকདྷ͔ͳΓۤ͠Ή

Slide 63

Slide 63 text

ࢀߟࢿྉ w "EBQUJWF6TFS*OUFSGBDFT"QQMF%FWFMPQFS w 88%$4FTTJPO#VJMEJOH"EBQUJWF"QQTXJUI6*,JU w 88%$4FTTJPO.BLJOH"QQT"EBQUJWF 1BSU w 88%$4FTTJPO.BLJOH"QQT"EBQUJWF 1BSU

Slide 64

Slide 64 text

ऴΘΓ