カスタムテーマ機能
This page is not available in English.
Please select another language.
- 概要
- このチュートリアルをはじめる前に
- 実装のステップ
- Mobage Developers Japan で Custom Theme を設定をする
- アイテム購入画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 2.15.0 以降
- ゲームポイント購入画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.2.0 以降
- ログイン画面、NBPF認可画面、会員登録画面のカスタムテーマを mobage.oauth.connect で呼び出す ※ JS SDK 3.1.0 以降
- ユーザアップグレード画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.4.0 以降
- 友達招待サービスのカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.3.0 以降
- 注意事項
- 更新履歴
概要
Mobage JS SDKでは、アイテム購入画面、ログイン画面、NBPF 認可画面の CSS をカスタマイズすることで、ゲームの世界観に合わせた UI を提供しています。
ここでは
- デベロッパーサイトでの Custom Theme 設定方法
- mobage.ui.open() メソッドにより、カスタマイズされたアイテム購入画面を呼び出す方法
- mobage.ui.open() メソッドにより、カスタマイズされたゲームポイント購入画面を呼び出す方法(Shell App SDK のみ)
- mobage.oauth.connect() メソッドにより、カスタマイズされたログイン画面を呼び出す方法
について解説します。
このチュートリアルをはじめる前に
- アイテム購入画面のカスタマイズについては、以下のアイテム購入のチュートリアルをが完了している前提になります。
- ログイン画面のカスタマイズについては、ログインの実装が終了していることが条件です。
実装のステップ
アイテム購入画面、ログイン画面の CSS をカスタマイズする手順は大きく以下のステップで進めます。
- Mobage Developers Japan で Custom Theme を設定をする
- アイテム購入画面、ログイン画面のカスタムテーマを指定する
Mobage Developers Japan で Custom Theme を設定をする
利用するカスタムテーマ用 CSS URL 設定をおこないます。
- ダッシュボードの左メニューより「アプリケーション」>「アプリケーション一覧」画面を開きます。
- 「アプリケーション一覧」から開発しているアプリケーションを選択します。
- 表示されたページの左メニューにある「Mobage Connect情報」を選択します。
- Mobage Connect 情報の中にある「Custom Theme 設定」を選択します。
- CSS URL を指定します。
- 設定された CSS URL は Service Version とあわせて保存されます。
Service の payment, login, authorize, choose_product のそれぞれで Custom Theme を設定できます。choose_product は NBPF SPWeb ではご利用いただけない Shell App SDK の専用の Custom Theme になります。 アイテム購入画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 2.15.0 以降
Mobage JS SDK の mobage.ui.open() メソッドを用いて、カスタマイズされたアイテム購入画面を指定できます。デベロッパーサイト上の識別子 payment がアイテム購入画面となります。
テーマの指定は payment オブジェクトに以下の要素を指定することで行うことができます。- customTheme
- アイテム購入画面用テーマの指定
- appearanceVersion
- アイテム購入画面用テーマのバージョンを指定
- customTheme
ゲームポイント購入画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.2.0 以降
Mobage JS SDK の mobage.ui.open() メソッドを用いて、カスタマイズされたアイテム購入画面を指定できます。
![]() | デベロッパーサイト上の識別子 choose_product がゲームポイント購入画面となります。
|
ログイン画面、NBPF認可画面、会員登録画面のカスタムテーマを mobage.oauth.connect で呼び出す ※ JS SDK 3.1.0 以降
Mobage JS SDK の mobage.oauth.connect() メソッドを用いて、カスタマイズされたログイン画面、NBPF 認可画面を指定できます。
テーマの指定方法は JS SDK のバージョンによって異なります。
JS SDK 3.4.0 以降のバージョン利用の場合
![]() | デベロッパーサイト上の識別子 login がログイン、 authorize がNBPF認可、 register が会員登録、 pincode がピンコード入力画面となります。
|
JS SDK 3.3.0 以前のバージョン利用の場合
![]() | デベロッパーサイト上の識別子 login がログイン画面、authorize が NBPF 認可画面となります。
|
ユーザアップグレード画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.4.0 以降
Mobage JS SDK の mobage.ui.open() メソッドを用いて、カスタマイズされた友達招待サービスを指定できます。
![]() | デベロッパーサイト上の識別子 upgrade がユーザアップグレード画面となります。
|
友達招待サービスのカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.3.0 以降
Mobage JS SDK の mobage.ui.open() メソッドを用いて、カスタマイズされた友達招待サービスを指定できます。
![]() | デベロッパーサイト上の識別子 invitation が友達招待サービスとなります。
|
注意事項
- 動作検証は Android 端末または iOS 端末で確認を推奨いたします。
- 指定される CSS URL は https の環境をご用意ください。
- SSL 証明書に不備がある場合アプリから CSS を取得できないケースがあるため、信頼された機関によって発行された証明書をご利用ください。
更新履歴
- 2016/04/15
- カスタムテーマに会員登録、ピンコード入力、ユーザアップグレード画面が追加されたのに伴い、追記
- JS SDK 3.4.0 から ログイン画面のテーマの呼び出し方法が変更になったため、追記
- 2016/01/27
- カスタムテーマにゲームポイント購入画面が追加されたのに伴い、追記
- 2015/12/22
- Custom Theme の増加に伴い、修正