Mobile Platform as a Service:クイックスタート

HTML5 コンテナーとオフラインパッケージを使用して、コンテナーの初期化と呼び出し、HTML5 とネイティブ間の双方向通信、オフラインパッケージのロードと使用、Nebula コンテナーの自動追跡機能の統合、追跡データの確認などの機能を実装できます。

始める前に

プロジェクトはすでに mPaaS にアクセスできます。詳細については、次のコンテンツをご参照ください。既存のプロジェクトに基づくアクセスと CocoaPods の使用

SDK の追加

cocoapods-mPaaS プラグインを使用します。この方法は、既存のプロジェクトに基づくアクセスモードと CocoaPods の使用に適用できます。

1. Podfile ファイルで、mPaaS_pod "mPaaS_Nebula" を使用して、HTML5 コンテナーコンポーネントの依存関係を追加します。

   

2. pod install を実行して、HTML5 コンテナーへのアクセスを完了します。

SDK の使用

このトピックでは、HTML5 コンテナーとオフラインパッケージ の公式デモを使用して、ベースラインバージョン 10.1.60 以降のバージョンで HTML5 コンテナー SDK を使用する方法について説明します。

コンテナーの初期化

コンテナーの起動

• Nebula コンテナーを使用するには、プログラムの起動後に SDK API を呼び出してコンテナーを初期化する必要があります。DTFrameworkInterface の - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions でコンテナーを開始します。 mPaaS フレームワークによって提供されるカテゴリ DTFrameworkInterface + (プロジェクト名) でこのメソッドをオーバーライドします。

   - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // コンテナーを初期化します。
        [MPNebulaAdapterInterface initNebula];
    }

• プリセットオフラインパッケージ、JSAPI のカスタマイズ、プラグイン機能を使用する必要がある場合は、前のコードの initNebula API を次のコードの initNebulaWith API に置き換えます。次に、対応するパラメーターを渡してコンテナーを初期化します。

  • presetApplistPath: プリセットオフラインパッケージ情報のカスタムパス。

  • appPackagePath: プリセットオフラインパッケージのカスタムパス。

  • pluginsJsapisPath: カスタム JSAPI とカスタムプラグインファイルの保存パス。

     - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
    // コンテナーを初期化します。
    NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"MPCustomPresetApps.bundle/h5_json.json"] ofType:nil];
    NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"MPCustomPresetApps.bundle"] ofType:nil];
    NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
    [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:pluginsJsapisPath];
    }

注: initNebula と initNebulaWithCustomPresetApplistPath は、コンテナーを初期化するための 2 つのメソッドです。両方を同時に呼び出さないでください。

• ミニプログラムパッケージのリクエストの時間間隔を設定します。 mPaaS は、時間間隔のグローバル設定と個別設定の両方をサポートしています。

  • グローバル設定: 次のコードを使用して、コンテナーの初期化中にオフラインパッケージまたはミニプログラムの更新リクエスト間隔を設定できます。

    [MPNebulaAdapterInterface shareInstance].nebulaUpdateReqRate = 7200;

    7200 はグローバル更新リクエスト間隔を示します。 7200 がデフォルト値です。単位は秒です。この値を変更して、オフラインパッケージのリクエストのグローバル間隔を設定できます。値の範囲は 0 ～ 86400 秒（つまり、0 ～ 24 時間）です。 0 は、リクエスト間隔に制限がないことを示します。

  • 個別設定: リクエストの時間間隔は、現在のミニプログラムパッケージに対してのみ設定されます。コンソールで オフラインパッケージの追加 > 拡張情報 に移動し、{"asyncReqRate":"1800"} を入力してリクエストの時間間隔を設定できます。詳細については、HTML5 オフラインパッケージの作成 の 拡張情報 をご参照ください。

コンテナーのカスタマイズ

• 必要に応じて、MPNebulaAdapterInterface の属性を設定して、コンテナー構成をカスタマイズできます。構成は、DTFrameworkInterface の - (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions で実装する必要があります。そうしないと、構成はコンテナーのデフォルト構成によってオーバーライドされます。

   - (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // コンテナーをカスタマイズします。
        [MPNebulaAdapterInterface shareInstance].nebulaVeiwControllerClass = [MPH5WebViewController class];
        [MPNebulaAdapterInterface shareInstance].nebulaNeedVerify = NO;
        [MPNebulaAdapterInterface shareInstance].nebulaUserAgent = @"mPaaS/Portal";
        [MPNebulaAdapterInterface shareInstance].nebulaCommonResourceAppList = @[@"77777777"];
    }

• 次の表に属性を示します。

オフラインパッケージの更新

起動後にオフラインパッケージの完全な情報をリクエストし、サーバーで更新パッケージが利用可能かどうかを確認します。起動速度への影響を防ぐために、(void)application:(UIApplication \*)application afterDidFinishLaunchingWithOptions:(NSDictionary \*)launchOptions の後に呼び出しをリクエストすることをお勧めします。

- (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // コンテナーをカスタマイズします。
    [MPNebulaAdapterInterface shareInstance].nebulaVeiwControllerClass = [MPH5WebViewController class];
    [MPNebulaAdapterInterface shareInstance].nebulaNeedVerify = NO;
    [MPNebulaAdapterInterface shareInstance].nebulaUserAgent = @"mPaaS/Portal";
    [MPNebulaAdapterInterface shareInstance].nebulaCommonResourceAppList = @[@"77777777"];

    // オフラインパッケージの完全更新
    [[MPNebulaAdapterInterface shareInstance] requestAllNebulaApps:^(NSDictionary *data, NSError *error) {
        NSLog(@"");
    }];
}

次の図は、初期化が完了した後の効果を示しています。

フレームワークで管理されていない構成

アプリのライフサイクルが mPaaS フレームワークではなくカスタムデリゲートによって管理されている場合は、次の図に示すように、追加の構成が必要です。アプリが mPaaS フレームワークによって管理されている場合は、この手順をスキップしてください。

mPaaS フレームワークの起動

現在のアプリケーションの didFinishLaunchingWithOptions メソッドで、[[DTFrameworkInterface sharedInstance] manualInitMpaasFrameworkWithApplication:application launchOptions:launchOptions]; を呼び出して mPaaS フレームワークを起動します。

注: フレームワークが正常に起動するように、現在のアプリケーションの window と navigation の初期化が完了した後に呼び出しを実装します。

ブートローダーの作成

DTBootLoader から派生したサブクラスを作成し、createWindow メソッドと createNavigationController メソッドを書き直して、現在のアプリケーションの window と navigationControlle を返します。

• window を設定します: 現在のアプリケーションの keyWindow。

• navigationController を設定します: 現在のアプリケーションの keyWindow の rootviewcontroller。これは、DFNavigationController から派生する必要があります。

ブートローダーの指定

DTFrameworkInterface の category のメソッドを書き直して、現在のアプリケーションの bootloader を指定し、mPaaS フレームワークのデフォルトの window アプリケーションと launcher アプリケーションを非表示にします。

コンテナーの呼び出し

コンテナーの初期化後、HTML5 コンテナーを呼び出すことができます。以下に、3 つの呼び出し方法を示します。

• オンライン URL またはローカル HTML ファイルに基づいて HTML5 コンテナーを作成します。次のコード例を参照してください。

  // オンライン URL を開きます。
  [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com/products/MPAAS"}];
  // ローカル HTML ページを開きます。
  NSString *path = [[NSBundle mainBundle].bundlePath stringByAppendingFormat:@"/%@/%@", @"MPH5Demo.bundle", @"H52Native.html"];
  if ([path length] > 0) {
  [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": path}];
  }

• 受信したオフラインパッケージ情報に基づいて HTML5 コンテナーを作成し、自動プッシュを使用してコンテナーを開きます。次のコード例を参照してください。

   [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithNebulaApp:@{@"appId":@"90000000"}];

• 受信したオフラインパッケージ情報に基づいて HTML5 コンテナーを作成し、作成された HTML5 コンテナーインスタンスを返します。これは通常、ホームページのタブで使用されます。次のコード例を参照してください。

   [[MPNebulaAdapterInterface shareInstance] createH5ViewControllerWithNebulaApp:@{@"appId":@"90000000"}];

HTML5 とネイティブアプリ間の双方向通信を実装する

JSAPI を呼び出して特定のイベントをリッスンすることで、HTML5 とネイティブアプリ間の双方向通信を実装できます。

HTML5 ページでネイティブ関数を呼び出す

JSAPI を呼び出して、HTML5 がネイティブと通信できるようにすることができます。

Nebula コンテナーでサポートされている JSAPI と関連パラメーターの詳細については、「組み込み JSAPI」をご参照ください。

例

HTML5 ページでボタンがタップされたときに JSAPI pushWindow を呼び出して新しいページをロードします。

AlipayJSBridge.call('pushWindow', {
    url: 'https://tech.antfin.com',
    param: {
    readTitle: true,
    defaultTitle: true,
    // ...
    }
}, function(data) {alert('Call result'+JSON.stringify(data)); });

AlipayJSBridge の説明

AlipayJSBridge AlipayJSBridge は、Nebula コンテナーによって自動的に挿入される JSBridge です。Window.onload の実装後、コンテナーはグローバル変数 AlipayJSBridge を生成し、AlipayJSBridgeReady イベントをトリガーします。AlipayJSBridge の挿入は非同期プロセスです。したがって、API を呼び出す前に AlipayJSBridgeReady イベントをリッスンします。

次のコード例を参照してください。

<h1>bridge API 使用手順</h1>

<script>
function ready(callback) {
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

ready(function(){
  alert('bridge ready');
});
</script>

ネイティブページで HTML5 を呼び出す

特定のイベントをリッスンすることで、ネイティブと HTML5 間の通信を有効にすることができます。Nebula コンテナーでサポートされているイベントについては、「拡張イベントリスト」をご参照ください。

document.addEventListener('back', function (e) {
    if(confirm('back intercepted. Are you sure you want to return?')) {
        // 何かを実行します。
    }
}, false);

Nebula コンテナーでサポートされているデフォルトのイベントに加えて、ネイティブ側で次のメソッドを使用して、フロントエンドがリッスンできるイベントを定義できます。

// self: 現在の HTML5 ページがある VC
// data: ネイティブからフロントエンドに渡されるパラメーター
// callBack: フロントエンドがイベントを受信した後のコールバック
[self callHandler:@"customEvent" data:@{@"key":@"value"} responseCallback:^(id responseData) {
        NSLog(@"フロントエンドがイベントを受信した後のコールバック: %@", responseData);
    }];

Nebula コンテナー機能の拡張

Nebula コンテナーによって提供される HTML5 ページ間の基本的な双方向通信では不十分な場合は、Nebula の機能を拡張できます。

• JSAPI: ページでネイティブ関数を呼び出すには、たとえば、ActionSheet または連絡先ダイアログボックスを表示するには、JSAPI を拡張する必要があります。 JSAPI を使用すると、ハンドラーメソッドを使用して HTML5 ページにネイティブ機能を追加し、特定の機能を実装できます。詳細な手順については、「JSAPI のカスタマイズ」をご参照ください。

• プラグイン: 特定の時点（ページへの入場時やリクエストの受信時など）で特定のイベント（記録追跡や返されたデータの変更など）を終了するには、プラグインを開発する必要があります。対応するイベントをサブスクライブした後、プラグインはハンドラーのイベントで伝送されたデータを処理できます。詳細な手順については、「プラグインのカスタマイズ」をご参照ください。

オフラインパッケージのロード

従来のオンライン HTML5 技術は実際のネットワーク環境の影響を受け、HTML5 ページのパフォーマンスが低下する可能性があります。ネットワークが HTML5 ページのロードに与える影響を最小限に抑えるために、さまざまなサービスをオフラインパッケージとしてカプセル化し、リリースプラットフォームを介してクライアントに配信してクライアントリソースを更新できます。詳細については、「オフラインパッケージの概要」および「オフラインパッケージの使用」をご参照ください。

HTML5 コンテナーの追跡

HTML5 ページがロードされると、Nebula コンテナーはロードパフォーマンスを自動的に監視し、関連する動作データと例外データをキャプチャします。詳細については、「HTML5 コンテナーの追跡」をご参照ください。