Shell App SDK とは

This page is not available in English.
Please select another language.

Shell App SDK を用いた開発は、Mobage JSSDK を用いた開発が終わっている前提で記載されています。

Shell App SDK 1.4.1 以降を想定して記載されています。

Shell App SDK を用いたゲームプロジェクトの作成

Shell App SDK を使ったゲームのプロジェクトを作成していきます。

Info.plistでの"Application does not run in background" = "YES"の設定は絶対に行わないでください。

  1. Xcode を起動し、[File] -> [New] -> [Project] を選択し、新規プロジェクトを作成します。
  2. 選択すると「Choose a template for your new project:」ダイアログが表示されますので、[iOS] -> [Application] -> [Single View Application] を選択して、[Next] ボタンをクリックします。


  3. Product Name, Organization Name, Organization Identifier を入力します。適切に入力してください。[Next] ボタンをクリックします。

  4. プロジェクトの保存先の Directory を選択し、[Create] ボタンをクリックすると、プロジェクトの作成が完了します。

  5. プロジェクト作成が完了したら、① のプロジェクト名を選択、右側のペインから②の [Info] を選び、③の Bundle Identifier を変更します。Bundle Identifier は jp.mobage.apple.g120XXXXX のような形式にします。XXXXX には数字が入ります。

  6. URL スキームを設定します。URL Types の「+」ボタンをクリックして URL スキームを追加します
  7. URL Schemes には、「mobage-client-${CFBundleIdentifier}」を入力します。${CFBundleIdentifier} は Bundle Identifier を示していて、実際には URL スキームは mobage-client-jp.mobage.apple.g120XXXXX となります。

  8. Shell App SDK for iOS では、セマンティックなバージョン番号をつけなければなりません。以下 Bundle versions string, short を 1.0.0  のようにセマンティックなバージョン番号に設定します。

    セマンティックバージョニングとは、バージョン番号を 1.3.2 のようなX.Y.Z (Major.Minor.Patch) で表現する方法のことです。

    それぞれの番号は 65536 未満の値にしてください。なお、セマンティックバージョニングについて詳しくはこちらを参照してください。

  9. 左のペインに MobageShellApp.framework と MobageShellAppResources.bundle をドラッグアンドドロップします。
  10. ドラッグアンドドロップ後、[Choose options for adding these files] ダイアログが表示されますので、[Copy items if needed] にチェックを入れて②の finish ボタンをクリックします。
  11. [Build Phases] を選択し、 [Link Binary With libraries] の + ボタンをクリックします。
  13. クリックすると [Choose framework and libraries to add:] ダイアログが表示されます。上の検索ボックスに CoreTele と入力すると、CoreTelephony.framework が表示されますので、選択して右下の [Add] ボタンをクリックします。
  14. 同様の手順で以下の framework を導入します。
    1. CoreTelephony.framework
    2. SystemConfiguration.framework
    3. CoreGraphics.framework
    4. UIKit.framework
    5. Foundation.framework
    6. StoreKit.framework
    7. Webkit.framework
    8. SafariServices.framework
  15. ※ すべて導入すると以下の様な画面になります。
  16. Xcode 7 以降でビルドしたい場合には、こちらの対応も必要になります。
Info.plist で Application does not run in background の設定を YES にするとログインできなくなりますのでご注意ください。

以上でプロジェクトは完成しました。続いてコードを編集していきます。

ソースコードの編集

MSASContext の初期化

  1. Dev Site から client credentials (iOS タブの embedded key, embedded secret) を取得します。

  2. AppDelegate.m に以下の import 文を追記します。

  3. application:didFinishLaunchingWithOptions: メソッドで、以下のように setKey メソッド、setSecret メソッドを呼び出します。

  4. application:openURL:sourceApplication:annotation: メソッドおよび application:openURL:options: メソッドで、以下のように MSASContext#handleOpenURL: メソッドを呼び出します。

Basic 認証

sandbox 環境で開発中の NBPF アプリは他の開発者がアクセスできてしまうリスクがありますので、アプリのサーバサイドで Basic 認証を必ずかけてください。

ただし、SDK側の WebView では Basic 認証周りのサポートは行っていません。そのため、Basic 認証を突破させるためにはアプリケーション側で以下のような対応が必要です。

  • AppDelegate.m の application:didFinishLaunchingWithOptions: メソッドに、以下のコードを記載します。※ userId と password には Basic 認証に設定されているものを入れてください。

    • 上記実装の注意点は以下になります。

      • initWithHost に指定するホスト名は、開発サーバのホスト名と合わせて下さい。(例: dev.example.game.co.jp)
      • port に指定するポート番号は、開発サーバで listen しているポート番号と合わせて下さい。(例: 80)
      • protocol も同様に合わせて下さい。
      • realmについては、認証に失敗した場合に開発サーバが返す WWW-Authenticate ヘッダで示されるrealmの値を用いて下さい。
        • 以下は、localhost:5000 で立ち上げている Web サーバ（Basic 認証あり）の realm の値を確かめるサンプルです。この場合は、"rescticted data" が realm に指定すべき値となります。

WebView の組み込み

Shell App SDK for iOS では、以下の 2 種類の WebView が存在します。WebView を継承したクラスを作りたい場合には、以下の 2 クラスを継承してください。

  • MSASUIWebView 
    • UIWebView を継承したクラス
    • iOS 全般で使用可
    • JavaScript の実行速度が遅い
  • MSASWKWebView
    • WKWebView を継承したクラス
    • iOS 8 以降で使用可
    • JavaScript の実行速度が UIWebView に比べて速い。Safari と同等。
    • ページ遷移が UIWebView に比べてやや遅い。遅い端末で認識できる程度。

上記の WebView のどちらを使っても構いませんし、iOS8 以降とそれ以前の iOS でオブジェクトの出し分けをしていただいても構いません。コンテンツの内容に応じて使い分けてください。

MSASUIWebView の組み込み

Mobage JavaScript SDK を利用するコンテンツは MSASUIWebView もしくは MSASWKWebView を利用して表示する必要があります。今回は MSASUIWebView をデフォルトの ViewController クラスに実装してみます。まずは、ViewController.h に以下のように import 文を追記します。

次に @interface ViewController : UIViewController に以下のようにプロパティを追記します。

ViewController.m の viewDidLoad 内に実装していきます。

まずは、MSASUIWebView オブジェクトを初期化します。とりあえずサイズは親の View のサイズにステータスバーのサイズを足したものを指定します。

Dev Site に設定している Client URI を以下のように設定して、読み込みを行います。

ViewController の view に msasuiwv オブジェクトを addSubview すれば、動作するものは完成です。

MSASWKWebView の組み込み

Mobage JavaScript SDK を利用するコンテンツは MSASUIWebView もしくは MSASWKWebView を利用して表示する必要があります。今回は MSASWKWebView をデフォルトの ViewController クラスに実装してみます。まずは、ViewController.h に以下のように import 文を追記します。

次に @interface ViewController : UIViewController を以下のように変更します。これは MSASWKWebView では、一部  Javascript が正常に動かないので、その対応のために delegate メソッド内で修正を加える必要があるためです。

次に @interface ViewController : UIViewController<WKUIDelegate>

 に以下のようにプロパティを追記します。

ViewController.m の viewDidLoad 内に実装していきます。

まずは、MSASWKWebView オブジェクトを初期化します。とりあえずサイズは親の View のサイズにステータスバーのサイズを足したものを指定します。

delegate を設定します。

Dev Site に設定している Client URI を以下のように設定して、読み込みを行います。

ViewController の view に msaswkwv オブジェクトを addSubview します。

以下のように WKUIDelegate メソッドを実装します。MSASWKWebView で一部 Javascript を正常に動作させるための措置です。

以上でひと通りの実装が完了しました。

MSASUIWebView と MSASWKWebView の出し分け

上記、MSASUIWebView と MSASWKWebView の実装が終わっている状態で、viewDidLoad を以下のように書き換えます。

viewDidLoad 以外で、iOS8 以上と iOS8 未満の iOS で動作を切り分けたり、msasuiwv もしくは msaswkwv にアクセスする場合には、上記のコードでコメントアウトされている ios8later フラグを使用してください。（その場合はプロパティ宣言します。@property(nonatomic) bool ios8later;）

補足

上記すべて実装した ViewController.m は以下になります。

実行

あとはシミュレータで実行してみます。以下のように画面が出てきたら成功です。Hybrid Flow でのログインなどが行えるか検証してみてください。

実機での動作確認

実機での動作確認には iOS Dev Center での App ID や Provisioning Profile の設定が必要になります。

更新履歴

  • 2015/12/18
    • SafariServices.framework の追加
    • handleOpenURL: の実装を追加
    • Xcode7 での対応について追加
  • 2015/10/02
    • MobageShellApp.framework と MobageShellAppResources.bundle のインポート方法を修正
  • 2015/09/14
    • Info.plistでの"Application does not run in background" = "YES"の設定は絶対に行わないように注意文言を追加
  • 2015/02/17
    • セマンティックなバージョン番号が必要であることを追記
  • 2015/02/05
    • 新規作成

PREVIOUS

Caution points of Shell App SDK 1.4.1 later and Xcode7

NEXT

Shell App SDK とは

Mobage Developers