Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native でアプリ内課金の実装をする
Search
YUJI TSUBURAYA
July 28, 2021
Technology
1
2k
React Native でアプリ内課金の実装をする
以下のイベントに登壇した際の資料になります。
https://standfm.connpass.com/event/218812/
YUJI TSUBURAYA
July 28, 2021
Tweet
Share
More Decks by YUJI TSUBURAYA
See All by YUJI TSUBURAYA
企業での Notion 活用事例の紹介、Notion × プロダクトバックログ
35d
0
1.7k
Notion の運用で感じた課題と、 それを解決する iOS アプリを作った話 (Notion ミートアップ #8)
35d
2
1.3k
Other Decks in Technology
See All in Technology
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
20
19k
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
160
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
160
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
210
年末調整プロダクトの内部品質改善活動について
kaomi_wombat
0
210
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
2
770
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
340
Symfony in 2025: Scaling to 0
fabpot
2
220
OCI見積もり入門セミナー
oracle4engineer
PRO
0
120
30 代子育て SRE が考える SRE ナレッジマネジメントの現在と将来
kworkdev
PRO
0
140
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
230
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
29
2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
A Modern Web Designer's Workflow
chriscoyier
693
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Statistics for Hackers
jakevdp
798
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
RailsConf 2023
tenderlove
29
1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Transcript
React Native でアプリ内課金の実装をする 1 株式会社 J-CAT CXO 円谷(@___35d)
2 / 17 仕事 ・J-CAT という会社を 2019年12月に共同創業 ・普段は会社の経営をしたり、Nuxt.js を書いたりしてる
・実業務では React 書いてなくて、あんまりキャッチアップできてないのが悩み ・その前は BizReach という会社に所属 ・このときは React Native 書いてた(v0.48 - v0.52 らへんの時代) ・flowtype だった 懐かしい プライベート ・Splatoon というゲームをよくやってる(All X) ・Notion 発信活動(Twitter / YouTube / note) ・Fast Notion というアプリの個人開発 👈 今日の話 自己紹介 - 円谷 雄二 はじめに
3 / 17 今日話す内容 -> Fast Notion 課金部分の実装について ・半年前はあまり(日本語では)知見がなさげだった
・今回の発表が知見の一部になればなと思ってます -> 今後実装する人の参考になれば ・ついでに、個人開発者ならではのところ話せたら面白いかなと思います ・(企業だとコンプラに引っかかりそうなところ)実装周り なるべくコード晒す ・どこで審査落ちたかとか ・(ほか聞きたいこともしあれば、コメントとか Twitter とかで投げておいてもらえると喜びます!) きょうは話さないこと ・Expo Eject の細かい手順・ハマりポイント ・課金ロジックの細部 ・In App Purchase ライブラリ API の網羅的解説 はじめに
4 / 17 ・Expo / React Native 製 ・現在は一人で開発
・2020年4月βリリース、約1.5年くらい運用 ・iOS / Android 版両方ある ・合計 25,000 インストールくらい Fast Notion というアプリについて 個人開発しているアプリについて けんすう砲👇 スワン砲👇 平岡砲👇
5 / 17 ・割と普通な構成です。(一人でやる工夫はいろいろしているが)特に声を大にして言及するところはないかも… ・クライアント: React Native / Expo
/ TypeScript / Jest / Sentry ・バックエンド: Python / GCP / Node.js ( Firebase Functions / Express / TypeScript) Fast Notion の技術スタック 個人開発しているアプリについて Client API Server 1 Notion API API Server 2
6 / 17 1. 広告(Admob とか) 2. アカウント作って継続するのに課金しつづける系(Netflix とか)
3. アプリ購入時課金(買い切り ダウンロードするのにお金かかるやつ) 4. InAppPurchase(Apple / Google の課金システム使うやつ) - 都度買うやつ(ガチャ回すための石とかそういうやつ) - 月 / 年ごとに支払うやつ サブスク 👈 今日はこれの話 (InAppPurchase 余談) ・Apple の課金システム使わないとレビュー通らなかったりする ・あと手数料高いよね(Apple 30%) ・なんとかならんかなあ… (前提知識)一般的なアプリのマネタイズ手法いろいろ 個人開発しているアプリについて HEY の 件で Apple と DHH がケンカしてたり、 Epic Games が Apple のこと訴えてたり(裁判中)
7 / 17 ・前置き長くなっちゃったけど、このへんから実装の話 ・基本は無料 ・サブスク期間中は +α で全ての機能が開放される
・アプリ内では ProPlan という名称 ・ProPlan になっていると、 ・DB 連携・履歴保存・登録ページ数上限解除 ...等 ・useIsProPlan 的な感じで画面ごとに機能出し分け Fast Notion におけるサブスク課金 個人開発しているアプリについて アプリ内に保存している真偽値を返却 Pro Plan になっていない状態(左)、サブスク課金画面(右)
8 / 17 ・ネイティブ実装が入るので、スクラッチで実装するのはキツい -> ライブラリ導入がオススメ ・比較表を作ってみた ・素の RN
だったら react-native-iap 一択。 Expo Bare Workflow だったら expo-in-app-purchase も可 ・自分は expo-in-app-purchase を採用(expo 使ってたので信頼してた) 課金を実現するライブラリ比較 In App Purchase の実装
9 / 17 ・ネイティブ実装を TS で薄くラップしてる ・良いところ -> 安心と信頼の
Expo ドキュメント(読みやすい・厚い) ・react-native-unimodules に依存(ネイティブ層とのブリッジング部分は Expo 製の共通モジュール) expo-in-app-purchase について In App Purchase の実装
10 / 17 1. サブスクの支払いができる(1ヶ月プランと1年プランがある) 2. サブスク期間内は ProPlan になり全ての機能が開放される
3. 期間外は通常プランに戻る - 期間外の判定はそこまでシビアでなくても良い -> 1秒でも過ぎたら使えない、とかにはしていない -> 適当なタイミングで、Apple のサーバーからサブスク状態を取得する 4. Restore できる(Restore については詳しく後ほど説明します) それぞれの実装について ざっくりコード付きで解説 していきます (時間の関係上、Apple に寄せて解説しています) 実装した要件の言語化(似た要件でアプリ作る人の参考に) 個人開発しているアプリについて
11 / 17 ・2021/07/28 現在、Expo 内で唯一の bare workflow でしか使えないモジュールっぽい
(ちょっと前まではもうちょっとあった気がするが) ・bare workflow 化 するために Eject $ expo eject ・もろもろ選択肢が出るので答えていくと eject 完了 ・ライブラリのインストール $ yarn add expo-in-app-purchase $ cd ios & pod install (実装 1/6)expo-in-app-purchase インストール In App Purchase の実装 https://docs.expo.io/bare/unimodules-full-list/?redirected#only-available-in-the-bare-workflow-currently
12 / 17 商品データの作成(App Store Connect) ・製品のタイプが選べるので、「自動更新サブスクリプション」を選択(価格・期間を決める) ・この製品
ID を実装時に使用 購入時のイベントリスナー登録 ・購入フローが完了したとき用のイベントリスナーをあらかじめ登録 setPurchaseListener(() => {}); ・Fast Notion ではコールバック内で ProPlan のフラグを立ててる (実装 2/6)商品データの作成・購入時のイベントリスナー登録 In App Purchase の実装
13 / 17 ・どの商品をユーザーに購入してもらうかの UI 作成に必要 ・getProductsAsync で商品データを取得 ・商品データの情報をもとに、価格を表示
・貨幣コードも同時に返ってくるので、きちんと表示してやる ・ここが雑でハードコーディングしてたら審査落ちた ・(ちゃんとローカライズしろと怒られた) (実装 3/6)商品データの取得・表示 In App Purchase の実装
14 / 17 ・await purchaseItemAsync(productId); で購入できる ・購入する前に、以下の2つの関数を事前に実行しておく必要があるので注意 ・await connectAsync();
初期化処理 ・await getProductsAsync([productId]); 製品情報の取得処理 ・購入処理が完了すると、実装2 で紹介した setPurchaseListener(({ responseCode, results }) => {}); が発火する ・-> 購入に成功した場合、このタイミングで ProPlan のフラグを立てている (実装 4/6)購入処理 In App Purchase の実装
15 / 17 アプリ起動時にサブスク状態の確認をしてる(けっこう仕様が複雑… 😢 ) 1. const { results
} = await getPurchaseHistoryAsync(); で購入履歴を取得 2. 購入履歴をもとに、Apple のレシート検証用サーバーにリクエスト投げる - payload には、購入履歴から取得したレシート情報と、「共有シークレット」を詰める - キーの名前が password はちょっと罠 3. レスポンスにサブスクの有効期限が 詰まっているので、現在時刻と比較 4. 比較結果によって、ProPlan フラグを変更 (実装 5/6)サブスク課金状態の確認 In App Purchase の実装 AppStoreConnect から共有シークレット取得
16 / 17 ・Restore (購入復元) / すでに購入した人に対しての機能 ・別端末で Fast Notion
をインストールした場合にも ProPlan に戻せる ・「Restore 機能どこにあるの?」と Apple 様に怒られて審査落ち ・処理内容自体は 実装5「課金状態の確認」とほぼ同じ ・これで一通り実装の解説 Done (実装 6/6)Restore (購入復元)機能 In App Purchase の実装
17 / 17 ライブラリに関して ・導入するのがオススメ(react-native-iap or expo-in-app-purchase) ・ライブラリを使うとネイティブ実装不要。TS only
で実装できて開発体験良い 導入・実装について ・Expo の場合は eject 必須 Bare Workflow にする ・コード記述量自体はそこまで多くない ライブラリ使えば気軽に さいごに ・(特に宣伝ないので)Twitter とかフォローしてもらえると喜びます ・以上で発表終わります ありがとうございました! まとめ まとめ