カスタムテーマ機能

 

概要

Mobage JS SDKでは、アイテム購入画面、ログイン画面、NBPF 認可画面の CSS をカスタマイズすることで、ゲームの世界観に合わせた UI を提供しています。

ここでは

  • デベロッパーサイトでの Custom Theme 設定方法
  • mobage.ui.open() メソッドにより、カスタマイズされたアイテム購入画面を呼び出す方法
  • mobage.ui.open() メソッドにより、カスタマイズされたゲームポイント購入画面を呼び出す方法（Shell App SDK のみ）
  • mobage.oauth.connect() メソッドにより、カスタマイズされたログイン画面を呼び出す方法

について解説します。

このチュートリアルをはじめる前に

  • アイテム購入画面のカスタマイズについては、以下のアイテム購入のチュートリアルをが完了している前提になります。
  • ログイン画面のカスタマイズについては、ログインの実装が終了していることが条件です。

実装のステップ

アイテム購入画面、ログイン画面の CSS をカスタマイズする手順は大きく以下のステップで進めます。

  1. Mobage Developers Japan で Custom Theme を設定をする
  2. アイテム購入画面、ログイン画面のカスタムテーマを指定する

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
      • アイテム購入画面用テーマのバージョンを指定

ゲームポイント購入画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.2.0 以降

Mobage JS SDK の mobage.ui.open() メソッドを用いて、カスタマイズされたアイテム購入画面を指定できます。

デベロッパーサイト上の識別子 choose_product がゲームポイント購入画面となります。
テーマの指定は payment オブジェクトに以下の要素を指定することで行うことができます。

  • chooseProductCustomTheme
    • ゲームポイント購入画面用テーマの指定
  • chooseProductAppearanceVersion
    • ゲームポイント購入画面用テーマのバージョンを指定

ログイン画面、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 がピンコード入力画面となります。

  • CustomTheme
    • ログイン、NBPF認可、会員登録、ピンコード入力画面用テーマの指定
  • appearanceVersion
    • ログイン、NBPF認可、会員登録、ピンコード入力画面用テーマのバージョンを指定

 

JS SDK 3.3.0 以前のバージョン利用の場合

デベロッパーサイト上の識別子 login がログイン画面、authorize が NBPF 認可画面となります。

  • loginCustomTheme
    • ログイン画面用テーマの指定
  • loginAppearanceVersion
    • ログイン画面用テーマのバージョンを指定
  • authCustomTheme
    • NBPF 認可画面用テーマの指定
  • authAppearanceVersion
    • NBPF 認可画面用テーマのバージョンを指定

 

ユーザアップグレード画面のカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.4.0 以降

Mobage JS SDK の mobage.ui.open() メソッドを用いて、カスタマイズされた友達招待サービスを指定できます。

デベロッパーサイト上の識別子 upgrade がユーザアップグレード画面となります。
テーマの指定は upgrade オブジェクトに以下の要素を指定することで行うことができます。

  • customTheme
    • ユーザアップグレード画面用テーマの指定
  • appearanceVersion
    • ユーザアップグレード画面用テーマのバージョンを指定

友達招待サービスのカスタムテーマを mobage.ui.open で呼び出す ※ JS SDK 3.3.0 以降

Mobage JS SDK の mobage.ui.open() メソッドを用いて、カスタマイズされた友達招待サービスを指定できます。

デベロッパーサイト上の識別子 invitation が友達招待サービスとなります。
テーマの指定は invitation オブジェクトに以下の要素を指定することで行うことができます。

  • customTheme
    • 友達招待サービス用テーマの指定
  • appearanceVersion
    • 友達招待サービステーマのバージョンを指定

 

注意事項

  • 動作検証は Android 端末または iOS 端末で確認を推奨いたします。
  • 指定される CSS URL は https の環境をご用意ください。
  • SSL 証明書に不備がある場合アプリから CSS を取得できないケースがあるため、信頼された機関によって発行された証明書をご利用ください。

 

更新履歴

  • 2016/04/15
    • カスタムテーマに会員登録、ピンコード入力、ユーザアップグレード画面が追加されたのに伴い、追記
    • JS SDK 3.4.0 から ログイン画面のテーマの呼び出し方法が変更になったため、追記
  • 2016/01/27
    • カスタムテーマにゲームポイント購入画面が追加されたのに伴い、追記
  • 2015/12/22
    • Custom Theme の増加に伴い、修正

PREVIOUS

チャット機能

NEXT

各種 API / 各種設定の使い方

Mobage Developers