Mobile Platform as a Service:カスタム JSAPI

H5 コンテナー コンポーネントは、以下の機能を提供します。

• ページのプッシュ・ポップやタイトル設定などの機能に対応した豊富な組み込み JSAPI セット。詳細については、「組み込み JSAPI」をご参照ください。

• ビジネス要件を満たすためのカスタム JSAPI およびプラグインのサポート。

本トピックでは、H5 コンテナーとオフラインパッケージ のデモを使用して、カスタムプラグインの作成方法を説明します。このプラグインは、HTML5 ページの読み込み時にナビゲーションバーを変更します。

このタスクについて

JSAPI のカスタマイズは、以下のいずれかの方法で行います。

• Plist 登録

• コード登録

操作手順

Plist 登録

1. JSAPI クラスを作成します。

   • 命名規則：デフォルトプラグイン名との一貫性を保つため、JSAPI クラス名のプレフィックスとして XXJsApiHandler4 を使用します。ここで、XX は任意のプレフィックスです。

   • ベースクラス：すべての JSAPI は PSDJsApiHandler を継承する必要があります。

   • ハンドラメソッドの実装：.m ファイル内で、-(void)handler:context:callback: メソッドをオーバーライドします。フロントエンドがこの JSAPI を呼び出すと、リクエストはこのメソッドに転送されます。

   • このメソッドのパラメーターは以下のとおりです。

     パラメーター	説明
     data	この JSAPI が呼び出された際に HTML5 ページから渡されるパラメーター。
     context	現在の HTML5 ページのコンテキスト。詳細については、PSDContext.h をご参照ください。
     callback	JSAPI 呼び出しが完了した後に呼び出されるコールバックメソッド。このメソッドは、結果を辞書形式で HTML5 ページに返します。

     以下のコードはその例です。

       #import <NebulaPoseidon/NebulaPoseidon.h>
       @interface MPJsApiHandler4OpenSms : PSDJsApiHandler
       @end
       @implementation MPJsApiHandler4OpenSms
       - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback
       {
       [super handler:data context:context callback:callback];
       // システムのショートメッセージアプリを開く。
       NSURL *url = [NSURL URLWithString:@"sms://xxx"];
       BOOL reasult = [[UIApplication sharedApplication] openURL:url];
       callback(@{@"success":@(reasult)});
       }
       @end

2. カスタム Plist ファイルに JSAPI を登録します。

   • カスタム JSAPI およびプラグインを一元管理するため、新しい Plist ファイルを作成できます。DemoCustomPlugins.bundle.zip テンプレートファイルをダウンロードし、プロジェクトに追加してください。

   • 前ステップで作成した JSAPI クラスを JsApis 配列内に登録します。

   • 登録する JSAPI は、以下の 2 つの項目を含む辞書形式です。

     名前	説明
     jsApi	HTML5 ページ上で呼び出される JSAPI インターフェイスの名前。 重要 組み込み JSAPI との競合を避けるため、カスタム JSAPI 名にはプレフィックスを付けてください。
     name	作成した JSAPI のクラス名。

   • H5 コンテナーの構成を初期化する際に、カスタム Plist ファイルのパスを指定する必要があります。

     • H5 コンテナーの初期化方法の詳細については、「H5 コンテナー クイックスタート」をご参照ください。

     以下のコードはその例です。

       - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
       {  
           // コンテナーを初期化します。
           // [MPNebulaAdapterInterface initNebula];
     
           // カスタム JSAPI のパスおよび事前設定済みオフラインパッケージ情報を指定します。
           NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle/h5_json.json"] ofType:nil];
           NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle"] ofType:nil];
           NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPlugins.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
           [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:pluginsJsapisPath]
       }

コード登録

Plist ファイルを使用せずに、Nebula コンテナーが提供するインターフェイスメソッドを直接呼び出してカスタム JSAPI を登録することもできます。

1. 新規プラグインの作成方法については、「カスタムプラグイン」ドキュメントをご参照ください。

2. プラグイン内で addJSApis メソッドを実装します。

    - (void)addJSApis
    {
        [super addJSApis];
   
        // コードを使用して JSAPI を登録します。
        PSDJsApi *jsApi4DemoTest2 = [PSDJsApi jsApi:@"demoTest2"
                                              handler:^(NSDictionary *data, PSDContext *context, PSDJsApiResponseCallbackBlock responseCallbackBlock) {
                                                  responseCallbackBlock(@{@"result":@"Processing result from native call by jsapi-demoTest2"});
                                              }
                                          checkParams:NO
                                            isPrivate:NO
                                                scope:self.scope];
        [self registerJsApi2Target:jsApi4DemoTest2];
    }

   • 以下の表に登録パラメーターとその説明を示します。

     パラメーター	説明
     jsApi	HTML5 ページ上で呼び出される JSAPI インターフェイスの名前。
     handler	JSAPI ハンドラ関数。この関数は、Plist 登録で使用するハンドラメソッドと同じです。
     checkParams	パラメーターのチェックを行うかどうかを指定します。NO に設定してください。
     isPrivate	JSAPI が非公開かどうかを指定します。NO に設定してください。
     scope	範囲。self.scope に設定してください。

具体例については、コードサンプル内の MPPlugin4TitleView クラスの実装をご確認ください。

次のステップ

1. HTML5 ページからカスタム JSAPI を呼び出します。

   

2. ハンドラメソッドにブレークポイントを設定し、HTML5 ページからのパラメーターを検証します。

   

3. HTML5 ページに返された結果を検証します。