Mobile Platform as a Service:カスタムプラグイン

このタスクについて

カスタムプラグインの作成プロセスは、以下のステップで構成されます。

1. プラグインの作成

2. プラグインの登録

3. プラグインの使用

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

操作手順

プラグインの作成

以下のコードは、新しいプラグインクラスの一般的なフォーマット例を示しています。

#import <NebulaSDK/NBPluginBase.h>

@interface MPPlugin4TitleView : NBPluginBase

@end

@implementation MPPlugin4TitleView

- (void)pluginDidLoad
{
}

- (void)handleEvent:(PSDEvent *)event
{
   [super handleEvent:event];
}

- (int)priority
{
    return PSDPluginPriority_High +1;
}

以下の点にご注意ください。

• 命名規則：コンテナーが提供するデフォルトプラグインの命名規則に合わせるため、名前は XXPlugin4 で始めてください。ここで XX は任意のプレフィックスです。

• ベースクラス：すべてのプラグインは NBPluginBase を継承する必要があります。

• 基本メソッドの実装：.m ファイル内で、以下のメソッドをオーバーライドする必要があります。

  • - (void)pluginDidLoad：必須。このメソッドは H5 イベントをサブスクライブするために使用します。イベントの一覧については、NBDefines.h ヘッダーファイルをご参照ください。

  • - (void)handleEvent：必須。このメソッドは、サブスクライブされたイベントがトリガーされた後のロジックを処理します。

  • - (**int**) priority：必須。イベントの優先度を指定します。必ず PSDPluginPriority_High + 1 に設定してください。

  • - (void)addJSApis：任意。このメソッドは、H5 ページとの通信に使用する JSAPI を登録するために使用します。

イベントのリスニング

- (void)pluginDidLoad メソッド内で、処理したいイベントのリスナーを登録します。

- (void)pluginDidLoad {
    self.scope = kPSDScope_Scene; // 1

    [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_After withListener:self useCapture:NO];
    // -- ナビゲーションバーのスタイルを変更。
    [self.target addEventListener:kH5Event_Scene_NavigationBar_ChangeColor withListener:self useCapture:NO];

    [super pluginDidLoad];
}

addEventListener メソッドは、イベントのリスナーを登録します。パラメーターは以下のとおりです。

プラグインの優先度の設定

カスタムプラグインが上書きされないようにするため、高い優先度を設定してください。

- (int)priority
{
    return PSDPluginPriority_High +1;
}

リスナーの処理

最後に、-handleEvent: メソッド内で、サブスクライブされたイベントがトリガーされた後に実行されるロジックを実装します。

- (void)handleEvent:(NBNavigationTitleViewEvent *)event
{
    [super handleEvent:event];

    if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_After isEqualToString:event.eventType]){
        // デフォルトの戻るボタンに基づいてスタイルを変更。
        NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
        if ([leftBarButtonItems count] == 1) {
            if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                // デフォルトの戻るボタンに基づいて、戻る矢印およびテキストの色を変更。
                AUBarButtonItem *backItem = leftBarButtonItems[0];
                backItem.backButtonColor = [UIColor greenColor];
                backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];

                // 戻る矢印を非表示。
                //                backItem.hideBackButtonImage = YES;

                // 戻るテキストを非表示：テキストを透明に設定し、戻るボタンのクリック可能な領域は維持。
                //                backItem.titleColor = [UIColor clearColor];
            }
        }
        [event preventDefault];
        [event stopPropagation];
    }else if([kH5Event_Scene_NavigationBar_ChangeColor isEqualToString:event.eventType]) {

        // コンテナーのデフォルトナビゲーションバースタイルを無効化。
        [event preventDefault];
        [event stopPropagation];
    }
}

JSAPI の追加

H5 ページと連携するカスタム JSAPI を定義するには、任意の - (void)addJSApis メソッド内で登録できます。詳細については、「カスタム JSAPI ＞ コードによる登録」をご参照ください。

- (void)addJSApis
{
    [super addJSApis];
    // TitleView に関連するカスタム JSAPI をここに追加できます。
}

プラグインの登録

プラグインクラスを作成したら、カスタム Plist ファイル内でプラグインを登録する必要があります。詳細については、「カスタム JSAPI ＞ JSAPI の登録」をご参照ください。

登録されたプラグインは、以下の 3 つの項目を含むディクショナリです。

プラグインの使用

1. pluginDidLoad メソッド内にブレークポイントを設定し、イベントトリガー時の呼び出しスタックが正しいかどうかを確認します。

   

2. handleEvent メソッド内にブレークポイントを設定し、サブスクライブされたイベントが正しくトリガーされるかどうかを確認します。

   

3. HTML5 ページ上のカスタムナビゲーションバースタイルが有効になっているかどうかを確認します。