Mobile Platform as a Service:カスタム JSAPI

JavaScript API（JSAPI）は、HTML5 アプリにネイティブ機能を提供する API です。これらの API を使用すると、豊富なネイティブ機能と制御機能を活用して、HTML5 アプリのユーザーエクスペリエンスを向上させることができます。

HTML5 コンテナーコンポーネントには、次の機能があります。

• プッシュ、ポップ、タイトル設定などの機能を実装するための豊富な組み込み JSAPI を提供します。詳細については、「組み込み JSAPI」をご参照ください。
• ユーザーがビジネスの拡張ニーズに合わせて JSAPI とプラグインをカスタマイズできるようにします。

このトピックでは、JSAPI とプラグインをカスタマイズする方法について説明します。

このタスクについて

カスタム JSAPI プラグインには、次の機能があります。

• サービスが HTML5 コンテナーに柔軟に接続できるように、HTML5 コンテナーは外部サービスのプラグイン構成を登録するメカニズムを提供します。
• このようにして、クライアントはカスタムの外部プラグインを登録し、コードをバンドルに配置できます。プロセス全体を通して HTML5 コンテナーの介入はありません。プラグインがプラグイン構成に基づいて登録されている場合、HTML5 コンテナーはページ呼び出し中にのみオブジェクトを初期化し、オブジェクトをすぐに生成しません。
• プラグインは異なるバンドルに実装および登録でき、実装と登録の分離を実現します。H5Service を使用して、プラグインをコンテナーに動的に挿入する必要があります。

フロントエンドページがネイティブ JSAPI を呼び出す

1. MPNebula の登録 JSAPI を使用して JSAPI を登録します。

   注: MyJSApiPlugin のソースコードは、「コードサンプル」で確認できます。
   • 次のように JSAPI を登録します。

     /**
     * カスタム HTML5 プラグイン（JSAPI）を登録します。
     *
     * @param className: プラグインのクラス名。完全なパス（パッケージ+クラス）が必要です。
     * @param bundleName: バンドル名（バンドル名は module/build/intermediates/bundle/META-INF/BUNDLE.MF で確認できます。プラグインがポータルプロジェクトに書き込まれている場合、bundleName は空の文字列 "" に設定する必要があります。）
     * @param scope: スコープ。通常は page です。
     * @param events: 登録済みイベント。
     */
     public static void registerH5Plugin(String className, String bundleName, String scope, String[] events)

   • 登録例:

     MPNebula.registerH5Plugin(
       MyJSApiPlugin.class.getName(),
       BuildConfig.BUNDLE_NAME,
       "page",
       new String[]{"myapi1","myapi2",H5Plugin.CommonEvents.H5_PAGE_SHOULD_LOAD_URL}
     );

2. フロントエンドがカスタム JSAPI を呼び出せるようにします。

   event を上記のプラグイン登録イベントに変更して、フロントエンドがカスタム JSAPI を呼び出せるようにします。プラグインは、event.getParam() を使用して転送された JS 値を取得し、値からデータを解析します。

   AlipayJSBridge.call('myapi2', {
    param2: 'World'
   },
   function(result) {
    console.log(result);
   });

ネイティブがフロントエンドページを呼び出す

HTML5 コンテナーでは、ネイティブがページをアクティブに呼び出すことができます。

ネットワーク変更 JSAPI を例にとります。ページはこのイベントを次のようにリッスンします。

1. フロントエンドがリッスンを登録します。

   document.addEventListener('h5NetworkChange',
   function(e) {
    alert("ネットワーク環境が変更された場合は、getNetworkType API を呼び出して詳細を取得してください。");
   },
   false);

2. クライアントはネットワークの変更をリッスンし、呼び出しイベントをページに送信します。

   JSONObject param = new JSONObject();
   // param はカスタムパラメーターを示します。
   param.put("data", param);
   H5Page h5Page = h5Service.getTopH5Page();
   if (h5Page != null) {
    h5Page.getBridge().sendDataWarpToWeb("h5NetworkChange", param, null);
   }

検査ツールを使用する

Chrome の検査ツールを使用して、JSAPI が正常に呼び出されたかどうかを確認します。

1. 携帯電話を PC に接続します。PC で Chrome ブラウザを開き、アドレスバーに chrome://inspect と入力して、試運転ページを開きます。

2. mPaaS デモを使用して Ant Financial のホームページを開きます。Chrome の検査ページが次の図のように変わります。

   注: 一部の PC では、chrome://inspect を入力した後に白い画面が表示されます。この場合は、Chrome を最新バージョンにスペックアップしてください。

   

3. [検査] をクリックします。次の図に示すページが表示されます。

   
4. ツールバーの コンソール をクリックして、試運転モードに入ります。その後、カスタム API を呼び出すことができます。

関連リンク

• コードサンプル
• FAQ