Go to Qiita Advent Calendar Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 1

Instana Observability Advent Calendar 2025

@jackyxu

iOS アプリに Instana Mobile Agentを導入してユーザー行動を可視化するまでの全手順

Last updated at Posted at 2025-11-23

―― SwiftUI × XcodeGen × Instana RUM（Mobile App Monitoring）構築ログ ――

本記事では、前回Antigravity作成した iOS アプリ HerbalExplorer に、
IBM Instana の Mobile App Monitoring（RUM）Agent を組み込み、
実際にセッションデータ・画面遷移・HTTP・ジオロケーションまで Instana ダッシュボードに可視化されるところまでの 一連の作業手順 をまとめます。

対象読者：

  • iOS アプリに Instana Mobile Agent を導入したい人
  • SwiftUI / XcodeGen を使っている人
  • RUM（Real User Monitoring）で 画面・操作ログを正しく取りたい 人
  • Instana のモバイルダッシュボードが「どう見えるのか」知りたい人

1. Instana Mobile Agent/SDKで何かできる？

Instana Mobile SDK を導入すると、iOS アプリの以下が自動でトラッキングされます：

  • アプリ起動（Session Start）
  • 画面遷移
  • HTTPリクエスト（API呼び出し）
  • クラッシュ
  • ジオロケーション（国・地域）
  • デバイス情報、OS、キャリアなど

さらに、自分でカスタムイベントを仕込むことで、

  • AI検索ボタン押下
  • 画像識別の実行
  • タブ切り替え
  • 地図で薬草園ピンのタップ
    など、UX上重要なアクションも計測できます。

今回の記事では、HerbalExplorerのiOS appに以下を実装しました：

  • SDK導入（XcodeGen）
  • アプリ初期化コードの追加
  • 画面ビューごとの View Tracking
  • カスタムイベント（Search, IdentifyPlant, SaveAIResult）
  • Instana ダッシュボードでの確認

2. 導入手順（XcodeGen ＋ SwiftUI）

今回は Xcode プロジェクトを XcodeGen で管理しているため、
設定は project.yml → xcodegen generate → ビルド という流れになります。

Step 0. Instana Backend UI でモバイルのApplication Perspectiveの作成

  • 作成例：
    Screenshot 2025-11-23 at 14.11.01.png

  • Agent キーとレポートURLをメモしておく
    Screenshot 2025-11-23 at 14.11.18.png

Step 1. Instana Agent を project.yml の一番最後に追加

......
targets:
  HerbalExplorer:
    dependencies:
      - package: iOSAgent
        product: InstanaAgent

packages:
  iOSAgent:
    url: https://github.com/instana/iOSAgent
    from: 1.8.9

注意点：

  • packages: は top-level（最上位）に書く必要がある
  • product: を InstanaAgent にするのを忘れるとビルドエラーになる
  • YAML はインデントミスしやすいので要注意

Step 2. SwiftUI の @main で SDK 初期化

ファイル：HerbalExplorerApp.swift

import SwiftUI
import InstanaAgent

@main
struct HerbalExplorerApp: App {
    init() {
        if let url = URL(string: "https://eum-XXXXX-saas.instana.io/mobile") {
            Instana.setup(
                key: "N5--<Agent Key>Xw",
                reportingURL: url
            )
        }
    }

    var body: some Scene {
        WindowGroup {
            MainTabView()
        }
    }
}

Step 3. Xcode プロジェクト再生成 & ビルド

xcodegen generate
xcodebuild -project HerbalExplorer.xcodeproj \
  -scheme HerbalExplorer \
  -destination 'platform=iOS Simulator,name=iPhone 16 Pro' build

問題なく通れば SDK のリンク成功です。

3. 画面遷移（View Tracking）を追加

Instana は Instana.setView(name:) を呼ぶことで、
「ユーザーがどの画面にいたか」を記録できます。

HomeView

.onAppear {
    Instana.setView(name: "HomeView")
}

EncyclopediaView

.onAppear {
    Instana.setView(name: "EncyclopediaView")
}

HerbDetailView

.onAppear {
    Instana.setView(name: "HerbDetailView")
}

MapView

.onAppear {
    Instana.setView(name: "MapView")
}

Instana のダッシュボードには、このように ビュー別アクセス数 が表示されます：
Screenshot 2025-11-23 at 13.52.08.png

4. カスタムイベントを仕込む

ユーザーのアクションを記録するには Instana.reportEvent() を使います。

例：AI検索

Instana.reportEvent(
    name: "Search",
    meta: [
        "Mode": viewModel.mode,
        "Query": viewModel.searchText
    ]
)

例：AI結果の保存

Instana.reportEvent(
    name: "SaveAIResult",
    meta: ["Query": viewModel.searchText]
)

例：画像識別開始

Instana.reportEvent(
    name: "IdentifyPlant",
    meta: ["ImageCount": 1]
)

Instana ダッシュボードでは、
イベントは以下のように「CUS（Custom Event）」として表示されます：
Screenshot 2025-11-23 at 13.51.54.png

5. Instana ダッシュボードでの動作確認

iOS シミュレーター／実機で操作すると、
数十秒後には Instana 側にセッションが送られ始めます。

セッション一覧画面

Screenshot 2025-11-23 at 14.23.24.png

セッション詳細（ユーザー情報、ロケーション、HTTP 要求、画面遷移）

Screenshot 2025-11-23 at 13.49.43.png
Screenshot 2025-11-23 at 13.50.02.png
Screenshot 2025-11-23 at 13.50.23.png
Screenshot 2025-11-23 at 13.50.47.png

モバイル全体性能の可視化

Screenshot 2025-11-23 at 13.47.52.png

  • HomeView
  • EncyclopediaView
  • HerbDetailView
  • MapView
    がすべてカウントされており、
    SwiftUI の画面遷移が正しく RUM に取り込まれていることが確認できます。

6. HTTP 要求のトレース

HerbalExplorer は画像識別・AI検索で Gemini API を叩きます。

Instana は HTTP 呼び出しを自動で拾うため、以下のように
「上位 HTTP 要求発信元」に Google Generative Language API が表示されます。
Screenshot 2025-11-23 at 14.50.11.png

7. トラブルシューティング（実際に遭遇したもの）

「Missing package product 'iOSAgent'」

  • product: InstanaAgent に修正すれば直る
  • YAML のインデントが崩れていることも多い

画面遷移が Instana に出てこない

  • .onAppear が発火していない場合がある
  • NavigationStack の階層と @State の持ち方を再確認

セッションが 0 のまま

  • 初回送信まで 30〜120 秒かかることがある
  • Simulator でもデータは送られる（実機必須ではない）

8. 上記は手動で計装する場合にいろいろ手順が必要となりますが、Google Antigravity或いはProject BobのようなAI Agent drivenの開発ツールを利用すれば、下記のように二つPromptでおおよそ10分で完結できますので、ぜひお試しいただければと思います。

例：

  • a.Instana Agentを計装するプロンプト：
ドキュメントを沿って、このios appにInstanaのMobile SDKを計装してください。
https://www.ibm.com/docs/en/instana-observability/1.0.309?topic=instana-monitoring-mobile-applications

キー：N5--<Agent Key>Xw
Report URL：https://eum-XXXX-saas.instana.io/mobile
  • b.ViewにもTrackingするコードを追加するプロンプト：
Instanaのmobile sdkのios apiドキュメントを沿って、このios app各ビューの遷移ActivityをTrackingできるようにコードいれましょう。
https://www.ibm.com/docs/en/instana-observability/1.0.309?topic=applications-ios-api

9. まとめ

  • SwiftUI + XcodeGen でも Instana Mobile SDK は簡単に導入できる
  • View Tracking・カスタムイベントを入れるだけで行動が明確に可視化できる
  • Gemini API との通信も自動でトレースされ、AIアプリの分析に相性がよい
  • Instana のモバイル RUM ダッシュボードは可視化が非常に強力

HerbalExplorer は「AI × モバイル × 行動分析」という構成なので、
Instana を入れることでプロダクト品質が一気に上がりました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?