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

前提条件

• ネイティブ AAR 統合方法を使用する場合は、まず「プロジェクトへの mPaaS の追加」の手順を完了してください。

• コンポーネントベース統合方法を使用する場合は、まず「コンポーネントベース統合フロー」を完了してください。

SDK の追加

ネイティブ AAR

プロジェクトに H5 コンテナー コンポーネントをインストールするには、AAR コンポーネント管理 を使用します。詳細については、「AAR コンポーネント管理」をご参照ください。

コンポーネントベース

Portal プロジェクトおよび Bundle プロジェクトに H5 コンテナー コンポーネントをインストールするには、コンポーネント管理 を使用します。詳細については、「コンポーネント依存関係の管理」をご参照ください。

mPaaS の初期化

ネイティブ AAR 統合方法 を使用する場合は、mPaaS を初期化する必要があります。そのためには、Application クラスに次のコードを追加します。

public class MyApplication extends Application {
    
    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize 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（24 時間に相当）です。0 を指定すると、リクエスト間隔に制限がなくなります。

  重要

  他のパラメーターは変更しないでください。

• 個別設定：この設定は特定のミニアプリパッケージに適用されます。コンソールで [オフラインパッケージの追加] > [拡張情報] に移動し、リクエスト間隔を設定するために {"asyncReqRate":"1800"} を入力します。詳細については、「H5 オフラインパッケージの作成」の 拡張情報 セクションをご参照ください。

リクエスト間隔の設定が有効になっていることを確認するには、H5 オフラインパッケージを統合したプロジェクトを開き、logcat ログを H5BaseAppProvider キーワードでフィルタリングします。次のログエントリが表示された場合、設定は成功しています。

lastUpdateTime: xxx updateRate: xxx

SDK の使用

mPaaS Nebula H5 コンテナーは、H5 コンテナーおよびオフラインパッケージの操作を一元管理するための統一インターフェイスクラス MPNebula を提供しています。呼び出しプロシージャは次のとおりです。

1. H5 オフラインパッケージの起動

   • オフラインパッケージの起動：

     /**
     * Starts an offline package.
     *
     * @param appId The offline package ID.
     */
     public static void startApp(String appId);

   • 起動パラメーター付きでオフラインパッケージを起動：

     /**
     * Starts an offline package.
     *
     * @param appId  The offline package ID.
     * @param params The startup parameters.
     */
     public static void startApp(String appId, Bundle params);

2. オンラインページの起動

   • オンラインページの起動：

     /**
     * Starts an online URL.
     *
     * @param url The online URL.
     */
     public static void startUrl(String url)

   • 起動パラメーター付きでオンラインページを起動：

     /**
     * Starts an online URL.
     *
     * @param url   The online URL.
     * @param param The startup parameters.
     */
     public static void startUrl(String url, Bundle param);

3. カスタム UserAgent の設定

   1. まず、次の例のように User Agent (UA) のプロバイダーを実装します。

      public class H5UaProviderImpl implements H5UaProvider {
      @Override
      public String getUa(String defaultUaStr) {
       // Do not modify defaultUaStr or return a result that does not contain defaultUaStr.
       return defaultUaStr + " AlipayClient/mPaaS"; 
      }
      }

   2. 次に、UA を設定する API を呼び出します。

      /**
      * Sets the UA.
      *
      * @param uaProvider The UA provider. The developer must implement the getUa method.
      */
      public static void setUa(H5UaProvider uaProvider)

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

      MPNebula.setUa(new H5UaProviderImpl());

4. カスタムコンテナービューの設定

   コンテナーは、カスタムタイトルバー、ナビゲーションメニュー、プルトゥリフレッシュヘッダー、WebView ホストレイアウトを設定するメソッドを提供しています。具体的な実装方法については、「コードサンプルの取得」にある、AAR 統合方法による H5 コンテナーおよびオフラインパッケージのコードサンプルをご参照ください。

   1. まず、次の例のようにビューのプロバイダーを実装します。

      public class H5ViewProviderImpl implements H5ViewProvider {
      @Override
      public H5WebContentView createWebContentView(Context context) {
       // Return a custom WebView host layout here. If null is returned, the default view is used.
       return null;
      }
      
      @Override
      public H5TitleView createTitleView(Context context) {
       // Return a custom title bar here. If null is returned, the default view is used.
       return null;
      }
      
      @Override
      public H5PullHeaderView createPullHeaderView(Context context, ViewGroup viewGroup) {
       // Return a custom pull-to-refresh header here. If null is returned, the default view is used.
       return null;
      }
      
      @Override
      public H5NavMenuView createNavMenu() {
       // Return a custom navigation menu here. If null is returned, the default view is used.
       return null;
      }
      }

   2. 次に、ビューを設定するインターフェイスを呼び出します。

      /**
      * Sets custom container-related views, such as the title bar, menu bar, web layout, and pull-to-refresh view.
      * @param viewProvider The custom view provider.
      */
      public static void setCustomViewProvider(H5ViewProvider viewProvider);

   3. 設定プロシージャを実行します。

      MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

      説明

      カスタムタイトルバーを設定するには、事前にバンドル名を設定する必要があります。設定しないと、必要なリソースが見つからない可能性があります。

      // You must set the bundle name where the title bar resources are located. If you do not set it, the resources cannot be loaded and the title bar will not take effect.
      H5Utils.setProvider(H5ReplaceResourceProvider.class.getName(), new H5ReplaceResourceProvider() {
      @Override
      public String getReplaceResourcesBundleName() {
       return BuildConfig.BUNDLE_NAME;
      }
      });
      MPNebula.setCustomViewProvider(new H5ViewProviderImpl());

5. 単一コンテナーのビューをページ内に埋め込む

   H5 ページをコンテナー内のビューとして埋め込むことができます。必要に応じて、以下のいずれかの方法を選択してください。同期方式と非同期方式の両方が利用可能です。

   • 同期方式

     /**
     * Gets the view of the H5 container.
     *
     * @param activity The page context.
     * @param param    The startup parameters, which can include an appid or a URL.
     * @return The view of the H5 container.
     */
     public static View getH5View(Activity activity, Bundle param);

   • 非同期方式

     /**
     * Asynchronously gets the view of the H5 container.
     *
     * @param activity            The page context.
     * @param param               The startup parameters, which can include an appid or a URL.
     * @param h5PageReadyListener The asynchronous callback.
     */
     public static void getH5ViewAsync(Activity activity, Bundle param, H5PageReadyListener h5PageReadyListener);

     説明

     • 同期方式または非同期方式でコンテナーを埋め込む前に、対応するオフラインパッケージの情報を取得してください。

     • 非同期方式はメインスレッドを占有せず、パフォーマンスに影響を与えません。