やる気駆動型エンジニアの備忘録

WPF(XAML+C#)の話題を中心に.NET/Android/CI やたまに趣味に関するブログです

(WPF)App CenterにWPFが対応したので使ってみた

devblogs.microsoft.com

上記ページでApp Centerに WPF/WinForms が対応したとのことなので早速使ってみました。 私自身これまで App Center を使ったことがなかったため、このエントリでは導入から Analytics までをチュートリアル形式で記載しています。

開発環境

開発環境はこんな感じ。

なお、2019年8月8日時点で App Center の WPF/WinForms はプレビュー版のみの提供となっています。 そのため、.NET Coreには対応していません。 .NET Framework 4.5以上が対象となっています。 今後は.NET Core 3.0にも対応予定とのことなので期待したいところです。App Center のロードマップについては以下を参照してください。

github.com

また、今回私は以下のページを参考にしています。

docs.microsoft.com

App Centerの設定

App Center を開き、[Add new] - [Add new app] を選択して以下の様に OS は Windows, Platform は WPF を選択します。あとは[Add new app] を選択します。

f:id:iyemon018:20190808221428p:plain

[Settings] を開いて右上のメニューから [Copy app secret] を選択します。 ここでコピーした Secret は後ほど使うのでエディタにでもコピペしておいてください。

f:id:iyemon018:20190808221948p:plain

さて、これで App Center の準備は整いました。

アプリに組み込む

次はアプリです。 適当に.NET Framework 4.5以上の WPF アプリを作成してください。

まずは、NuGet から App Center のパッケージを取得します。

Install-Package Microsoft.AppCenter.Analytics -Version 2.2.1-preview
Install-Package Microsoft.AppCenter.Crashes -Version 2.2.1-preview

これを実行すると大量のアセンブリが追加されるのでしばらく待ちます。

準備が整ったらApp.xaml.csを以下のようにします。 まずは、アプリ セッションを開始して App Center と接続できることを確認します。 using は忘れずに。

namespace AppCenter.Wpf
{
    using System.Windows;
    using Microsoft.AppCenter;
    using Microsoft.AppCenter.Analytics;
    using Microsoft.AppCenter.Crashes;

    public partial class App : Application
    {
        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);

            AppCenter.Start("<ここに Secret を貼り付ける>", typeof(Analytics), typeof(Crashes));
        }
    }
}

以上! 簡単ですね。

このままアプリを起動すると App Center の[Analytics] - [Overview] は次のようになります。

f:id:iyemon018:20190808222745p:plain

まずはこれでアプリが App Center に接続できたことを確認できたので、もうちょっと触ってみます。

チュートリアルはいくつかあるのですが、わかりやすいのが Event だったのでこちらを実装します。 ちなみに以下のページを参考にしています。

docs.microsoft.com

Event には以下のようなコードを追加して予めどのようなイベントが有るのかを定義します。

// 第一引数は name, 第二引数は parameter
Analytics.TrackEvent("Video clicked", new Dictionary<string, string> {
    { "Category", "Music" },
    { "FileName", "favorite.avi"}
});

MS Docs ページとコードのコメントを読む限りだとname, parameterには以下のような制限があるようです。 元の文章が英語なので間違ってたらごめんなさい…

  • Event に定義できる数は最大で 200 個。これはnameに最大 200 種類のイベント名称を定義できるということ。
  • nameは最大 256 byte まで。
  • 1種類の Event につき、プロパティ パラメータは 5 つまで。これはparameterに 5 種類のプロパティ名を設定できるということ。
  • parameterのプロパティ名は最大 64 byte まで。

実質 Event 名称 : 200 x パラメータ 5 で 1000 種類のイベントを計測することができそうです。

これをApp.xaml.csに追加します。

namespace AppCenter.Wpf
{
    using System.Collections.Generic;
    using System.Windows;
    using Microsoft.AppCenter;
    using Microsoft.AppCenter.Analytics;
    using Microsoft.AppCenter.Crashes;

    public partial class App : Application
    {
        #region Methods

        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);

            AppCenter.Start("<ここに Secret を貼り付ける>", typeof(Analytics), typeof(Crashes));

            Analytics.TrackEvent("Example", new Dictionary<string, string>
                                            {
                                                {"Category", "Music"}, {"FileName", "favorite.avi"}
                                            });
        }
    }
}

例えば上記のExampleイベントを App Center で取得するには以下のようにします。

Analytics.TrackEvent("Example");

あとはこれを画面からボタンクリックなどのイベントハンドラから呼び出してやればOKです。

namespace AppCenter.Wpf
{
    using System.Collections.Generic;
    using System.Windows;
    using Microsoft.AppCenter.Analytics;

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void TestButton_OnClick(object sender, RoutedEventArgs e)
        {
            Analytics.TrackEvent("Example");
        }

        private void MusicEventButton_OnClick(object sender, RoutedEventArgs e)
        {
            Analytics.TrackEvent("Example", new Dictionary<string, string> {{"Category", "Music"}});
        }
    }
}

Analytics.TrackEventメソッドの第二引数にプロパティ名を指定することでより詳細なイベントの振り分けができそうです。

さて、これでアプリを起動して何回かボタンを押すと、 App Center の[Analytics] - [Events] は以下のようになります。

f:id:iyemon018:20190808224726p:plain

Exampleというイベントが追加されました。 イベントをクリックするとさらに詳細な情報を取得できます。

f:id:iyemon018:20190808224917p:plain f:id:iyemon018:20190808224934p:plain

Event はうまく使えばユーザーの利用状況とかかなり具体的かつ正確に収集できそうです。

最後に

さて、他にもクラッシュログとかプッシュ通知、アプリの自動配布なんかもあるそうです。 クラッシュログは Android の Crashlytics みたいなイメージでしょうか? アプリの自動配布もこれまでは Click once しかなかったので、代替案になるかも検証していきたいと思っています。

ちなみに今回のサンプルは App Center 初利用の私でも 1時間程度で組み込むことができました。

まだまだ App Center は触り始めたばかりで勉強不足な部分が多々あるので、もう少し色々触ってみようと思います。