$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native でアプリ内課金の実装をする
Search
YUJI TSUBURAYA
July 28, 2021
Technology
1
1.9k
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.2k
Other Decks in Technology
See All in Technology
生成AIを活用したIT運用高度化への挑戦
iotcomjpadmin
0
190
TypeScript100%で作るMovable Typeプラグイン
usualoma
2
260
総会員数1,500万人のレストランWeb予約サービスにおけるRustの活用
kymmt90
3
2.7k
ご挨拶
iotcomjpadmin
0
200
Nutanixにいらっしゃいませ。Moveと仮想マシン移行のポイント紹介
shadowhat
0
210
12/2(月)のBedrockアプデ速報(re:Invent 2024 Daily re:Cap #1 with AWS Heroes)
minorun365
PRO
1
120
偶有的複雑性と戦うためのアーキテクチャとチームトポロジー
knih
7
5.8k
共創するアーキテクチャ ~チーム全体で築く持続可能な開発エコシステム~ / Co-Creating Architecture - A Sustainable Development Ecosystem Built by the Entire Team
bitkey
PRO
1
3.8k
データカタログを自作したけど 運用しなかった話@Findy Lunch LT「データカタログ 事例から学ぶメタデータ管理の実態」
ryo_suzuki
2
400
iOS 18 から追加された SwiftUI の傾向について調べてみる
swiftty
2
100
Microsoft Ignite 2024 Update 1 - AIとIoT関連の最新情報をどこよりも早く!
iotcomjpadmin
0
190
徹底解説!Microsoft 365 Copilot の拡張機能 / Complete guide to Microsoft 365 Copilot extensions
karamem0
1
1.4k
Featured
See All Featured
Being A Developer After 40
akosma
87
590k
Bash Introduction
62gerente
608
210k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.3k
A better future with KSS
kneath
238
17k
Designing for Performance
lara
604
68k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
A Tale of Four Properties
chriscoyier
156
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
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 とかフォローしてもらえると喜びます ・以上で発表終わります ありがとうございました! まとめ まとめ