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

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

86b45faad28dfccd89b4ec04ef00c62e?s=128

Taishi Ikai

April 10, 2019
Tweet

Transcript

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

  2. !2 About me ழࣂ େࢤʢ͍͔͍ ͍ͨ͠ʣ ೔ຊܦࡁ৽ฉࣾॴଐͷΤϯδχΞ
 OKRϦςϯγϣϯ୲౰ ͍ͭͬͯ͘Δ΋ͷ
 ɹiPhone

    ͷ೔ܦిࢠ൛ΞϓϦ
 ɹiPhone / iPad ͷࢴ໘ϏϡʔΞʔΞϓϦ
 ɹΞϓϦͷόοΫΤϯυܥ (w/αʔόʔϨε)
  3. ೔ܦిࢠ൛ͷ App ʹ͍ͭͯ !3

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

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

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

  7. None
  8. ࣗࣾ՝ۚʹͭͳ͕ΔಋઢΛ̍ϛϦͰ΋දࣔ͢ΔͱϦδΣΫτ
 WebαΠτʹ༠ಋ͢ΔจݴΛॻ͍ͯ΋ϦδΣΫτ ؾʹೖͬͯ΋Βͬͯ΋ŊΞϓϦ͔Β͸ߪಡͯ͠΋Β͑ͳ͍ঢ়گ

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

  10. App ಺՝ۚͱ͸ !10

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

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

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


    ɹCVR: ͓ࢼ͠ظؒऴྃޙɺ՝ۚ͢ΔϢʔβʔͷׂ߹
 ɹ͜ΕΛୡ੒Ͱ͖Ε͹ɺख਺ྉ෼Λ૬ࡴͰ͖Δ
  15. https://prtimes.jp/main/html/rd/p/000000081.000011115.html

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


    ɹCVR: ͓ࢼ͠ظؒऴྃޙɺ՝ۚ͢ΔϢʔβʔͷׂ߹
 ɹ͜ΕΛୡ੒Ͱ͖Ε͹ɺख਺ྉ෼Λ૬ࡴͰ͖Δ → ੒ޭ → App Store Ͱ΋࣮ࢪ΁
  17. !17 ཪ൪૊঺հ https://speakerdeck.com/ymnder/yun-yong-karaxue-buplay-billing-library

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

    ओཁͳ΋ͷͷΈ
  19. !19 App ಺՝ۚ΁ͷҹ৅ (Ϣʔβʔ) ؆୯ʹɺख୹ʹܖ໿Մೳ
 ɹΫϨδοτΧʔυ΍ݸਓ৘ใͷ౎౓ೖྗ͕ෆཁ ղ໿͕༰қɻ֤ΞϓϦͰಉ͡ํ๏Ͱղ໿Ͱ͖Δ ແྉମݧظؒʹղ໿͢Ε͹ɺྉ͕ۚൃੜ͠ͳ͍
 ɹ(ҧ໿ۚతͳ௥Ճͷࢧ෷͍΋ͳ͠)

  20. !20 App ಺՝ۚ΁ͷҹ৅ (։ൃऀ) ೔ܦిࢠ൛Ϣʔβʔ͸ iOS Ϣʔβʔ͕ଟ͍ ࢢ৔ن໛΋ App Store

    ͷ΄͏͕େ͖͍ ܖ໿͠΍͍͚͢Ͳɺղ໿͠΍͍͢ɻ
 ࣮ͷೖΓ͕Ͳͷఔ౓ʹͳΔ͔ ʢϢʔβʔ֫ಘʹ௚઀తʹߩݙͰ͖ͦ͏ʣ
  21. ઃܭ / ࣮૷։࢝ !21 ܭըཱ͕ͬͯ

  22. !22 طଘͷ՝ܾۚࡁγεςϜɺIDͱͷ࿈ܞ ೔ܦిࢠ൛Ͱ͸ɺApp Store Ͱͳ͘
 ࣗࣾAPI͔ΒίϯςϯπΛ഑৴ ࿈ܞɺղ໿࣌ͷϑϩʔ ೝՄ৘ใͷఆٛ ిࢠ൛Ҏ֎ͷαʔϏεͰͷରԠ →

    ࠓճ͸࿩͠·ͤΜ API
 (BFF) App Store ߪೖ / ෮ݩ Ϩγʔτ Ϩγʔτ ೝՄ ίϯςϯπ ϨγʔτΛݕূ
  23. !23 App ಺՝ۚ (App Store) Ͱͷ௥ՃͷରԠ αʔόʔଆͷରԠ
 ɹ͢Ͱʹ͋ΔೝՄͷ࢓૊Έʹ௥Ճ͢Δܗ
 ɹߪಡΛ։࢝ͨ͠ /

    Ωϟϯηϧͨ͠ͷಉظ ͳͲ iOS ൛ͷ೔ܦిࢠ൛ΞϓϦͷઃܭɺ࣮૷ʢ͜ͷޙ࿩͠·͢ʣ
  24. !24 App ಺՝ۚͷछผ ফ໣ܕ Ұ౓࢖͏ͱͳ͘ͳΔ΋ͷɻίΠϯͱ͔ɺΞΠςϜͳͲ ඇফ໣ܕ ޿ࠂ࡟আ / ػೳ௥Ճ ͳͲ

    ࣗಈߋ৽
 αϒεΫϦϓγϣϯ ఆظతʹߋ৽͞ΕΔ΋ͷɻSaaS, ৽ฉͳͲ ඇߋ৽
 αϒεΫϦϓγϣϯ ظؒݶఆͷαʔϏεɺίϯςϯπ
  25. !25 ࣗಈߋ৽αϒεΫϦϓγϣϯΛ࢖͏ App χϡʔε
 ɹThe New York Times, WSJ, The

    Times, The Guardian, NewsPicks... ͦͷଞ
 ɹNetflix, ΫοΫύου, AbemaTV, ৯΂ϩά, MoneyTree...
  26. !26 UXͷݕ౼ Designing a Great In-App Purchase Experience (WWDC 2014)ɺ


    ଞࣾ iOS ΞϓϦɺઌൃͷ೔ܦిࢠ൛ Android ൛Λࢀߟʹ ՝ۚ·Ͱͷλοϓ਺͸ۃྗগͳ͘ ޡղ͢ΔΑ͏ͳදهΛආ͚ͯ෼͔Γ΍͘͢
 ɹҰ؏ੑͷ͋Δදݱ
 ɹղ໿ಋઢ΋ϝχϡʔͷઙ͍Ґஔʹ ϓϥΠόγʔϙϦγʔɺར༻ن໿ͳͲΛ໨ʹ৮ΕΔҐஔʹ
 ɹϦδΣΫτ͞Εͳ͍ͨΊͷඞཁ৚݅
  27. !27

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

  29. !29 ࣮૷͢Δ: ͬ͘͟Γͱ͋͛Δͱ ߪಡ͢Δ
 ɹطଘͷೝূػߏʹՃ͑ͯɺϨγʔτͰͷೝূΛ௥Ճ ೔ܦ ID ʹొ࿥͢Δ
 ɹΞϓϦͷத͔Β೔ܦ ID

    ΛऔಘͰ͖ΔΑ͏ʹ ೔ܦ ID ΞΧ΢ϯτΛඥ͚ͮΔ
 ɹ͢Ͱʹ೔ܦ ID Λ͍࣋ͬͯΔΞΧ΢ϯτͱϨγʔτΛඥ͚ͮ ෮ݩ͢Δʢߪಡͱಉ͡ηοτʣ
  30. !30 ࣮૷͢Δ: ࢀߟࢿྉ App಺՝ۚ - Apple Developer
 ɹApple ͕ఏڙ͢ΔApp ಺՝ۚͷϦιʔε͕·ͱ·ͬͯܝࡌ͞Ε͍ͯΔ

    App಺՝ۚʹ͍ͭͯ
 ɹ࣮૷ͱ͔ςετͷ࿩ɻ೔ຊޠͳͷͰಡΈ΍͍͢
  31. !31 import StoreKit

  32. !32 ߪಡ ໾ׂ
 ɹߪಡʢݱࡏ͸ແྉମݧɻ࣮૷తʹ͸ҙࣝͤͣʣ
 ɹ෮ݩ Ϟδϡʔϧʢ͍͍ͩͨը໘୯Ґʣͷߏ੒ཁૉ
 ɹView Controller, View Model,

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

  34. !34

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

    Λར༻ WebϖʔδͬΆ͕͞࿐ఄ͠ͳ͍Α͏ʹ޻෉͢Δ Remote Config Ͱ URL Λࢦఆͯ͠ɺ֎෦ URL Λදࣔ͢Δ AB ςετ΋ߦ͑ΔΑ͏ʹ
 (App Store ΨΠυϥΠϯΛ९कͯ͠΋Β͏)
  36. !36

  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; }
  38. !38 ৚݅ʹΑΓදࣔΛ੾Γସ͑ <!-- {{^isLoggedIn}} --> <a href="local://login/">ログイン</a> <!-- {{/isLoggedIn}} -->

  39. !39

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

  42. !42 ϩάΠϯ ໾ׂ
 ɹ೔ܦ ID / PW ͰͷೝূʢϩάΠϯʣ
 ɹϩάΞ΢τ Ϟδϡʔϧ

  43. !43 ϩάΠϯ ໾ׂ
 ɹ೔ܦ ID / PW ͰͷೝূʢϩάΠϯʣ
 ɹϩάΞ΢τ
 ɹϨγʔτͰͷೝূ


    ɹϨγʔτͰߪಡঢ়ଶ → ೔ܦIDΞΧ΢ϯτඥ͚ͮ
 ɹ೔ܦIDϩάΠϯঢ়ଶ → Ϩγʔτඥ͚ͮ NEW NEW NEW Ϟδϡʔϧ
  44. !44 ೔ܦIDʹొ࿥ هࣄอଘɺMyχϡʔεͷར༻ʹඞཁ PC / Android ͔Β΋ར༻Մೳʹ App ͔Βߪಡͨ͠ਓʹରͯ͠දࣔ Ϩγʔτͱ೔ܦIDΛඥ෇͚

    ඞཁ࠷௿ݶͷ߲໨Ͱొ࿥Մೳʹ NEW Ϟδϡʔϧ
  45. !45

  46. !46

  47. !47

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

  49. !49 censored

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

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

    ΁ʂ