アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

リファレンスより。アプリカンでアプリ内課金を使ってみよう

アプリカンのリファレンスページではAPIの説明と共に、そのAPIを使うためのサンプルプロジェクトを公開しています。

今回はその中からPurchase APIを使ったアプリ内課金を行う方法について紹介します。ネイティブで実装しようと思うと大変なアプリ内課金ですが、Applicanを使えば容易に実装が可能です。

なお、今回は特にiOS向けについて紹介します。

必要なもの

iOS Dev Centerでの設定

iOSアプリでアプリ内課金を試す際には、Productionでアプリをビルドする必要があります。その後、iTunes Connectを使ってアプリ課金の設定を行います。

プロビジョニングを作成し、ダウンロードしておきます。

プロジェクトのダウンロード

Purchase | アプリカン | アプリ開発支援プラットフォーム にてサンプルをダウンロードをクリックします。

f:id:moongift:20150516223952p:plain

アプリカンにログイン

アプリカン | アプリ開発支援プラットフォームへ行き、右上にある会員登録をクリックします。既に会員登録済みの場合はログインをクリックします。

f:id:moongift:20150510221355p:plain

新規プロジェクト作成

会員登録、ログイン後に表示されるプロジェクト一覧ページにて、新しいプロジェクトを作成ボタンをクリックします。

f:id:moongift:20150510221412p:plain

プロジェクト名は「アプリ内課金デモ」として、対象デバイスは必要なものを選択してください。そして作成ボタンをクリックします。

f:id:moongift:20150510221433p:plain

作成されると、アプリ内課金デモのプロジェクト画面に移動します。

f:id:moongift:20150516223929p:plain

ビルド設定

アプリ内課金はシミュレータでは確認できませんので、ビルド設定を行います。

iOSアプリ設定

f:id:moongift:20150516223909p:plain

Bundle display nameはアプリ内課金デモとします。Bundle name、Bundle identifierもそれぞれ入力してください。対応OSバージョンは7.0以上とします。

iOSビルド設定

f:id:moongift:20150516223856p:plain

秘密鍵、iOS開発者証明書、プロビジョニングファイルをそれぞれ登録します。プロビジョニングはプロダクションで作成してください。

コードのアップロード

プロジェクト画面左にあるアップロードをクリックします。

f:id:moongift:20150510221511p:plain

そしてアップロードと書かれている枠の中に、先ほどダウンロードしたweb.zipをドラッグ&ドロップしてください。

f:id:moongift:20150510221528p:plain

アップロードが完了すると、追加されましたというメッセージが出ます。そして、その下にある公開ボタンをクリックします。

f:id:moongift:20150510221549p:plain

そして公開するボタンをクリックしてください。

f:id:moongift:20150510221604p:plain

更新されました、と表示されれば準備は完了です。

f:id:moongift:20150510221619p:plain

ビルド

f:id:moongift:20150516223833p:plain

次にアプリをビルドします。設定がうまくいっていればビルドが完了し、ipaファイルがダウンロードできます。このipaファイルはプロダクションなのでアプリカンのサイトやiTunesを使ってインストールはできません。まずはダウンロードします。

iTunes Connectにてアプリを登録

iTunes Connectへいき、アプリを登録します。また、別途Application Loaderをダウンロード&インストールして、先ほどダウンロードしたipaファイルをアップロードします。

f:id:moongift:20150516223809p:plain

財務情報の入力

アプリ内課金を行うにあたって、予め財務情報を入力する必要があります。

アプリ内課金の設定

f:id:moongift:20150516223753p:plain

アプリ内課金の項目、金額を設定します。ApplicanではアイテムIDを指定しますのでメモしておきます。

Test flightを使ってアプリの配布

アプリをインストールするためにTest flightを使ってアプリを配布します。Test flightアプリをインストール後、招待されているアプリがインストールできます。

テストユーザの作成

課金を行うユーザを作成します。本当のアカウントを使うと実際に課金されてしまいますので注意してください。

ここまでで準備は完了です。Test flightを使ってインストールしたアプリを起動します。

アプリの起動

アプリを起動し、消費アイテムおよび非消費アイテムの課金または定期購読がテストできます。どちらもアイテムIDを指定して実行します。この時、設定アプリのiTunes & App Storeからは一旦ログアウトしておき、アプリでの課金実行時に先ほど作成したテストユーザでログインするようにします。

f:id:moongift:20150516223735p:plain

課金処理について

消費型アイテムのコードを入れて、購入ボタンをタップします。

f:id:moongift:20150516223721p:plain

コードでは次のように処理されます。課金のアイテムIDを指定して処理を行うだけです。

applican.purchase.makePurchase('jp_co_xxx_yyy_coin100', 'inapp', makePurchaseSuccess, makePurchaseError);
function makePurchaseSuccess(result){
    if(result.productId=='jp_co_xxx_yyy_coin100'){
        //※課金アイテムの付与などの処理を実装する
    }else if(result.productId=='jp_co_xxx_yyy_coin200'){
        //※課金アイテムの付与などの処理を実装する
    }

    //決済完了にする処理。
    //iOSの場合は必ず送信。Androidは消費アイテムの場合のみ送信する。
    if(result.os=="ios" || 
        (result.os=="android" && (result.productId=="jp_co_xxx_yyy_coin100" || purchase.productId=="jp_co_xxx_yyy_coin200"))){
        applican.purchase.finishPurchase(result.purchaseId,  finishPurchaseSuccess, finishPurchaseError);
    }else{
        alert('決済完了しました:'+result.purchaseId);
    }
}
function makePurchaseError(error){
    var dump = "makePurchaseError\n";
    dump += "code:"+error.code+"\n";
    dump += "message:"+error.message+"\n";
    alert(dump);
}
function finishPurchaseSuccess(purchaseId){
    alert('決済完了しました:'+purchaseId);
}
function finishPurchaseError(error){
    alert('決済完了できませんでした。'+"code:"+error.code+"\n"+"message:"+error.message);
}

課金のリストア

f:id:moongift:20150516223705p:plain

例えば広告費表示などのリストアができます。消費型アイテムの場合、消費したかどうかの判定はサーバ側で判定する必要があります。

var _incomplete_purchase;    //未完了決済を格納する変数

applican.purchase.restorePurchase('inapp', restorePurchaseSuccess, restorePurchaseError);

function restorePurchaseSuccess(result){
    _incomplete_purchase = new Array();

    var cnt = result.length;
    if(cnt>0){
        for(var i=0; i<cnt; i++){
            var purchase = result[i];

            //購入が未完了のものをストック
            if((purchase.os=="ios" && !purchase.isRestore)
                || (purchase.os=="android" &&
                 (purchase.productId=="jp_co_xxx_yyy_coin100" ||
                  purchase.productId=="jp_co_xxx_yyy_coin200"))){

                _incomplete_purchase.push(purchase);
            }else{
                //※購入済みアイテムをレストアする処理
            }
        }
    }
    
    if(_incomplete_purchase.length>0){
        //購入が未完了のものを完了させる処理を呼ぶ
        repairPurchase();
    }else{
        alert('レストア完了');
    }
}
function restorePurchaseError(error){
    var dump = "restorePurchaseError\n";
    dump += "code:"+error.code+"\n";
    dump += "message:"+error.message+"\n";
    alert(dump);
}

//購入が未完了のものを完了させる処理
function repairPurchase(){
    if(_incomplete_purchase.length<1){
        alert('未完了決済の処理完了');
        return;
    }

    var purchase = _incomplete_purchase.shift();
    
    if(purchase.productId=='jp_co_xxx_yyy_coin100'){
        //※課金アイテムの付与などの処理を実装する
    }else if(purchase.productId=='jp_co_xxx_yyy_coin200'){
        //※課金アイテムの付与などの処理を実装する
    }

    //決済完了にする処理
    applican.purchase.finishPurchase(purchase.purchaseId, repairPurchase, repairPurchaseError);
}

function repairPurchaseError(error){
    alert('決済完了できませんでした。'+"code:"+error.code+"\n"+"message:"+error.message);
}

課金アイテムの情報

課金アイテムの情報を引き出すこともできます。アイテムの名称や課金額、説明などはiTunes Connect上で管理しますので、アプリ側ではこの情報にアクセスして表示する形になります。

f:id:moongift:20150516223608p:plain

var productIds = ['jp_co_xxx_yyy_coin100', 'jp_co_xxx_yyy_coin200'];
applican.purchase.getProducts(productIds, 'inapp', purchaseGetProductsSuccess, purchaseGetProductsError);
function purchaseGetProductsSuccess(products){
    var dump = "purchaseGetProductsSuccess\n";
    var cnt = products.length;
    if(cnt>0){
        for(var i=0; i<cnt; i++){
            var product = products[i];
            dump += "========================\n";
            dump += "productId:"+product.productId+"\n";
            dump += "name:"+product.name+"\n";
            dump += "price:"+product.price+"\n";
            dump += "description:"+product.description+"\n";
        }
    }
    alert(dump); 
}
function purchaseGetProductsError(error){
    var dump = "purchaseGetProductsError\n";
    dump += "code:"+error.code+"\n";
    dump += "message:"+error.message+"\n";
    alert(dump);
}

アプリの広告を非表示にしたり、購読したりするのは良くあるケースです。そうした処理をJavaScript(+iTunes Connect)の処理だけで終われるのはとても簡単です。ぜひアプリカンを使って、アプリ内課金を利用してみてください。

なおPurchase APIの詳細についてはPurchase | アプリカン | アプリ開発支援プラットフォームをご覧ください。

アプリカン | アプリ開発支援プラットフォーム