AppCenterでWPF(PRISM)アプリのユーザ操作履歴ログを収集し、収集したログをWebで閲覧する。


WPFがAppCenterで利用できるようになったので、イベントログの収集機能を試してみました。


# まずApp Centerとは？
アプリケーションの運用に関わる様々な機能を提供します。
・アプリケーションのイベントログを収集でき、Webで可視化することができる。
・アプリケーションのクラッシュログを収集でき、Webで可視化することができる。
・アプリケーションの配付ができる。アプリケーションの初回インストールや、バージョンアップの度に通知する。

https://docs.microsoft.com/en-us/appcenter/

# 本記事で収集するログの内容
イベントログとして、ユーザの操作履歴ログを収集します。
具体的には、
・"どの画面で"
・"どのボタンが"
・"クリックされたのか"
を収集します。

# ログ収集のためのサンプルアプリケーションを紹介
どの画面でどのボタンがクリックされたか？のログ収集テストのため、
３つの画面と、それぞれの画面に"検索","登録","更新"ボタンを配置したサンプルアプリケーションを作成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/102ccdca-c3c2-40ae-f27c-0583c69967be.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/0a3220ba-c59e-1cd8-fc70-60f038762a8e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/eafc4d29-d7cb-ef07-a17f-dc52ec279aa1.png)

# 収集したログをAppCenter(Web)から参照
サンプルアプリケーションを画面を切り替えつつ、各ボタンをクリックしてログをため込みました。
では、AppCenterではどのように参照できるのか？　確認していきます。

## Analytics > Log flow
App CenterをWebで開き、 Analytics > Log flow　を開きます。
全てのログが閲覧できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/97ca17c2-9d29-fc70-72a8-8da2701fd695.png)


オレンジ枠　…　利用ユーザーごとの一意ID
赤枠 … 画面名
青枠 … ボタンの表示名(Button.Content)、ボタン名(Button.Name)

が設定されていることが確認できます。


## Analytics > Events 
App CenterをWebで開き、 Analytics > Events　を開きます。
この画面では、イベント毎のログが確認できます。

…が、本記事ではEvent = 画面IDを設定しました。
そのため、Eventsで開いた画面では、各画面毎のIDが表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/922fd58a-b86b-b1d3-2b76-c26910b81798.png)

そして、次に画面(PageA.Views.PageAView)を選択すると、各画面のイベント発生状況が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/b701355f-f844-be95-6899-acd19fe96e82.png)


# AppCenter(Web)のログ機能で分かること。

"Log flow"および、"Events"の２つの画面からログしましたが、

ユーザ毎の操作手順は、"Log flow"
画面のイベント発生状況(よく利用される機能)は、"Events"

で確認することが出来ました。
送信する情報を工夫することで、より実用的な情報収集も、簡単に行うことが出来そうです。
(テキストボックスの入力情報など)

ちなみに、このサンプルアプリケーションでは、無差別にボタンのクリックイベントをトリガーしているので、左側のメニューのボタンもログ収集の対象となり、かつ、表示中の画面(ContentRegion)に所属しているボタンというわけではないけど、、そこは、まぁ。作り込めばなんとか出来るので今回はご容赦ください。

# サンプルアプリケーションの解説

GitHubはこちら。
https://github.com/furugen/PrismSampleWithAppCenter

それぞれの要点だけ簡単に説明します。

## 動作確認のためには、シークレットコードを設定する
もし、お試しで動作させる場合は、あなたのAppCenterのシークレットコードを設定してください。
これだけで動作できます。

```c#

        protected override Window CreateShell()
        {
            AppCenter.Start("あなたのシークレットコード",
                   typeof(Analytics), typeof(Crashes));

            return Container.Resolve<MainWindow>();
        }
```


## 実装ポイント

### どの画面で
　つまり、どの画面が今表示されているのか？
　PRISMのRegionManagerでActiveViewを取得しています。

```cs

var activeView = this.regionManager.Regions["ContentRegion"].ActiveViews.First();
```

### どのボタンが
　全てのボタンに対して、EventSetter / Clickイベントにログを出力するための処理を登録します。

```xml

    <Window.Resources>
        <!-- 全てのButtonのクリックイベントを監視 -->
        <Style TargetType="Button">
            <EventSetter Event="Click" Handler="Button_Click"/>
        </Style>
    </Window.Resources>
```

### AppCenterへのログ登録内容

```cs


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if(this.regionManager.Regions["ContentRegion"].ActiveViews.Count() > 0)
            {
                Button btn = sender as Button;
                var activeView = this.regionManager.Regions["ContentRegion"].ActiveViews.First();

                Analytics.TrackEvent(activeView.ToString(), new Dictionary<string, string> {
                    { "ButtonName", btn.Name },
                    { "ButtonContent", btn.Content?.ToString() }
                });
            }
        }

```

#まとめ
AppCenterをWPF+PRISMで活用するには？という観点でサンプルアプリケーションを作ってみましたが、
なかなか便利ですね。次は、配布(Distribute)の機能や、クラッシュログを試してみようかと思います。