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

Yahoo! JAPAN MeetUp #2 (iOS) の時の発表資料です。
http://yj-meetup.connpass.com/event/38348/

Transcript

1. ೥݄೔  ,B[VIJSP
   )BZBTIJ ϢχόʔαϧΞϓϦ
   ͷཧ૝ͱݱ࣮
   :BIPP
   +"1"/
   .FFU6Q
   
2.  ࣗݾ঺հ ྛ
   ࿨߂
   ͸΍͠
   ͔ͣͻΖ
   HJUIVC
   !LB[VIJSP
   RJJUB
   !LB[VIJSP
   UXJUUFS
   ॾࣄ৘Ͱౚ݁த
   ˙
   ͓࢓ࣄ
   w:BIPPγϣοϐϯά
   wJ04ΞϓϦ
   wUW04ΞϓϦ
3. ΞϓϦͷϢχόʔαϧԽʹ͍ͭͯ
   ࿩Λ͠·͢
4. ޿͍ҙຯͰͷϢχόʔαϧΞϓϦͷ࿩ΑΓ͸ͪΐͬͱڱ͍ൣғΛѻ͍·͢  w࿩͞ͳ͍͜ͱ
   wࠃࡍԽ΍%ZOBNJD
   5ZQFͳͲ
   w࿩͢͜ͱ
   wը໘αΠζʹΑΔσβΠϯͷҧ͍
5. ೥
6. ̍୺຤ͷ-BOETDBQFɾ1PSUSBJUΛߟ͑Ε͹Α͔ͬͨ ग़య: https://developer.apple.com/videos/play/wwdc2016/222/
7. ೥
8. ͨ͘͞ΜͷαΠζΛߟ͑Δඞཁ͕͋Δ ग़య: https://developer.apple.com/videos/play/wwdc2016/222/
9. ը໘αΠζ͸
   ͲΜͲΜଟ༷Խ͍ͯ͠Δ
10. "EBQUJWF
    6*
11.  88%$
    
    l#VJMEJOH
    "EBQUJWF
    "QQT
    XJUI
    6*,JUz wJ04Ҏ߱ͷϞμϯͳ։ൃํ๏ ͱͯ͠ɺz"EBQUJWF
    6*zͷ֓೦ Λߏங
    wσόΠεɾճసɾϏϡʔαΠζ ͷଟ༷ੑʹڞ௨ͷΫϥεͰରԠ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/
12.  88%$
    
    l.BLJOH
    "QQT
    "EBQUJWF
    1BSU
    ɾ1BSUz w88%$
    ͷηογϣϯΛ ϕʔεʹz"EBQUJWF
    6*zΛ࣮ ΞϓϦ΁ద༻͢Δࡍͷ࿩
    w࣮ફతʹͲ͏͍͏ઃܭɾ࣮૷Λ ߦ͑͹Α͍͔Λѻ͍ͬͯΔ
    ग़య: https://developer.apple.com/videos/play/wwdc2016/222/
13. "EBQUJWF
    6*Λࢧ͑Δ
    6*,JUͷ࢓૊Έ
14. "EBQUJWF
    6*Λࢧ͑Δ6*,JUͷ࢓૊Έ  w"VUP-BZPVU
    J04ʙ
    w6*5SBJU$PMMFDUJPO
    4J[F
    $MBTT
    J04ʙ
    w6*4QMJU7JFX$POUSPMMFS
    6*1SFTFOUBUJPO$POUSPMMFS
    J04ʙ
    w6*4UBDL7JFX
    J04ʙ
15.  "VUP-BZPVU ग़య: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/ w 7JFXಉ࢜ͷ૬ରతͳִؒ΍αΠζͷൺ཰ Λઃఆ͢Δ͜ͱͰϨΠΞ΢τܾఆͤ͞Δ
    w Ұ൪֎ଆͷ΢Οϯυ΢αΠζʹԠͯࣗ͡ ಈతʹͦΕͧΕͷ7JFXͷҐஔ͕ܭࢉ͞Ε Δ
    w J04͔Β࢖͑Δ
16.  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/
17.  6*5SBJU$PMMFDUJPO wεΫϦʔϯαΠζɾσόΠεͷछྨɾ ղ૾౓ͳͲ͕7JFX$POUSPMMFSɾ 7JFX୯ҐͰ֨ೲ͞Εͨ΋ͷ
    wJ04Ҏ߱Ͱ͸ճసɾը໘෼ׂͳͲ Ͱ7JFXαΠζ͕มߋ͞ΕΔ৔߹͸ ͜ΕΛݟΔ
    ग़య: https://developer.apple.com/videos/play/wwdc2014/216/
18.  6*4QMJU7JFX$POUSPMMFS w "EBQUJWFͳ7JFX$POUSPMMFS
    w .BTUFS%FUBJMߏ੒ͷը໘Ͱ࢖༻Մೳ
    w 5SBJU
    $PMMFDUJPOͷύϥϝʔλʹΑͬͯ ݟͤํΛม͑ΒΕΔ
    w J04Ҏલ͸J1BEͷΈͰར༻Մ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/
19.  6*1SFTFOUBUJPO$POUSPMMFS w "EBQUJWFͳ1SFTFOUBUJPO
    w ϞʔμϧϏϡʔͷදࣔํ๏ΛΧελϚΠ ζͰ͖Δ
    w 5SBJU
    $PMMFDUJPOͷύϥϝʔλʹΑͬͯ ݟͤํΛม͑ΒΕΔ
    w J04ҎલͰ͸࢖͑ͳ͍ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/
20.  6*4UBDL7JFX w7JFXཁૉΛ౳ִؒͰฒ΂Δ͜ ͱ͕Ͱ͖ΔศརΫϥε
    w4J[F
    $MBTT୯ҐͰִؒ΍ฒ΂ ํΛઃఆͰ͖Δ
    wJ04Ҏ߱Ͱͳ͍ͱ࢖͑ͳ͍ ग़య: https://developer.apple.com/videos/play/wwdc2015/218/
21.  ͦΕΒͷ࢓૊ΈΛ߹Θͤͯ͜͏͍ͬͨΞϓϦΛ࡞Δ͜ͱ͕Ͱ͖Δ wͻͱͭͷ7JFX$POUSPMMFSΛ࢖ ͍ͳ͕Βҧͬͨը໘ΛݟͤΔ͜ ͱ͕Ͱ͖Δ
    w"QQMF͕ਪ঑͢Δzܕzʹ͸·ͬ ͨܗͰ"EBQUJWF
    6*͕࣮ݱͰ ͖Δ ग़య: https://developer.apple.com/videos/play/wwdc2014/216/
22. ݱ࣮ͷ໰୊ʹ
    ޲͖߹͏
23. ࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠ 
24. ࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠  wݹ͍04ͷαϙʔτ
    
25. ࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠  wݹ͍04ͷαϙʔτ
    
    wαʔϏεಠࣗͷσβΠϯ֓೦
26. ࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠  wݹ͍04ͷαϙʔτ
    
    wαʔϏεಠࣗͷσβΠϯ֓೦
    w։ൃϦιʔε΍εϐʔυͱͷ݉Ͷ߹͍
27. ࣮຿ͰؔΘΔΞϓϦ͸΋ͬͱ΍΍͍͜͠  wݹ͍04ͷαϙʔτ
    
    wαʔϏεಠࣗͷσβΠϯ֓೦
    w։ൃϦιʔε΍εϐʔυͱͷ݉Ͷ߹͍ ଟ༷ͳσόΠε΁࠷దԽ͍ͨ͠
    ؾ࣋ͪͱͷᷤ౻
28. αʔϏεͷࣄ৘ʹ߹Θͤͨ
    Ћͷ޻෉͕ඞཁ
29. ϙΠϯτ
    
    ߇͑ΊͳมߋͰ
    ຊ࣭తͳҧ͍ʹཹΊΔ
30. ೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ  J1IPOFͷσβΠϯ͸͜ΕͰ͍͍ͱͯ͠J1BE͸Ͳ͏͢Δʁʁ ΤϯδχΞ σβΠφ
31. ೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ  J1IPOFͷσβΠϯ͸͜ΕͰ͍͍ͱͯ͠J1BE͸Ͳ͏͢Δʁʁ ͏ʔΜʜͦ͏͍͑͹ʜ ΤϯδχΞ σβΠφ
32. ೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ  ͜ͷػೳ͸J1BE༻ͷσβΠϯ΋࣮૷Ͱ͖ͦ͏ʁ σΟϨΫλʔ ΤϯδχΞ
33. ೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ  ͜ͷػೳ͸J1BE༻ͷσβΠϯ΋࣮૷Ͱ͖ͦ͏ʁ ೲظ͕ۙ͘ɺ༨༟͕ແ͍ͷͰJ1BEͰ͸͜ͷػೳ࡟Γ·͢ʜ σΟϨΫλʔ ΤϯδχΞ
34. ೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ  ͦ͏͍͑͹J1BE΍ճస࣌ͷಈ࡞֬ೝ͢ΔͷΪϦΪϦ·Ͱ๨Εͯͨ ΤϯδχΞ
35. ೔ʑͷ։ൃۀ຿Ͱ͏͔ͬΓى͖ͯ͠·͍͕ͪͳ͜ͱ  ͋ΕʁJ1BE൛ʹ͜ͷػೳ͸ͳ͍ͱ͍͏࢓༷Ͱਖ਼ղͳΜ͚ͩͬʜ σΟϨΫλʔ
36. αʔϏεΛఏڙ͠ଓ͚ΒΕΔϓϩμΫτΛ໨ࢦ͢  wେݪଇͱͯ͠J1IPOFͱJ1BEͰίʔυΛڞ༗͢Δ
    wۃྗɺશσόΠεɾ04Ͱػೳ࢓༷Λ౷Ұ͠ɺݟͨ໨͚ͩม͑Δ
    wͱΓ͋͑ͣJ1IPOFͷීٴ୺຤Ͱૉૣ͘σβΠϯΛܾΊͯ͠·͏
    wେମͷέʔεͰ͸͔ͦ͜Β"VUPMBZPVUͰԣʹ৳͹ͨ͠Γɺ SFBEBCMF$POUFOU(VJEFͰϚʔδϯΛ࡞ͬͨΓ͢Δͷ͕ແ೉
37. αʔϏεΛఏڙ͠ଓ͚ΒΕΔϓϩμΫτΛ໨ࢦ͢  ͨͩ͠ ΤϯδχΞͱͯ͠ͷ ཧ૝͸ɺ
    σόΠεຖʹ࠷దԽ͞ΕͨϓϩμΫτΛఏڙ͍ͨ͠ wେݪଇͱͯ͠J1IPOFͱJ1BEͰίʔυΛڞ༗͢Δ
    wۃྗɺશσόΠεɾ04Ͱػೳ࢓༷Λ౷Ұ͠ɺݟͨ໨͚ͩม͑Δ
    wͱΓ͋͑ͣJ1IPOFͷීٴ୺຤Ͱૉૣ͘σβΠϯΛܾΊͯ͠·͏
    wେମͷέʔεͰ͸͔ͦ͜Β"VUPMBZPVUͰԣʹ৳͹ͨ͠Γɺ SFBEBCMF$POUFOU(VJEFͰϚʔδϯΛ࡞ͬͨΓ͢Δͷ͕ແ೉
38. ϙΠϯτ
    
    6*5BCMF7JFX
    ͔Β 6*$PMMFDUJPO7JFXͰͷ࣮૷΁มߋ
39. 6*$PMMFDUJPO7JFX  w 6*5BCMF7JFXʹൺ΂ͯϨΠΞ΢τͷ ࣗ༝౓͕ߴ͍
    w ෳࡶͳը໘Ληϧ Ϟδϡʔϧ ʹ෼཭ Ͱ͖Δ
    w J04͔Β࢖͑Δ
    4UBDL7JFXͩͱ J04Ҏ͔߱͠࢖͑ͳ͍
40. 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) .. .. .. } }
41. 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) .. .. .. } } J1IPOFͰ͋Ε͹͋Δ෯ΛऔΓɺJ1BEͰ͋Ε͹J1IPOFͷ෯ͷ൒෼ʹ͢Δ
42. 6*$PMMFDUJPO7JFX'MPX-BZPVUΛ࢖ͬͯɺEFMFHBUF಺Ͱ෼ذͤ͞Δ
    ॳڃ 
43. 6*$PMMFDUJPO7JFX'MPX-BZPVUΛ࢖ͬͯɺEFMFHBUF಺Ͱ෼ذͤ͞Δ
    ॳڃ  w J1IPOFͰ͸ηϧΛॎʹ ฒ΂Δ
    w J1BEͰ͸ηϧΛԣʹฒ ΂Δ
44. 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) } .. .. } .. .. }
45. 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) } .. .. } .. .. } J1IPOFͰ͋Ε͹ྻΛऔͬͯɺJ1BEͰ͋Ε͹ྻΛऔΔΑ͏ʹ
    -BZPVUΫϥε಺ͰFOVNΛ࡞Δ
46. 6*$PMMFDUJPO7JFX'MPX-BZPVUΛܧঝͯ͠ɺϨΠΞ΢τΫϥε಺Ͱ෼ذͤ͞Δ
    தڃ 
47. 6*$PMMFDUJPO7JFX'MPX-BZPVUΛܧঝͯ͠ɺϨΠΞ΢τΫϥε಺Ͱ෼ذͤ͞Δ
    தڃ  wJ1IPOFͰ͸ྻ
    wJ1BEͰ͸ྻ
48. J1IPOF༻ͱJ1BE༻ͷϨΠΞ΢τΫϥεΛ࡞ͬͯ੾Γସ͑Δ
    ্ڃ  class UICollectionViewController { override func viewDidLoad() { super.viewDidLoad() if traitCollection.userInterfaceIdiom == .Pad { collectionView?.collectionViewLayout = SectionSplitLayout(delegate: self) } else { collectionView?.collectionViewLayout = UICollectionViewFlowLayout() } } } ͜͜Ͱ͸ۮ਺ηΫγϣϯΛࠨ΁ح਺ηΫγϣϯΛӈ΁ฒ΂ΔϨΠΞ΢τΫϥεΛ࡞੒
    J1BEͷ͚࣌ͩͦͷಠ࣮ࣗ૷ͨ͠ϨΠΞ΢τΫϥεΛೖΕΔ
49. J1IPOF༻ͱJ1BE༻ͷϨΠΞ΢τΫϥεΛ࡞ͬͯ੾Γସ͑Δ
    ্ڃ  J1BE J1IPOF
50. J1IPOF༻ͱJ1BE༻ͷϨΠΞ΢τΫϥεΛ࡞ͬͯ੾Γସ͑Δ
    ্ڃ  J1BE J1IPOF wJ1IPOFͰ͸ηΫγϣϯΛ ॎʹฒ΂Δ
    wJ1BEͰ͸ۮ਺ηΫγϣϯ Λࠨɺح਺ηΫγϣϯΛ ӈʹ഑ஔ͢Δ
51. 6*$PMMFDUJPO7JFXΛ࢖͏͜ͱͰ  w7JFX΍7JFX$POUSPMMFS͔ΒϨΠΞ΢τͷΈΛ੾Γ཭ͤΔ
    wը໘ύʔπͷ૊Έ׵͑ʹΑͬͯɺʮը໘ͷ޿͞ͷҧ͍ʯʹ Ԡͨ͡࠷௿ݶͷมԽΛ༩͑Δࣄ͕Ͱ͖Δ
52. ϙΠϯτ
    7JFX΍7JFX$POUSPMMFS͔Β
    ը໘αΠζґଘͷίʔυΛ੾Γ཭͢
53.  88%$
    Ͱ΋ਪ঑͞Εͨํ๏ w ֤7JFX$POUSPMMFSຖʹz%FTJHO
    0CKFDU Λ༻ҙ͢Δ
    w TUSVDU΍FOVNΛޮՌతʹ࢖͏
    w 7JFX$POUSPMMFS಺Ͱ෼ذ͢ΔͷͰ͸ͳ ͘ɺz%FTJHO
    0CKFDUz಺΁ΧϓηϧԽ͢ Δ ग़య: https://developer.apple.com/videos/play/wwdc2016/233/
54. 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 } } }
55. 7JFX$POUSPMMFSͰ؅ཧ͞ΕΔը໘ͷϨΠΞ΢τύλʔϯ͕Θ͔Γ΍͘͢ͳΔ 
56. 7JFX$POUSPMMFSͰ؅ཧ͞ΕΔը໘ͷϨΠΞ΢τύλʔϯ͕Θ͔Γ΍͘͢ͳΔ  w ྫ͑͹ɺ͖ͬ͞ͷܕͷத ͰɺJ1IPOF͸ಁ໌ɾ J1BE͸ෆಁ໌ͷφϏήʔ γϣϯΛఆٛ͢Δɻ
    w 7JFX$POUSPMMFS಺ͷ৭ ΜͳՕॴͰҧ͍͕ൃੜ͢ Δ৔߹ʹ͸ɺ͜ͷΑ͏ʹ ੾Γग़͢ͱɺ࢓༷͕·ͱ ·ͬͯΘ͔Γ΍͍͢
57. γεςϜ্ͷఆٛͱσβΠφɾσΟϨΫλ͔Βݟͨఆٛͷҧ͍Λٵऩ  wྫ͑͹:BIPPγϣοϐϯάͰ͸σβΠφ಺ͰҎԼͷׅΓͰΞϓϦσ βΠϯΛ࡞͍ͬͯΔ
    ߋʹ04ͷόʔδϣϯʹΑͬͯ΋ҧ͏͜ͱ͕͋Δ
    wJ1IPOF
    wJ1BEॎ
    wJ1BEԣ
    w6*5SBJU$PMMFDUJPOΛ࢖͍ɺ4J[F
    $MBTTͱॎɾԣͷαΠζൺͰͭͷ ۠ผΛ͢Δɻͦͯͦ͠ͷҧ͍Λz%FTJHO
    0CKFDUzʹΧϓηϧԽ
58. ·ͱΊ
59. ·ͱΊ  wJ1IPOF
    J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢
60. ·ͱΊ  wJ1IPOF
    J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢
    wग़དྷΔݶΓ"QQMFͷෑ͍ͨϨʔϧʹ৐Δ
61. ·ͱΊ  wJ1IPOF
    J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢
    wग़དྷΔݶΓ"QQMFͷෑ͍ͨϨʔϧʹ৐Δ
    w͔ͦ͜Β֎ΕΔ৔߹͸ɺຊ࣭తͳมԽͷΈΛ࡞Δ
62. ·ͱΊ  wJ1IPOF
    J1BEͰಉ͡ػೳɾαʔϏεΛఏڙ͠ଓ͚Δ͜ͱΛ ໨ࢦ͢
    wग़དྷΔݶΓ"QQMFͷෑ͍ͨϨʔϧʹ৐Δ
    w͔ͦ͜Β֎ΕΔ৔߹͸ɺຊ࣭తͳมԽͷΈΛ࡞Δ
    w͋·Γಠࣗ࿏ઢͰڽΔͱকདྷ͔ͳΓۤ͠Ή
63. ࢀߟࢿྉ w "EBQUJWF
    6TFS
    *OUFSGBDFT
    
    "QQMF
    %FWFMPQFS
    w 88%$
    
    4FTTJPO
    
    #VJMEJOH
    "EBQUJWF
    "QQT
    XJUI
    6*,JU
    w 88%$
    
    4FTTJPO
    
    .BLJOH
    "QQT
    "EBQUJWF
    1BSU
    w 88%$
    
    4FTTJPO
    
    .BLJOH
    "QQT
    "EBQUJWF
    1BSU 
64. ऴΘΓ