Skip to content

アプリ内メッセージ UI デリゲート

オプションの BrazeInAppMessageUIDelegate を使用してアプリ内メッセージの表示をカスタマイズし、さまざまなライフサイクルイベントに対応します。このデリゲートプロトコルを使用すると、トリガーされたアプリ内メッセージペイロードを受信して​​さらに処理したり、表示ライフサイクルイベントを受信したり、表示タイミングを制御したりできます。

前提条件

BrazeInAppMessageUIDelegate を使用するには:

  • デフォルトの BrazeInAppMessageUI 実装を inAppMessagePresenter として使用する必要があります。
  • BrazeUI ライブラリーをプロジェクトに含める必要があります。

アプリ内メッセージデリゲートの設定

次のサンプルコードに従って、Braze インスタンスで BrazeInAppMessageUIDelegate デリゲートオブジェクトを設定します。

まず、BrazeInAppMessageUIDelegate プロトコルと、対応する必要なメソッドを実装します。以下の例では、このプロトコルをアプリケーションの AppDelegate クラスに実装しています。

1
2
3

extension AppDelegate: BrazeInAppMessageUIDelegate {
  // Implement your protocol methods here.
}

次に、このアプリ内メッセージ UI を inAppMessagePresenter として割り当てる前に、BrazeInAppMessageUI インスタンスで delegate オブジェクトを割り当てます。

1
2
3

let inAppMessageUI = BrazeInAppMessageUI()
inAppMessageUI.delegate = self
AppDelegate.braze?.inAppMessagePresenter = inAppMessageUI

まず、BrazeInAppMessageUIDelegate プロトコルと、対応する必要なメソッドを実装します。以下の例では、このプロトコルをアプリケーションの AppDelegate クラスに実装しています。

1
2
3
4
5
6
7

@interface AppDelegate () <BrazeInAppMessageUIDelegate>

@end

@implementation AppDelegate
  // Implement your protocol methods here.
@end

次に、このアプリ内メッセージ UI を inAppMessagePresenter として割り当てる前に、BrazeInAppMessageUI インスタンスで delegate オブジェクトを割り当てます。

1
2
3

BrazeInAppMessageUI *inAppMessageUI = [[BrazeInAppMessageUI alloc] init];
inAppMessageUI.delegate = self;
AppDelegate.braze.inAppMessagePresenter = inAppMessageUI;

パラメータが言語ランタイムと互換性がないため、すべてのデリゲートメソッドを Objective-C で使用できるわけではありません。

ステップバイステップガイド

アプリ内メッセージ UI デリゲートの段階的な実装については、このチュートリアルを参照してください。

iOS のアプリ内メッセージの向きのカスタマイズ

好みの向きの設定

すべてのアプリ内メッセージは、デバイスの向きに関係なく特定の向きで表示されるように設定できます。好みの向きを設定するには、inAppMessage(_:prepareWith:) デリゲートメソッドを使用して PresentationContext で preferredOrientation プロパティを設定します。

たとえば、好みの向きとして縦を作成するには以下を設定します。

1
2
3
4
5
6

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  context.preferredOrientation = .portrait
}

1
2
3
4

- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  context.preferredOrientation = BRZInAppMessageRawOrientationPortrait;
}

アプリ内メッセージが表示された後、メッセージが表示されている間にデバイスの向きが変わった場合、メッセージの orientation 設定でサポートされていれば、メッセージがデバイスに合わせて回転します。

メッセージを表示するには、デバイスの向きがアプリ内メッセージの orientation プロパティでもサポートされている必要があることに注意してください。また、preferredOrientation 設定が適用されるのは、Xcodeのターゲットの設定の [導入情報] セクションで、アプリケーションでサポートされているインターフェイスの向きにその向きが含まれている場合に限られます。

Xcodeでサポートされているオリエンテーション

メッセージの向きの変更

向きをメッセージごとに設定することもできます。このプロパティでは、各メッセージに使用可能なすべての方向タイプが定義されます。そのためには、該当する Braze.InAppMessage で orientation プロパティを設定します。

1
2
3
4
5
6
7
8

// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = .any

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = .portrait

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = .landscape

1
2
3
4
5
6
7
8

// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = BRZInAppMessageRawOrientationAny;

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = BRZInAppMessageRawOrientationPortrait;

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = BRZInAppMessageRawOrientationLandscape;

ダークモードを無効にする

ユーザーデバイスでダークモードが有効になっているときにアプリ内メッセージでダークモードスタイルが採用されないようにするには、inAppMessage(_:prepareWith:) デリゲートメソッドを実装します。メソッドに渡される PresentationContext には、表示される InAppMessage オブジェクトの参照が含まれます。各 InAppMessage に、dark と light のモードテーマを含む themes プロパティがあります。themes.dark プロパティを nil に設定すると、Braze では自動的にライトテーマを使用してアプリ内メッセージが表示されます。

ボタンがあるアプリ内メッセージの種類では、buttons プロパティに追加の themes オブジェクトがあります。ボタンでダークモードのスタイルが採用されないようにするには、map(_:) を使用して dark テーマがない light テーマのボタンの新しい配列を作成できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  switch context.message {
    case .slideup:
      guard var slideup = context.message.slideup else { return }
      slideup.themes.dark = nil
      context.message.slideup = slideup
    
    case .modal:
      guard var modal = context.message.modal else { return }
      modal.themes.dark = nil
      modal.buttons = modal.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modal = modal
    
    case .modalImage:
      guard var modalImage = context.message.modalImage else { return }
      modalImage.themes.dark = nil
      modalImage.buttons = modalImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modalImage = modalImage
    
    case .full:
      guard var full = context.message.full else { return }
      full.themes.dark = nil
      full.buttons = full.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.full = full
    
    case .fullImage:
      guard var fullImage = context.message.fullImage else { return }
      fullImage.themes.dark = nil
      fullImage.buttons = fullImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.fullImage = fullImage
    
    default:
      break
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  switch (context.message.type) {
    case BRZInAppMessageRawTypeSlideup: {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;
      break;
    }
    case BRZInAppMessageRawTypeModal:
    case BRZInAppMessageRawTypeFull:
    {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;

      NSMutableArray *updatedButtons = [NSMutableArray arrayWithCapacity:context.message.buttons.count];
      for (BRZInAppMessageRawButton *button in context.message.buttons) {
        BRZInAppMessageRawButtonTheme *lightTheme = BRZInAppMessageRawButtonTheme.defaultLight;
        BRZInAppMessageRawButton *newButton = [button mutableCopy];
        newButton.textColor = lightTheme.textColor;
        newButton.backgroundColor = lightTheme.backgroundColor;
        newButton.borderColor = lightTheme.borderColor;
        [updatedButtons addObject:newButton];
      }
      context.message.buttons = updatedButtons;
      break;
    }
    default:
      break;
  }
}

ボタンクリックのカスタマイズ

アプリ内メッセージのボタン情報にアクセスするか、クリック動作をオーバーライドするには、BrazeInAppMessageUIDelegate.inAppMessage(_:shouldProcess:) を実装します。true を返して Braze にクリックアクションの処理を許可するか、false を返して動作をオーバーライドします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

  func inAppMessage(
    _ ui: BrazeInAppMessageUI, shouldProcess clickAction: Braze.InAppMessage.ClickAction,
    buttonId: String?, message: Braze.InAppMessage, view: InAppMessageView
  ) -> Bool {
    guard let buttonId,
      let idInt = Int(buttonId)
    else { return true }
    var button: BrazeKit.Braze.InAppMessage.Button? = nil

    switch message {
    case .modal(let modal):
      button = modal.buttons[idInt]

    case .modalImage(let modalImage):
      button = modalImage.buttons[idInt]

    case .full(let full):
      button = full.buttons[idInt]

    case .fullImage(let fullImage):
      button = fullImage.buttons[idInt]

    default:
      break
    }
    
    print(button?.id)
    print(button?.text)
    print(button?.clickAction)

    return true
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
       shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
                 url:(NSURL *)uri
            buttonId:(NSString *)buttonId
             message:(BRZInAppMessageRaw *)message
                view:(UIView *)view {
  NSInteger buttonInt = [buttonId integerValue];

  if (message.type == BRZInAppMessageRawTypeFull || message.type == BRZInAppMessageRawTypeModal) {
    BRZInAppMessageRawButton *button = message.buttons[buttonInt];
    NSLog(@"%ld", (long)button.identifier);
    NSLog(@"%@", button.text);
    NSLog(@"%ld", (long)button.clickAction);
  }
  return YES;
}

表示中にステータスバーを非表示にする

Full、FullImage、および HTML アプリ内メッセージについて、SDK ではステータスバーがデフォルトで非表示になります。他の種類のアプリ内メッセージでは、ステータスバーは変更されません。この動作を設定するには、inAppMessage(_:prepareWith:) デリゲートメソッドを使用して PresentationContext で statusBarHideBehavior プロパティを設定します。このフィールドの値は次のうちいずれかになります。

表示タイミングのカスタマイズ

利用可能なアプリ内メッセージをユーザーエクスペリエンスの特定のポイントで表示するかどうかをコントロールできます。全画面でのゲーム中や読み込み画面など、アプリ内メッセージを表示させたくない状況がある場合は、保留中のアプリ内メッセージを遅延させるか、破棄することができます。アプリ内メッセージのタイミングをコントロールするには、inAppMessage(_:displayChoiceForMessage:) デリゲートメソッドを使用して BrazeInAppMessageUI.DisplayChoice プロパティを設定します。

1
2
3
4

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  displayChoiceForMessage message: Braze.InAppMessage
) -> BrazeInAppMessageUI.DisplayChoice

1

- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui displayChoiceForMessage:(BRZInAppMessageRaw *)message

次のうちいずれかの値を返すよう BrazeInAppMessageUI.DisplayChoice を設定します。

実装サンプル

Swift と Objective-C のサンプルについては、[例] フォルダーで InAppMessageUI を参照してください。

Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!