# サンプルアプリケーションを実行する

このページでは、 Mobage プラットフォームとの連携方法について理解するためにサンプルアプリケーションを実行する方法について説明します。

# サンプルアプリケーションの実行環境

サンプルアプリケーションは Mobage の Sandbox 環境と連携して実行することを想定して開発されています。 Mobage の Sandbox 環境を利用することで、実際の決済を発生させることなく、開発及び動作確認を行うことができます。 Sandbox 環境についての詳細な説明はこちらのページを参照してください。

また、サンプルアプリケーションは localhost と開発者サーバーどちらでも実行することができますが、 決済の非同期確認処理を動作させる場合、外部からのリクエストを受けることができる環境が必要となります。

# サンプルコードのダウンロード

こちらをクリックしzipファイルをダウンロードします。

# アプリケーション登録

サンプルアプリケーションの実行にはデベロッパーサイトへのアプリケーション登録が必要となります。ここではアプリケーションの登録方法を説明します。

  1. デベロッパーサイトにログイン後「アプリケーション」 > 「アプリケーションの追加」に進んで、赤枠に囲まれたフォームに必要事項を入力し最下部にある「入力内容確認」ボタンを押して送信してください。
    アプリケーションの追加のリンクはこちら
    Creating Application アプリケーションの登録が終わると「アプリケーション情報」画面が表示されます。赤枠で囲まれた部分が先ほどフォームで入力した内容が反映された部分です。 Application Infomation
  2. スマートフォン Web のアプリケーション固有の設定を行います。左側メニューの「アプリケーション情報」 > 「SP Web」に進んでください。URLは https://developer.dena.jp/mbga/admin/app/{YOUR_APP_ID}#tabset-smartphone_proxy となります。 {YOUT_APP_ID} を先ほど作ったアプリケーションのアプリケーションIDに差し替えてアクセスしてください。 進むと以下のような画面が表示されます。赤枠で囲まれた必須項目の入力を行います。 Application Settings for SPWeb 「ゲームアーキテクチャ」から「Mobage Connect」を選択してください。一度登録が完了するとアーキテクチャの変更はできません。 「アプリケーション紹介文^1」、「対応OS」を入力し最下部の「入力内容確認」ボタンを押して送信すると、スマートフォン Web 用のアプリケーション情報が表示されます。赤枠で囲まれた部分が先ほどフォームで入力した内容が反映された部分です。 Application Settings Completed

^1: アプリケーション紹介文についてはこちらのページをご覧ください。

# テストアカウントの用意

Sandbox 環境では本番の Mobage アカウントはご利用いただけません。Sandbox 上のアプリケーションをテストするにはテストアカウントの作成が必要です。
テストアカウントはパートナーごとに作成され、同じパートナーで作成されたアプリケーションのテストを行うことができます。

作成方法については こちらをご覧ください。

# サンプルコードにサンプルアプリケーションの設定を追加

先ほど登録したサンプルアプリケーションの情報の Sandbox 用の設定値を使ってサンプルコードの設定を進めます。本番の設定値は利用しません。

  1. 「アプリケーション情報」 > 「SP Web」のページの画面中央にある「Mobage Connect情報」>「Sandbox 用」を選択すると、「Client ID」、「Client Secret」などの情報が閲覧できます。内容を確認してください。

    Confirm Test Account

  2. 「Sandbox 用」画面で確認した「Client ID」と「Client Secret」をサンプルコードの webapp/src/main/resources/config/application.yaml に入力してください。

# 各種URLをデベロッパーサイトに登録する

サンプルコードを正しく動かすにはデベロッパーサイトに登録したサンプルアプリケーションに必要URLを登録する必要があります。登録する主なURLは以下です。

項目 説明
Client URI アプリケーションのトップページを表すURIです。 Mobage からの遷移時のリンク先となります。
Client Origin URI Mobage のサーバーからクロスドキュメントメッセージを受け付けられるoriginのホワイトリストです。
Redirect URI Mobage Connect サーバーからの Authorization Response を受け取る為のURIです。

サンプルコードでは上記URLに設定するURLをあらかじめサンプルコードの webapp/src/main/resources/config/application.yaml に設定しています。このURLをデベロッパーサイトへ登録します。

https://developer.dena.jp/mbga/admin/app/{YOUR_APP_ID}/smartphone_proxy/connect/edit を開いて「Sandbox 用」の折りたたみを開き、各種項目に以下のように入力してください。

項目 URL
Client URI http://localhost:8080
Client Origin URI http://localhost:8080
Redirect URI http://localhost:8080/mobage/auth/callback

他の入力フォームもありますが、サンプルコードにおいては空欄のままで問題ありません。^2

^2: 他の入力フォームを空欄のままにした理由は mobage.oauth.logoutmobage.oauth.disconnect というJS APIを利用しているためです。詳しくは こちらAPI仕様 をご覧ください。

# アイテム情報を登録する

サンプルコードのアイテム購入・支払い機能を動作させるには、サンプルコード中のアイテムIDと Developer Site上に登録されたアイテムIDを一致させる必要があります。

配布しているサンプルコードにはitem1 という値でアイテム IDが埋め込まれています。Developer Site上でアイテム登録を行い、このアイテムIDを入力します。

https://developer.dena.jp/mbga/admin/app/{YOUR_APP_ID}/item/add を開いて下記の項目を入力してください。

項目 入力する値
アイテム識別名 item1
価格 100

ここではサンプルコードを動かす目的のため、他の欄は空欄で問題ありません。

# ログインする

  1. サンプルコードのREADMEにある Run the sample application の方法を使ってアプリケーションを立ち上げてください。
  2. ご利用のブラウザの開発者ツールからSP表示にして http://localhost:8080/mobage/auth に進んでください。「Do login with Mobage」のボタンをクリックしてください。すると Mobage へのログインフォームが別タブで表示されます。
  3. ログインフォームに先に作ったテストアカウントのメールアドレスとパスワードを入れてログインしてください。
  4. サンプルアプリケーションのログインは初回実行時、アプリケーションのインストールを促す画面が表示されます。「ゲーム開始」ボタンを押してください。
  5. するとログインフォームが閉じてサンプルアプリケーションに戻ります。ログインしているユーザーのニックネームが表示されていることを確認できるはずです。

他のボタンも試してみてください。なお、ブラウザの開発者ツールの Console 上にログを出すようにしております。ログインしないでログアウトのボタンを押した場合なども Console にエラーログが表示されます。確認してみてください。

# アイテム購入機能を動かす

前項の手順で Mobageを利用したログインを実行した後、トップページから Sample Application for PaymentStart Payment with Mobageの順にクリックすると、アイテム購入機能の挙動を確認することが可能です。

MIT Licensed | Copyright © 2020-present DeNA.Co., Ltd. All rights reserved.