すべてのプロダクト
Search

このプロダクト

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

    ドキュメントセンター

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

    最終更新日:Jan 17, 2025

    HTML5 コンテナーとオフラインパッケージは、ネイティブ AAR モードとコンポーネントモードでサポートされています。HTML5 コンテナーを使用すると、アプリでオンライン Web ページを開いたり、フロントエンドでネイティブ API 操作を呼び出したり、フロントエンドでカスタム JSAPI を呼び出したり、HTML5 ページのタイトルバーをカスタマイズしたり、UC カーネルを使用したりできます。HTML5 オフラインパッケージサービスを使用すると、オフラインパッケージを公開、プリセット、開始、および更新できます。

    始める前に

    • ネイティブ AAR に基づいて mPaaS に接続する場合は、前提条件の手順と後続の手順を実行します。詳細については、「プロジェクトに mPaaS を追加する」をご参照ください。

    • コンポーネントに基づいて mPaaS に接続する場合は、まずアクセス手順を完了します。詳細については、コンポーネントに基づいて mPaaS に接続する際の「アクセス手順」をご参照ください。

    UC SDK を追加する

    ネイティブ AAR モード

    プロジェクトで、HTML5 コンテナーコンポーネント管理 (AAR)ネイティブ AAR モードでのコンポーネントの依存関係の管理 ページで コンポーネントをインストールします。詳細については、「」をご参照ください。

    コンポーネントモード

    ポータルプロジェクトとバンドルプロジェクトで、HTML5 コンテナーコンポーネント管理 ページで コンポーネントをインストールします。

    詳細については、「アクセス手順」のコンポーネントの依存関係の管理に関する説明をご参照ください。

    mPaaS を初期化する

    ネイティブ AAR モードでは、mPaaS を初期化する必要があります。

    Application ノードに次のコードを追加します。

    public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        // mPaaS の初期化
        MP.init(this);    
    }
}

    詳細については、「mPaaS を初期化する」をご参照ください。

    ミニプログラムパッケージのリクエスト間隔を構成する

    mPaaS では、ミニプログラムパッケージのリクエスト間隔をグローバルまたは個別に構成できます。

    • グローバル構成：Android プロジェクトで、assets/config に custom_config.json という名前のファイルを作成し、ファイルに次のコンテンツを入力します。

      {
"value": "{\"config\":{\"al\":\"3\",\"pr\":{\"4\":\"86400\",\"common\":\"864000\"},\"ur\":\"1800\",\"fpr\":{\"common\":\"3888000\"}},\"switch\":\"yes\"}",
"key": "h5_nbmngconfig"\
}

      \"ur\":\"1800\" は、グローバル更新の間隔を指定します。値 1800 はデフォルト値で、秒単位で測定されます。値を変更して、グローバルオフラインパッケージのリクエスト間隔を設定できます。値の範囲は 0 ～ 86400 秒、つまり 0 ～ 24 時間です。値 0 は、間隔が指定されていないことを示します。

      重要：必要でない限り、他のパラメーターは変更しないでください。

    • 個別構成：構成は、現在のミニプログラムパッケージに対してのみ有効です。コンソールで、追加拡張機能の情報{"asyncReqRate":"1800"}拡張機能の情報HTML5 オフライン パッケージを作成する をクリックしてオフラインパッケージを追加します。 フィールドに と入力して、リクエスト間隔を設定します。詳細については、「」の の説明をご参照ください。

    構成されたリクエスト間隔が有効になっているかどうかを確認します。HTML5 オフラインパッケージサービスに接続されているプロジェクトを開くことができます。Logcat でログを開き、キーワード H5BaseAppProvider を選択します。ログに次の情報が含まれている場合、構成は有効になっています。

    lastUpdateTime: xxx updateRate: xxx

    SDK を使用する

    mPaaS Nebula HTML5 コンテナーは、MPNebula という名前の統一 API クラスを提供して、HTML5 コンテナーとオフラインパッケージの操作を実装します。

    呼び出しプロセスは次のとおりです。

    1. HTML5 オフラインパッケージを開始します。

      • オフラインパッケージを開始します。

        /**
* オフラインパッケージを開始します。
*
* @param appId: オフラインパッケージ ID
*/
public static void startApp(String appId);

      • 起動パラメーターを使用してオフラインパッケージを開始します。

        /**
* オフラインパッケージを開始します。
*
* @param appId: オフラインパッケージ ID
* @param params: 起動パラメーター
*/
public static void startApp(String appId, Bundle params);

    2. オンラインページを開始します。

      • オンラインページを開始します。

        /**
* オンライン URL を開始します。
*
* @param url: オンライン URL
*/
public static void startUrl(String url)

      • 起動パラメーターを使用してオンラインページを開始します。

        /**
* オンライン URL を開始します。
*
* @param url: オンライン URL
* @param param: 起動パラメーター
*/
public static void startUrl(String url, Bundle param);

    3. カスタム UserAgent を設定します。

      1. UA セッターを実装します。

        public class H5UaProviderImpl implements H5UaProvider {
@Override
public String getUa(String defaultUaStr) {
  // defaultUaStr パラメーターを変更したり、defaultUaStr パラメーターを含まない結果を返したりしないでください。
  return defaultUaStr + " AlipayClient/mPaaS"; 
}
}

      2. UA セットアップ API を呼び出します。

        /**
*UA を設定します。
*
* @param uaProvider: UA セッター。getUa メソッドを実装する必要があります。
*/
public static void setUa(H5UaProvider uaProvider)

      3. 次のように設定を実行します。

        MPNebula.setUa(new H5UaProviderImpl());

    4. カスタムコンテナービューを設定します。

      コンテナーは、カスタムタイトルバー、ナビゲーションメニュー、プルダウン更新のヘッダー、および WebView レイアウトを設定するためのメソッドを提供します。詳細については、「サンプル コード」をご参照ください。

      1. ビュージェッターを実装します。

        public class H5ViewProviderImpl implements H5ViewProvider {
@Override
public H5WebContentView createWebContentView(Context context) {
  // WebView のカスタムレイアウトはここに返されます。null が返された場合、デフォルトのビューが有効になります。
  return null;
}

@Override
public H5TitleView createTitleView(Context context) {
  // カスタムタイトルバーはここに返されます。null が返された場合、デフォルトのビューが有効になります。
  return null;
}

@Override
public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
  // プルダウン更新ヘッドはここに返されます。null が返された場合、デフォルトのビューが有効になります。
  return null;
}

@Override
public H5NavMenuView createNavMenu() {
  // カスタムナビゲーションメニューはここに返されます。null が返された場合、デフォルトのビューが有効になります。
  return null;
}
}

      2. ビューセットアップ API を呼び出します。

        /**
*タイトルバー、メニューバー、Web レイアウト、スライドプルダウン更新ヘッドビューなど、コンテナー関連のカスタムビューを設定します。
* @param viewProvider: カスタムビュープロバイダー
*/
public static void setCustomViewProvider(H5ViewProvider viewProvider);

      3. カスタムビューを設定します。

        MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

        注：カスタムタイトルバーを設定するには、最初にバンドル名を設定します。設定しないと、リソースが見つかりません。

        // タイトルバーリソースが存在するバンドルの名前を設定します。設定しないと、リソースを読み込めず、タイトルバーが有効になりません。
H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(), new H5ReplaceResourceProvider() {
@Override
public String getReplaceResourcesBundleName() {
  return BuildConfig.BUNDLE_NAME;
}
});
MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

    5. 単一コンテナーのビューをページに埋め込みます。

      必要に応じて、次のいずれか 1 つ以上のメソッドを選択して、HTML5 ページを単一コンテナーのビューに埋め込みます。API は、同期メソッドと非同期メソッドを提供します。

      • 同期メソッド

        /**
*HTML5 コンテナーのビューを取得します。
*
* @param activity: ページコンテキスト
* @param param: 起動パラメーター。アプリ ID または URL が含まれている場合があります
* @return: HTML5 コンテナーのビュー
*/
public static View getH5View(Activity activity, Bundle param);

      • 非同期メソッド

        /**
*HTML5 コンテナーのビューを非同期で取得します。
*
* @param activity: ページコンテキスト
* @param param: 起動パラメーター。アプリ ID または URL が含まれている場合があります
* @param h5PageReadyListener: 非同期コールバック
*/
public static void getH5ViewAsync(Activity activity, Bundle param, H5PageReadyListener h5PageReadyListener);

        注：