Visual Studio App Center の WPF 対応機能を使ってみよう
Published Aug 25 2019 10:52 PM 3,695 Views
Microsoft

先日、Visual Studio App Center の WPF と Windows Forms 対応が発表されました。

Announcing WPF and WinForms Support in Visual Studio App Center

 

実際に Visual Studio App Center でアプリを新規作成すると Windows のカテゴリーの下に WPF と WinForms が追加されています。

createanewapp.jpg

今のプレビュー段階で以下の機能が利用できます。

  • Distribute
  • Diagnostics
  • Analytics

アプリへの組み込み方

では、さっそくアプリに組み込んでみましょう。

Diagnostics & Analytics

この 2 つを組み込むのは非常に簡単です。アプリを作成した画面にも表示されますが、以下の 2 つの NuGet パッケージをアプリケーションに追加します。どちらもプレビュー版の 2.3.0-preview をインストールしてください。

  • Microsoft.AppCenter.Analytics
  • Microsoft.AppCenter.Crashes

nuget.jpg

 

v2.3.0-preview を入れると Newtonsoft.Json の v6.0.1 が .NET Core 対応ではないという警告が出るので Newtonsoft.Json の最新版も明示的に追加しました。

 

次に、AppCenter の初期化処理を追加します。これは、AppCenter でアプリを作成した後の画面に表示されるコードそのままになります。今回はアプリのキーの GUID は appsettings.json というファイルを追加して、そこに記載するようにしました。

プロジェクトに appsettings.json というファイルを追加して、ビルドアクションをコンテンツに、そして出力フォルダーにコピーするように設定を変更します。

appsettings.jpg

appsettings.json の中に、以下のように AppCenter のキーを追加しておきます。

{
  "AppCenterKey": "9a4bebcb-a4b9-44b1-9935-7f8075f6a877"
}

この設定ファイルを読み込むために Microsoft.Extensions.Configuration.Json を NuGet から追加します。App.xaml で Startup イベントを購読する処理を追加してイベントハンドラーを生成します。

<Application x:Class="AppCenterTestApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:AppCenterTestApp"
             Startup="Application_Startup"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application

イベントハンドラーに AppCenter の初期化処理を書きます。

using Microsoft.AppCenter;
using Microsoft.AppCenter.Analytics;
using Microsoft.AppCenter.Crashes;
using Microsoft.Extensions.Configuration;
using System.Windows;

namespace AppCenterTestApp
{
    public partial class App : Application
    {
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            var conf = new ConfigurationBuilder()
                .AddJsonFile("appsettings.json")
                .Build();

            AppCenter.Start(conf.GetSection("AppCenterKey").Value,
                typeof(Crashes),
                typeof(Analytics));
        }
    }
}

これで、下準備は完了です。

ログを送ってみよう

動作確認用のボタンを MainWindow.xaml に追加します。

<Window
    x:Class="AppCenterTestApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:AppCenterTestApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <StackPanel>
        <Button Click="LogButton_Click" Content="Log" />
        <Button Click="CrashButton_Click" Content="Crash" />
    </StackPanel>
</Window>

各々のボタンのイベントハンドラーに処理を追加します。ここは、従来の Xamarin や UWP などの AppCenter の API と変わりありません。Analytics クラスの TrackEvent メソッドを使ったりする形になります。

クラッシュボタンは単に例外を投げてアプリをクラッシュさせるようにしました。

using Microsoft.AppCenter.Analytics;
using System;
using System.Collections.Generic;
using System.Windows;

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

        private void LogButton_Click(object sender, RoutedEventArgs e)
        {
            Analytics.TrackEvent("Test log message from WPF on .NET Core app", new Dictionary
            {
                ["prop1"] = "A value of prop1",
                ["prop2"] = "A value of prop3",
                ["prop3"] = "A value of prop4",
            });
        }

        private void CrashButton_Click(object sender, RoutedEventArgs e)
        {
            throw new InvalidOperationException("From crash button.");
        }
    }
}

実行してボタンを押して暫く待っていると AppCenter のダッシュボードでログが確認できます。

clipboard_image_0.png

Analytics の Log flow でリアルタイムに確認することも出来ます。

logstream.gif

Crash ボタンを押してアプリをクラッシュさせて、再度アプリを立ち上げて暫くすると AppCenter の Diagnostics のページにクラッシュしたときの例外が表示されます。

clipboard_image_1.png

Distribute

Distribute 機能も提供されていますが、こちらのアプリ内更新機能などは iOS, Android など向けのようで WPF や WinForms では使えないようです。

Enable your tester to easily stay up to date with the latest releases. Integrate the App Center SDK (and the Distribution Module) for iOS, Android, or Xamarin to automatically enable in-app notification of new releases. Once completed all future releases through App Center will trigger an in-app notification for each user allowing a quick upgrade to the latest version.

https://docs.microsoft.com/ja-jp/appcenter/distribution/inappupdates

 

Windows の WPF / WinForms 向けの Distribute 機能では appx, appxbundle, appxupload, msix, msuxbundle, msixupload, zip, msi などの拡張子のファイルがサポートされているようです。ここではまずシンプルに zip 形式を試してみようと思います。

 

WPF on .NET Core のプロジェクトの右クリックメニューから発行(Publish)を選択してフォルダーに発行します。コピーしたら動くように Deployment Mode を Self-contained にして Target Runtime を明示的に指定します。発行(Publish)して、出来上がったフォルダーを zip で固めます。

 

そして、AppCenter の Distribute にアップロードします。

clipboard_image_3.png

ここでは、手動でアップロードしていますがコマンドラインからのアップロードや REST API を使用したアップロードなども可能です。

Release a Build

 

また、Azure DevOps のビルドタスクにも App Center Distribute task というものがあるので、Azure DevOps のビルドタスクからの公開も可能です。

App Center Distribute task

 

ノートと配布先のグループを選択したら公開できます。

clipboard_image_4.png

配布先に指定した人には以下のようなメールが飛びます。

clipboard_image_5.png

Install ボタンをクリックすることで以下のようなダウンロードページに移動します。

clipboard_image_6.png

 

MSIX 形式のファイルをアップロードする場合も同様の手順で行えます。MSIX 形式のファイルは Windows アプリケーションパッケージプロジェクトを使って簡単に作成できます。

新しいめの Windows 10 を使う場合には自動更新機能などもあるため割と使いやすいです。自動更新機能付きのパッケージなどの作成についての詳細は以下のドキュメントを参照してください。

Visual Studio を使ったアプリ インストーラー ファイルの作成

 

ただ、残念なことに App Center 自体は msix (厳密には App Installer) の自動更新機能などは使えないので自動更新機能は無効にした状態でパッケージを作ることになります。

 

まとめ

ということで、簡単にですが Visual Studio App Center の WPF / WinForms 機能を WPF on .NET Core で試してみました。まだプレビューですが、WPF / WinForms アプリで簡単にアプリログの収集機能やクラッシュログの収集機能、さらにはテスターへの配布機能が使えるようになるのは、非常に便利になるのではないかと思います。

 

これまでは HockyApp 使わないといけませんでしたが、HockyApp は App Center への移行が促されているため、デスクトップアプリはどうしたらいんだろう…と思っていましたが、この問題も解消しそうです。

 

それでは、楽しいアプリ開発を!

Version history
Last update:
‎Aug 25 2019 10:52 PM
Updated by: