iOS アプリの Session Replay で特定の View をブロックする方法

New Relicでは、ブラウザだけでなくモバイルアプリ向けにも Session Replay 機能を提供しています。 Session Replay を活用すると、エンドユーザーが実際にスマートフォンやタブレットで見ていた画面をビデオ再生のように確認でき、テレメトリーデータと合わせてトラブルシューティングを行うことができます。これにより、不具合発生時の再現や原因の特定に役立てることができます。 また、Session Replay は、プライバシー保護の観点からテキストフィールドや画像などはデフォルトでマスクされます。しかし、一部の要素だけでなく View 全体を完全にブロックしたいケースもあるかと思います。 そのような場面では、Block View 機能を有効にすることで対応可能となります。前回のブログで紹介した iOS Agent のサンプルアプリを例に、動作を確認してきます。

実装方法

まず、実装方法について紹介します。 SwiftUI と UIKit それぞれのアプローチを確認していきましょう。

SwiftUI での実装

SwiftUI では、ブロックしたい対象の View を NRConditionalMaskView でラップし、引数に blockView: true を指定します。

NRConditionalMaskView(blockView: true) {
    YourSensitiveView()
}

このように記述するだけで、対象のView全体が Session Replay 上で黒い領域としてブロックされ、ユーザーに UI の構造自体を見せないようにすることができます。

UIKit での実装

UIKit の場合は、状況に合わせて主に2つの方法から選択できます。

• プロパティで設定する方法

  対象となる UIView インスタンスの blockView プロパティを true に設定するだけです 。

  let sensitiveView = UIView()
  sensitiveView.blockView = true
  

• Accessibility IDを利用する方法

  より汎用的なアプローチとして、Viewの accessibilityIdentifier に "nr-block" という特定の文字列を設定することでもブロックが可能です。

  let sensitiveView = UIView()
  sensitiveView.accessibilityIdentifier = "nr-block"
  

  既存の Accessibility ID を維持しつつ動作させたい場合は、文字列に "nr-block" を追加して使用することもできます。

  let sensitiveView = UIView()
  sensitiveView.accessibilityIdentifier = "someExistingId.nr-block"
  

サンプルアプリでの動作確認

実際にサンプルアプリでどのような表示が行われるか確認してみましょう。 New Relic iOS Agentに同梱されているサンプルアプリ（NRTestApp）のソースコード（BlockViewExamples.swift）には、PINコードを入力するキーパッド画面を例に、View 全体をブロックする具体的な実装が含まれています。 SwiftUIでは、キーパッド部分を以下のように NRConditionalMaskView でラップしています。

NRConditionalMaskView(blockView: true) {
    VStack(spacing: 15) {
        HStack(spacing: 15) {
            keypadButton("1")
            keypadButton("2")
            keypadButton("3")
        }
        // ...省略...
    }
    .padding()
    .background(Color.gray.opacity(0.1))
    .cornerRadius(10)
}

このように実装することで、 Session Replay で確認した際に、このキーパッドの VStack 全体が黒い領域としてブロックされます。

具体的に blockView を有効にした場合と無効にした場合で、Session Replay 上でどのように見え方が変わるのかを比較してみましょう。

• blockView: false の場合。デフォルトのマスキング機能によりテキストなどは隠されていますが、キーパッドのボタン配置や画面のレイアウト構造はそのまま見えてしまっています。

• blockView: true の場合。 指定した領域全体を覆う完全な黒色のオーバーレイが作成され、完全にブロックされています。UIの構造自体がユーザーから見えなくなっていることが分かります。

補足

• ブロックされた領域内で発生したボタンのタップなどユーザインタラクションはキャプチャされません。
• Android Agent でも、同様にブロッキング機能をご利用いただけます。詳細については公式ドキュメントをご確認ください。
• 本記事で紹介している iOS Agent 及びサンプルコードの動作は、 New Relic iOS Agent SDK バージョン:7.7.2にて検証を行っています。 New Relic の SDK や Session Replay の機能は随時アップデートが行われており、バージョンによって振る舞いや設定方法が変わる可能性があります。実際のプロダクトへ組み込む際は、事前に手元の環境で最新の公式ドキュメントを参照し、動作確認・検証を実施していただければ幸いです。