Slide 1
Slide 1 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 1/57
アプリ内課金の
アプリ内課金の
はまりどころ
はまりどころ
Monaca UG OKAYAMA
2018/12/12
@ShinyaSuefusa
Slide 2
Slide 2 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 2/57
今回は
最新技術スゲェ！
最新技術スゲェ！
ではなく
ナレッジの共有
ナレッジの共有
を目的として発表いたします
Slide 3
Slide 3 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 3/57
で
Slide 4
Slide 4 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 4/57
アプリ内課金
アプリ内課金
ついに有償アプリ作っちゃいました
（ただし、Cordova
案件）
Slide 5
Slide 5 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 5/57
使うプラグインはこれ
cordova-plugin-purchase
cordova-plugin-purchase
Slide 6
Slide 6 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 6/57
もちろんMonaca
でも使えます。
公式のチュートリアルに書いてあります。
ただしサードパーティーなので有償プランで！
https://docs.monaca.io/ja/tutorials/in-app_purchase
Slide 7
Slide 7 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 7/57
ここで
ここで
さらっとアプリ内課金のポイントだけ
ご説明しておきます
（この場に無課金ユーザーはいないはず！）
Slide 8
Slide 8 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 8/57
アプリ内課金の種類
アプリ内課金の種類
for Android
管理対象のアプリ内アイテム
定期購読
Slide 9
Slide 9 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 9/57
アプリ内課金の種類
アプリ内課金の種類
for iOS
消費型
非消費型
自動更新購読
継続なしの購読
Slide 10
Slide 10 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 10/57
プラグインの使い方
プラグインの使い方
※
ハイブリッドアプリとして作るので、
原則、Android
もiOS
も同じ。
Slide 11
Slide 11 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 11/57
1.
商品をプラグインに登録する
2.
ストアから商品情報を取得する
3.
商品を購入する
4.
商品を消費する
store.register(product);
store.refresh();
store.order(product);
product.finish();
Slide 12
Slide 12 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 12/57
商品情報のライフサイクル
商品情報のライフサイクル
(
後で出てくるのちょっとだけ覚えて)
Slide 13
Slide 13 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 13/57
めっちゃ簡単やん！
Slide 14
Slide 14 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 14/57
がっ！
意外と大変。。。
Slide 15
Slide 15 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 15/57
ここから
アプリ内課金でハマった事例を
ご紹介します！
Slide 16
Slide 16 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 16/57
事例１
事例１
プラグインの
ID
を間違えやすい
プラグインの
ID
を間違えやすい
Slide 17
Slide 17 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 17/57
プロジェクトにを追加するとき、
※Monaca
だとプラグインのインポートですが。
とすると、
なんか古いプラグインが追加されて動かない。
（正確には現在はなおったっぽい？）
cordova plugin add cordova-plugin-purchase
Slide 18
Slide 18 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 18/57
正しくは、
cordova plugin add cc.fovea.cordova.purchase
Slide 19
Slide 19 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 19/57
12/4
にnpm
を調べてみると、18 days ago
！？！？
Slide 20
Slide 20 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 20/57
最近ようやく改善されたようです。
Slide 21
Slide 21 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 21/57
事例２
事例２
基本、リリース署名必須
基本、リリース署名必須
for Android
Slide 22
Slide 22 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 22/57
Android
で動かすなら、リリース版の署名が必要。
課金を試すのにストアへ内部テスト版としてAPK
を
登録しなければならない。
この時、APK
がdebuggable=true
になっているとAPK
がストアに弾かれるので、デバッグはできなくな
る。
Slide 23
Slide 23 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 23/57
署名無しやStore
にAPK
を登録せずに動かすと、
みたいなエラーが出る。
6777017: E/IabHelper: In-app billing error:
Purchase signature verification FAILED for sku
android.test.purchased
Slide 24
Slide 24 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 24/57
デバッグできねぇじゃん！！
(
ﾉД`)
ｼｸｼｸ…
Slide 25
Slide 25 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 25/57
でも大丈夫。
Slide 26
Slide 26 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 26/57
Android
でどうしてもデバッグしたい場合。
1.
リリースビルドAPK
をストアに登録
2.
同じ署名でデバッグ版を作る
3.
実機インストール！
すればデバッグが有効になった状態でアプリ内課
金を試せる。
adb install -d xxx.apk
Slide 27
Slide 27 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 27/57
事例３
事例３
ライセンステスト登録が必要
ライセンステスト登録が必要
for Android
Slide 28
Slide 28 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 28/57
Android
で課金テストを行う時、テスターの登録の
後、ライセンステストの登録も必要。
Slide 29
Slide 29 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 29/57
- Qiita
より
ファ！？
Android
でアプリ内課金テストを行う
Slide 30
Slide 30 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 30/57
そして、
しれっと
GooglePlay
のライセンステストの登録が
外れることがある。
（タイミングは不明）
Slide 31
Slide 31 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 31/57
通常のテストの時に受け取るメール。
Slide 32
Slide 32 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 32/57
テスト中、突如やらかす。
Slide 33
Slide 33 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 33/57
あ、ちなみに、実際のクレカ登録していなくて
も、テストできます。
Slide 34
Slide 34 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 34/57
事例４
事例４
iOS
の審査時のレシート検証に
iOS
の審査時のレシート検証に
注意
注意
for iOS
Slide 35
Slide 35 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 35/57
iOS
のレシート検証は、テスト用の「Sandbox
」と
「本番」がある。
アプリリリースするには、本番用の設定のビルド
をするわけですが、審査時の（審査員の）レシー
トは「Sandbox
」のものになるため、「本番」の検
証サーバにアクセスするとエラーになる。
Slide 36
Slide 36 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 36/57
サーバーサイドでレシート検証をしている場合
は、審査で申請しているログインID
だったら
Sandbox
で検証する、などの対応が必要。
Slide 37
Slide 37 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 37/57
事例５
事例５
定期購読型に要注意
定期購読型に要注意
for Android/iOS
Slide 38
Slide 38 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 38/57
定期購読型の場合、「期限切れになった」という
イベントは自動では発火しない。
つまり、アプリ起動しっぱなしにしておけばいつ
までも権利が使えることになる。
Slide 39
Slide 39 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 39/57
プラグインのrefresh
関数をコールすると、状態が
OWNED
から再度、APPROVED
に遷移する。
（APPROVED
イベントが発火する）
で、再度レシート検証をして期限切れになってい
ないかチェックする必要がある。
Slide 40
Slide 40 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 40/57
事例６
事例６
定期購読型に要注意 その２
定期購読型に要注意 その２
for Android
Slide 41
Slide 41 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 41/57
プラグインのAndroid
側にバグがあって、前の事例
に書いたレシート検証で期限切れとした場合で
も、商品の所有状態（OWNED
）がfalse
に戻ってく
れない（！！）
Slide 42
Slide 42 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 42/57
検証NG
でEXPIRED
にするとき、一緒に
product.owned = false
にする必要がある。
これ重要！
なお、iOS
版はちゃんとfalse
になる。
Slide 43
Slide 43 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 43/57
事例７
事例７
iOS
のリストアが厄介
iOS
のリストアが厄介
for iOS
Slide 44
Slide 44 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 44/57
iOS
版は購入状態の「リストア」機能が無いとリジ
ェクトされる。
iPhone
を買い替えたーとか、iPad
でも使うー、と
か。
同じAppleID
使えば同じ購入状態にせよ。
という厳しいルールがある。
Slide 45
Slide 45 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 45/57
ところが、iOS
版のプラグインは、refresh
関数を２
回呼ぶと、リストアが自動的に行われる仕様にな
っている。
SPA
なUI
を採用していると、2
回以上呼んじゃうっ
てところにはまって、勝手にリストアされて新し
いレシートが発行されて。。
と面倒なので、担当した案件では勝手にリストア
されないように細工した。
Slide 46
Slide 46 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 46/57
storekit.restore
の中にリストア処理を呼ぶ実装があ
るので、空の関数に差し替える。
if (window.storekit) {
// StoreKit(iOS) 場合 refresh時 restore 防
// restore関数 無効化
const storekit = Object.getPrototypeOf(window.storekit)
storekit.originalRestore = storekit.restore
storekit.restore = () => {}
}
Slide 47
Slide 47 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 47/57
事例８
事例８
StoreKit
にアクセスすると毎回
StoreKit
にアクセスすると毎回
ID/PASS
を聞かれる
ID/PASS
を聞かれる
for iOS
Slide 48
Slide 48 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 48/57
iOS
のSandbox
でテストする時、StoreKit
経由でStore
にアクセスしたタイミングでAppleID
を毎回入力す
る必要がある。
（iPhone
のStore
の設定にテストアカウントは登録
することはできない）
一応、入力ダイアログをキャンセルすることもで
きる。
Slide 49
Slide 49 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 49/57
しかし、ダイアログでキャンセルすると、cordova
プラグインのexec
のコールバックが呼ばれず、必ず
デッドロックする。
面倒でも毎回ID/PASS
を入力してください。
Slide 50
Slide 50 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 50/57
事例９
事例９
ローカルストレージがパンクす
ローカルストレージがパンクす
る
る
for iOS
Slide 51
Slide 51 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 51/57
iOS
版はトランザクションをfinish
するとレシート情
報やトランザクションID
が取れなくなるため、ロ
ーカルストレージに情報を保持している。
しかし、レシート情報が結構なサイズなので、定
期購読するとローカルストレージがいずれパンク
する。
Slide 52
Slide 52 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 52/57
レシート情報をあとで使いたいシーンがないので
あれば、下記３つはアプリ起動時とかに消すよう
にする。
if (window.localStorage) {
// iOS 情報 使用 破棄
window.localStorage.removeItem('sk_receiptForProduct')
window.localStorage.removeItem('sk_receiptForTransaction')
window.localStorage.removeItem('sk_appStoreReceipt')
}
Slide 53
Slide 53 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 53/57
事例１０
事例１０
プラグインは
SPA
に配慮されて
プラグインは
SPA
に配慮されて
いない？
いない？
for iOS/Android
Slide 54
Slide 54 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 54/57
プロダクトのregister
は初回のrefresh
にしか反応し
ない。
つまり、SPA
アプリで一度register→refresh
でロード
してしまうと、WebAPI
とかで再度最新のプロダク
トID
を追加取得しても追加ロードができない。
グローバル変数でカウントしているため、どうに
もならない。。
Slide 55
Slide 55 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 55/57
という感じで
という感じで
事例を１０個ご紹介しましたが、 実際はもっとた
くさんノウハウが溜まりました。
Slide 56
Slide 56 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 56/57
Full
バージョンは
Monaca Advent Calendar 2018
に投稿します！
https://adventar.org/calendars/3073
Slide 57
Slide 57 text
2018/12/13 RevealJS : /Users/s-suefusa/Desktop/md/MonacaUG OKAYAMA #3/slide.1.md
http://localhost:50115/?print-pdf-now#/ 57/57
ありがとうございました
ありがとうございました