日経電子版でApp内課金を導入した話 / Nikkei uses In-App Purchase

Transcript

1. ೔ܦిࢠ൛Ͱ App ಺՝ۚΛಋೖͨ͠࿩
   ழࣂ େࢤɹ೔ຊܦࡁ৽ฉࣾ
   Otemachi.swift #3
   

   View Slide

2. !2
   About me
   ழࣂ େࢤʢ͍͔͍ ͍ͨ͠ʣ
   ೔ຊܦࡁ৽ฉࣾॴଐͷΤϯδχΞ

   OKRϦςϯγϣϯ୲౰
   ͍ͭͬͯ͘Δ΋ͷ

   ɹiPhone ͷ೔ܦిࢠ൛ΞϓϦ

   ɹiPhone / iPad ͷࢴ໘ϏϡʔΞʔΞϓϦ

   ɹΞϓϦͷόοΫΤϯυܥ (w/αʔόʔϨε)
   

   View Slide

3. ೔ܦిࢠ൛ͷ App ʹ͍ͭͯ
   !3
   

   View Slide

4. !4
   ೔ܦిࢠ൛ ࢴ໘ϏϡʔΞʔ
   

   View Slide

5. !5
   ೔ܦిࢠ൛ ࢴ໘ϏϡʔΞʔ
   App ಺՝ۚΛಋೖ
   

   View Slide

6. !6
   ೔ܦిࢠ൛Λߪಡ͢Δํ๏ (- 2018/6/6)
   WebαΠτʢΫϨδοτΧʔυʣ
   ※ ओཁͳ΋ͷͷΈ
   

   View Slide

7. View Slide

8. ࣗࣾ՝ۚʹͭͳ͕ΔಋઢΛ̍ϛϦͰ΋දࣔ͢ΔͱϦδΣΫτ

   WebαΠτʹ༠ಋ͢ΔจݴΛॻ͍ͯ΋ϦδΣΫτ
   ؾʹೖͬͯ΋Βͬͯ΋ŊΞϓϦ͔Β͸ߪಡͯ͠΋Β͑ͳ͍ঢ়گ
   

   View Slide

9. App ಺՝ۚͯ͠·͔͢ʁ
   !9
   

   View Slide

10. App ಺՝ۚͱ͸
    !10
    

    View Slide

11. !11
    ”App ಺՝ۚͱ͸ɺiOS σόΠε΍ίϯϐϡʔλ্ͷ
    App ͷதͰ௥Ճͷίϯςϯπ΍ఆظߪಡίϯςϯπΛ
    ߪೖͰ͖Δ͘͠ΈͰ͢ɻ”

    https://support.apple.com/ja-jp/HT202023
    

    View Slide

12. !12
    ࠷ۙͷχϡʔε
    Netflix tests a bypass of iTunes billing in 33 markets
    ― Tech Crunch 2018/8/21 https://techcrunch.com/2018/08/21/netflix-itunes-2/
    Apple and Google Face Growing Revolt Over App Store ‘Tax’
    ― Tech Crunch 2018/8/22 https://www.bloomberg.com/news/articles/2018-08-22/apple-and-google-face-growing-
    revolt-over-app-store-tax
    Here's proof that a big source of Apple's App Store growth tanked, probably
    thanks to Netflixɹ
    ― Business Insider 2019/4/6 https://www.businessinsider.com/morgan-stanley-proof-netflix-tanked-source-apple-
    app-store-growth-2019-4
    

    View Slide

13. !13
    ೔ܦిࢠ൛Λߪಡ͢Δํ๏ (2018/6/7 -)
    WebαΠτʢΫϨδοτΧʔυʣ
    Google Play
    ※ ओཁͳ΋ͷͷΈ
    

    View Slide

14. !14
    Google Play Λࢼݧಋೖ (Android ൛)
    KPI ͸ CVR 

    ɹCVR: ͓ࢼ͠ظؒऴྃޙɺ՝ۚ͢ΔϢʔβʔͷׂ߹

    ɹ͜ΕΛୡ੒Ͱ͖Ε͹ɺख਺ྉ෼Λ૬ࡴͰ͖Δ
    

    View Slide

15. https://prtimes.jp/main/html/rd/p/000000081.000011115.html
    

    View Slide

16. !16
    Google Play Λࢼݧಋೖ (Android ൛)
    KPI ͸ CVR 

    ɹCVR: ͓ࢼ͠ظؒऴྃޙɺ՝ۚ͢ΔϢʔβʔͷׂ߹

    ɹ͜ΕΛୡ੒Ͱ͖Ε͹ɺख਺ྉ෼Λ૬ࡴͰ͖Δ
    → ੒ޭ
    → App Store Ͱ΋࣮ࢪ΁
    

    View Slide

17. !17
    ཪ൪૊঺հ
    https://speakerdeck.com/ymnder/yun-yong-karaxue-buplay-billing-library
    

    View Slide

18. !18
    ೔ܦిࢠ൛Λߪಡ͢Δํ๏ (2019/2/26 -)
    WebαΠτʢΫϨδοτΧʔυʣ
    Google Play
    App Store
    ※ ओཁͳ΋ͷͷΈ
    

    View Slide

19. !19
    App ಺՝ۚ΁ͷҹ৅ (Ϣʔβʔ)
    ؆୯ʹɺख୹ʹܖ໿Մೳ

    ɹΫϨδοτΧʔυ΍ݸਓ৘ใͷ౎౓ೖྗ͕ෆཁ
    ղ໿͕༰қɻ֤ΞϓϦͰಉ͡ํ๏Ͱղ໿Ͱ͖Δ
    ແྉମݧظؒʹղ໿͢Ε͹ɺྉ͕ۚൃੜ͠ͳ͍

    ɹ(ҧ໿ۚతͳ௥Ճͷࢧ෷͍΋ͳ͠)
    

    View Slide

20. !20
    App ಺՝ۚ΁ͷҹ৅ (։ൃऀ)
    ೔ܦిࢠ൛Ϣʔβʔ͸ iOS Ϣʔβʔ͕ଟ͍
    ࢢ৔ن໛΋ App Store ͷ΄͏͕େ͖͍
    ܖ໿͠΍͍͚͢Ͳɺղ໿͠΍͍͢ɻ

    ࣮ͷೖΓ͕Ͳͷఔ౓ʹͳΔ͔
    ʢϢʔβʔ֫ಘʹ௚઀తʹߩݙͰ͖ͦ͏ʣ
    

    View Slide

21. ઃܭ / ࣮૷։࢝
    !21
    ܭըཱ͕ͬͯ
    

    View Slide

22. !22
    طଘͷ՝ܾۚࡁγεςϜɺIDͱͷ࿈ܞ
    ೔ܦిࢠ൛Ͱ͸ɺApp Store Ͱͳ͘

    ࣗࣾAPI͔ΒίϯςϯπΛ഑৴
    ࿈ܞɺղ໿࣌ͷϑϩʔ
    ೝՄ৘ใͷఆٛ
    ిࢠ൛Ҏ֎ͷαʔϏεͰͷରԠ
    → ࠓճ͸࿩͠·ͤΜ
    API

    (BFF)
    App Store
    ߪೖ / ෮ݩ
    Ϩγʔτ
    Ϩγʔτ
    ೝՄ
    ίϯςϯπ
    ϨγʔτΛݕূ
    

    View Slide

23. !23
    App ಺՝ۚ (App Store) Ͱͷ௥ՃͷରԠ
    αʔόʔଆͷରԠ

    ɹ͢Ͱʹ͋ΔೝՄͷ࢓૊Έʹ௥Ճ͢Δܗ

    ɹߪಡΛ։࢝ͨ͠ / Ωϟϯηϧͨ͠ͷಉظ ͳͲ
    iOS ൛ͷ೔ܦిࢠ൛ΞϓϦͷઃܭɺ࣮૷ʢ͜ͷޙ࿩͠·͢ʣ
    

    View Slide

24. !24
    App ಺՝ۚͷछผ
    ফ໣ܕ Ұ౓࢖͏ͱͳ͘ͳΔ΋ͷɻίΠϯͱ͔ɺΞΠςϜͳͲ
    ඇফ໣ܕ ޿ࠂ࡟আ / ػೳ௥Ճ ͳͲ
    ࣗಈߋ৽

    αϒεΫϦϓγϣϯ
    ఆظతʹߋ৽͞ΕΔ΋ͷɻSaaS, ৽ฉͳͲ
    ඇߋ৽

    αϒεΫϦϓγϣϯ
    ظؒݶఆͷαʔϏεɺίϯςϯπ
    

    View Slide

25. !25
    ࣗಈߋ৽αϒεΫϦϓγϣϯΛ࢖͏ App
    χϡʔε

    ɹThe New York Times, WSJ, The Times, The Guardian, NewsPicks...
    ͦͷଞ

    ɹNetflix, ΫοΫύου, AbemaTV, ৯΂ϩά, MoneyTree...
    

    View Slide

26. !26
    UXͷݕ౼
    Designing a Great In-App Purchase Experience (WWDC 2014)ɺ

    ଞࣾ iOS ΞϓϦɺઌൃͷ೔ܦిࢠ൛ Android ൛Λࢀߟʹ
    ՝ۚ·Ͱͷλοϓ਺͸ۃྗগͳ͘
    ޡղ͢ΔΑ͏ͳදهΛආ͚ͯ෼͔Γ΍͘͢

    ɹҰ؏ੑͷ͋Δදݱ

    ɹղ໿ಋઢ΋ϝχϡʔͷઙ͍Ґஔʹ
    ϓϥΠόγʔϙϦγʔɺར༻ن໿ͳͲΛ໨ʹ৮ΕΔҐஔʹ

    ɹϦδΣΫτ͞Εͳ͍ͨΊͷඞཁ৚݅
    

    View Slide

27. !27
    

    View Slide

28. !28
    Sketch ͰϞοΫ (σϞ) Λ࡞ͬͨ
    <σϞ>
    

    View Slide

29. !29
    ࣮૷͢Δ: ͬ͘͟Γͱ͋͛Δͱ
    ߪಡ͢Δ

    ɹطଘͷೝূػߏʹՃ͑ͯɺϨγʔτͰͷೝূΛ௥Ճ
    ೔ܦ ID ʹొ࿥͢Δ

    ɹΞϓϦͷத͔Β೔ܦ ID ΛऔಘͰ͖ΔΑ͏ʹ
    ೔ܦ ID ΞΧ΢ϯτΛඥ͚ͮΔ

    ɹ͢Ͱʹ೔ܦ ID Λ͍࣋ͬͯΔΞΧ΢ϯτͱϨγʔτΛඥ͚ͮ
    ෮ݩ͢Δʢߪಡͱಉ͡ηοτʣ
    

    View Slide

30. !30
    ࣮૷͢Δ: ࢀߟࢿྉ
    App಺՝ۚ - Apple Developer

    ɹApple ͕ఏڙ͢ΔApp ಺՝ۚͷϦιʔε͕·ͱ·ͬͯܝࡌ͞Ε͍ͯΔ
    App಺՝ۚʹ͍ͭͯ

    ɹ࣮૷ͱ͔ςετͷ࿩ɻ೔ຊޠͳͷͰಡΈ΍͍͢
    

    View Slide

31. !31
    import StoreKit
    

    View Slide

32. !32
    ߪಡ
    ໾ׂ

    ɹߪಡʢݱࡏ͸ແྉମݧɻ࣮૷తʹ͸ҙࣝͤͣʣ

    ɹ෮ݩ
    Ϟδϡʔϧʢ͍͍ͩͨը໘୯Ґʣͷߏ੒ཁૉ

    ɹView Controller, View Model, Model

    ɹ(Builder, Wireframe)
    NEW
    Ϟδϡʔϧ
    

    View Slide

33. !33
    ॳճىಈը໘
    هࣄը໘ʢແྉͰӾཡͰ͖Δຊ਺Λ௒աͨ͠ޙʣ
    ேץɾ༦ץ
    Myχϡʔε
    ϝχϡʔɹͰɺಋઢදࣔ
    

    View Slide

34. !34
    

    View Slide

35. !35
    ߪಡը໘͸ WebView Ͱࠩ͠ସ͑Մೳʹ
    ΞϓϦ಺ʹ HTML / CSS Λอ࣋ͯ͠දࣔ

    ɹGRMustache Λར༻
    WebϖʔδͬΆ͕͞࿐ఄ͠ͳ͍Α͏ʹ޻෉͢Δ
    Remote Config Ͱ URL Λࢦఆͯ͠ɺ֎෦ URL Λදࣔ͢Δ
    AB ςετ΋ߦ͑ΔΑ͏ʹ

    (App Store ΨΠυϥΠϯΛ९कͯ͠΋Β͏)
    

    View Slide

36. !36
    

    View Slide

37. !37
    html {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    }
    body {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    }
    .subscription {
    position: -webkit-sticky;
    bottom: 0;
    }
    

    View Slide

38. !38
    ৚݅ʹΑΓදࣔΛ੾Γସ͑
    
    ログイン
    
    

    View Slide

39. !39
    

    View Slide

40. !40
    ແྉମݧΛ։࢝
    extension SubscriptionViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView,
    decidePolicyFor navigationAction: WKNavigationAction,
    decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    let request = navigationAction.request
    guard let requestUrl = request.url, navigationAction.navigationType == .linkActivated else {
    return decisionHandler(.allow)
    }
    switch (requestUrl.scheme, requestUrl.host) {
    case ("local", "subscribe"):
    self.viewModel.subscribeButtonDidTap.onNext(())
    return decisionHandler(.cancel)
    <略>
    default:
    return decisionHandler(.allow)
    }
    }
    }
    

    View Slide

41. !41
    

    View Slide

42. !42
    ϩάΠϯ
    ໾ׂ

    ɹ೔ܦ ID / PW ͰͷೝূʢϩάΠϯʣ

    ɹϩάΞ΢τ
    Ϟδϡʔϧ
    

    View Slide

43. !43
    ϩάΠϯ
    ໾ׂ

    ɹ೔ܦ ID / PW ͰͷೝূʢϩάΠϯʣ

    ɹϩάΞ΢τ

    ɹϨγʔτͰͷೝূ

    ɹϨγʔτͰߪಡঢ়ଶ → ೔ܦIDΞΧ΢ϯτඥ͚ͮ

    ɹ೔ܦIDϩάΠϯঢ়ଶ → Ϩγʔτඥ͚ͮ
    NEW
    NEW
    NEW
    Ϟδϡʔϧ
    

    View Slide

44. !44
    ೔ܦIDʹొ࿥
    هࣄอଘɺMyχϡʔεͷར༻ʹඞཁ
    PC / Android ͔Β΋ར༻Մೳʹ
    App ͔Βߪಡͨ͠ਓʹରͯ͠දࣔ
    Ϩγʔτͱ೔ܦIDΛඥ෇͚
    ඞཁ࠷௿ݶͷ߲໨Ͱొ࿥Մೳʹ
    NEW
    Ϟδϡʔϧ
    

    View Slide

45. !45
    

    View Slide

46. !46
    

    View Slide

47. !47
    

    View Slide

48. Promoting IAP
    !48
    https://developer.apple.com/jp/app-store/promoting-in-app-purchases/
    

    View Slide

49. !49
    censored
    

    View Slide

50. !50
    App಺՝ۚΛ࢝Ίͯ 1 ͔݄
    ແྉମݧऴྃޙͷ՝ۚܧଓ཰͸...
    Google Play Ͱͷ࣮੷Λ૝ఆͨ͠༧૝ΑΓ͸େ෯ʹྑ͔ͬͨ
    

    View Slide

51. !51
    ࠓޙ
    ࢖ͬͯ͘ΕΔਓͷຬ଍౓ɺར༻ܧଓ཰ΛΑΓߴΊΔ࢓ֻ͚
    ΋ͬͱಡΈͨ͘ͳΔΑ͏ͳίϯςϯπͷاը
    ΞϓϦͷ UI վળɺύϑΥʔϚϯεվળ ͳͲ
    ڵຯΛ͍͚࣋ͬͯͨͩͨํ͸ https://hack.nikkei.com/ ΁ʂ
    

    View Slide