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

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

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

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

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

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

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

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

"EBQUJWF6*

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

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

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

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

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

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/

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

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

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

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

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

ݱ࣮ͷ໰୊ʹ ޲͖߹͏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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) .. .. .. } }

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ͷ෯ͷ൒෼ʹ͢Δ

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

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

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) } .. .. } .. .. }

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Λ࡞Δ

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

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

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

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

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

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

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

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

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 } } }

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

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

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

·ͱΊ

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

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

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

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

ࢀߟࢿྉ 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

ऴΘΓ

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

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

More Decks by kazuhiro4949

Other Decks in Technology

Featured

Transcript