.NETクロスプラットフォームクライアントフレームワーク - Avalonia UI

本記事の目次

1. Avalonia UI の概要

Avalonia UI ドキュメントチュートリアル: https://docs.avaloniaui.net/docs/getting-started

クロスプラットフォームがますます普及し、.NET がクロスプラットフォームをサポートしてから十数年が経ちます（Mono の登場以来）。

しかし、現在の .NET ベースのクロスプラットフォームは、依然として B/S アーキテクチャのクロスプラットフォームが主流です。C/S アーキテクチャに関しては、多くの人が Qt を使用するか、以前は Mono を使用して .NET 開発者がクロスプラットフォームアプリを開発できました。Microsoft が Xamarin を買収した後、今年（2022年）になって MAUI クロスプラットフォームフレームワークが正式にリリースされ、さらにサードパーティのクロスプラットフォームフレームワーク Uno や Avalonia UI も選択肢として加わり、技術スタックが爆発的に増えています。

本日紹介するのは Avalonia UI です。サイト管理人が数日かけて調査したところ、これは WPF XAML ベースのクロスプラットフォーム UI フレームワークで、複数の OS（Windows（.NET Core）、Linux（GTK）、macOS、Android、iOS）および Web（WebAssembly）をサポートしています。

2. Avalonia UI デスクトップ三大プラットフォームのデモ

これは Avalonia UI 公式サイトのデモです。サイト管理人は一部の NuGet パッケージをアップグレードしました。また、ユーザー「小飛機MLA」が Linux 版のフォントバグを修正し、正常に動作・表示できるようにしました。

2.1 本記事のサンプル

音楽アルバムを検索・表示する小さなアプリケーション。機能は以下の通りです:

ホームページ: 購入済みの音楽アルバムを表示
アルバム選択ページ: アルバムの検索、購入

2.2 サンプル資料

サンプルチュートリアル: https://docs.avaloniaui.net/tutorials/music-store-app

サンプルソースコード（オリジナル）: https://github.com/AvaloniaUI/Avalonia.MusicStore

サイト管理人がアップグレードしたソースコード: https://github.com/dotnet9/AvaloniaTest/tree/main/src/Avalonia.MusicStore

本記事のサンプル実行ファイルダウンロード: https://dotnet9.com/avalonia.musicstore/publish.html

2.3 サンプルデモ

Windows 11:

macOS 13:

Rider（EAP版で可）を使用して開発すれば、サイト管理人は一発でコンパイル・実行できました（サイト管理人は .NET 7 を使用）。実行・デバッグは非常にスムーズで、MAUI を使用したときとは信じられないほど快適でした。

国産キリンV10オペレーティングシステム

サイト管理人はキリンOS のインストールに少し手間取りました（ファイル転送に不慣れで、結局 Baidu ネットディスクを経由しました）。実行コマンドも不慣れで（実行プログラムにパーミッション777を設定する必要がありました）。その後、ユーザー「小飛機MLA」が Linux のフォント問題を解決してくれたおかげで、サイト管理人は喜んで実行し、ビデオを録画して共有することができました。

2.4 小さな欠点

3つのプラットフォームで機能は同じですが、Linux ではカスタムタイトルバーが機能しませんでした。ユーザーからは、タイトルバーを非表示にして、制御ボタン（最小化、最大化（復元）、閉じる）を自分で実装すればよいとのアドバイスがありました。今後、公式が Linux でこの問題を解決するはずです。引き続き研究・改良していきます！

3. Avalonia UI のその他の例

3.1 ユーザーの共有

以下の内容はブログ記事「Avalonia学習実践(二)--クロスプラットフォーム対応と公開」から引用しています。

3.1.1 サポートされるプラットフォーム

サポートされるプラットフォームの詳細は以下の通りです:

実行プラットフォーム	バージョン
Windows	Windows8 以降（Windows7 も使用可能だが、保証はしない）
macOS	macOS High Serra 10.13 以降
Linux	Debian 9、Ubuntu 16.5、Fedora 30 以降（主に各ディストリビューション）

モバイル端末のクロスプラットフォーム、すなわち iOS と Android のサポート。

Web サポート、すなわち WebAssembly（国際標準）。

3.1.2 Linux カーネルを使用する国産OSの状況

オペレーティングシステム	開発機関	備考
銀河麒麟	天津麒麟信息技術有限公司
中标麒麟	中标软件科技有限公司	元中标普華
統信UOS	統信软件科技有限公司
中科方德	中科方德软件有限公司
優麒麟	中国CCN联合實驗室	Ubuntu ベースのディストリビューション
深度(deepin)	武汉深之度科技有限公司	23版以降はKernelから構築

公開オプション:

テスト環境（統信UOS、AMDプロセッサのため linux-x64 を選択）への公開は以下の通り:

実行結果:

付録：国産CPU命令セットの系統

国産CPU	命令セット
龍芯	loongarch（サイト管理者注：ユーザーから loongarch と指摘あり、原文は ~~MIPS~~）
海光	x86
兆芯	x86
飛騰	arm
鲲鵬	arm
申威	Alpha

龍芯は完全に独自の命令セットであり、先日 .Net のサポートも更新されました。x86 は主にエコシステムが良好で、従来のデスクトッププロセッサである Intel や AMD は x86 アーキテクチャであり、互換性確保も容易です。arm は以前はモバイル端末が多かったですが、現在はデスクトップ端末も徐々に追いついてきています。

3.2 その他の例

例はリポジトリ Avalonia からのものです。

Avalonia ベースで構築されたプロジェクトの一部は以下の通りです:

3.2.1 Lunacy

無料のデザインソフトウェアで、AIツールと内蔵グラフィックスによりスムーズな動作を実現。

プロジェクトサイト: https://icons8.com/lunacy

以下はB站の動画からの引用: 「（転載/英語）Lunacy を使ってウェブサイトのトップページをデザイン！」

3.2.2 Plastic

キャッチコピー: Create without compromise（妥協せずに創造する）

Unity Plastic SCM はバージョン管理およびソースコード管理ツールで、チームコラボレーションとあらゆるエンジンとの拡張性を高めるように設計されています。アーティストやプログラマー向けに最適化されたワークフローと、大規模ファイルやバイナリファイルを高速に処理する機能を提供します。

プロジェクトサイト: https://www.plasticscm.com/

3.2.3 WasabiWallet

デスクトップ向けのオープンソース、非管理型ビットコインウォレット。

プロジェクトサイト: https://www.wasabiwallet.io/

4. Avalonia UI と WPF

Maui のネイティブコントロールは、名前やプロパティリストを見るとネイティブ Android に似ていますが、XAML 構文は WPF と同じです。サイト管理人は Maui ネイティブコントロールをあまり使用していないため、表面的な見解にとどめ、コードは記載しません。Maui の学習はこちらを参照してください。

一方、Avalonia UI は WPF とほぼ同じです。以下に原文「データバインディングのドキュメント」の翻訳を示します。WPF に詳しい方は比較してみてください：

コントロールへのバインディング

コントロールの DataContext にデータをバインドするだけでなく、他のコントロールにバインドすることもできます。

この操作を行う場合、バインディングソースはコントロール自体であり、コントロールの DataContext ではないことに注意してください。コントロールの DataContext にバインドする場合は、バインディングパスでそれを指定する必要があります。

4.1 名前付きコントロールへのバインディング

名前付きの別のコントロールのプロパティにバインドする場合は、コントロール名の前に # 文字を付けて使用できます（サイト管理人注：これはフロントエンドの css の id セレクタに似ています。Avalonia UI のスタイル拡張はフロントエンドから多くを借用しているとサイト管理人は推測しています）。

<TextBox Name="other">

<!-- Binds to the Text property of the "other" control -->
<TextBlock Text="{Binding #other.Text}"/>

これは、WPF や UWP に慣れたユーザーにはおなじみのロングフォームバインディングに相当します：

<TextBox Name="other">
<TextBlock Text="{Binding Text, ElementName=other}"/>

Avalonia は両方の構文をサポートしていますが、短い # 構文の方が冗長ではありません。

4.2 祖先へのバインディング

次の記号を使用して、ターゲットの論理的な親にバインドできます：$parent

<Border Tag="Hello World!">
  <TextBlock Text="{Binding $parent.Tag}"/>
</Border>

または、$parent 記号にインデックスを追加して、祖先に渡すこともできます：

<Border Tag="Hello World!">
  <Border>
    <TextBlock Text="{Binding $parent[1].Tag}"/>
  </Border>
</Border>

インデックスは 0 から始まるため、$parent[0] は $parent と同じです。

型で祖先にバインドすることもできます：

<Border Tag="Hello World!">
  <Decorator>
    <TextBlock Text="{Binding $parent[Border].Tag}"/>
  </Decorator>
</Border>

最後に、インデックスと型を組み合わせることもできます：

<Border Tag="Hello World!">
  <Border>
    <Decorator>
    	<TextBlock Text="{Binding $parent[Border;1].Tag}"/>
    </Decorator>
  </Border>
</Border>

祖先の型に XAML 名前空間を含める必要がある場合は、通常通り : 文字を使用して行うことができます：

<local:MyControl Tag="Hello World!">
  <Decorator>
    <TextBlock Text="{Binding $parent[local:MyControl].Tag}"/>
  </Decorator>
</local:MyControl>

Avalonia は WPF/UWP の RelativeSource 構文もサポートしていますが、その機能は似ているものの同じではありません。RelativeSource はビジュアルツリーに適用されますが、ここで示した構文は論理ツリーに適用されます。

Avalonia UI の詳細な使用方法はこちらを参照してください。

5. JetBrains Rider のサポート

JetBrains Rider は現在、Avalonia を正式にサポートしています。 XAML プレビューアー、コード補完、インスペクション、リファクタリングのサポートが追加されました。プラグインリポジトリ https://plugins.jetbrains.com/plugins/dev/14839 から AvaloniaRider プラグインをインストールしてください。

6. よくある質問

翻訳元: Avalonia UI FAQ

6.1 XAML を使わずに UI を記述できますか？

はい。お好みの .NET 言語で UI 全体をコーディングできます。

6.2 ビジュアルなドラッグ＆ドロップデザイナーはありますか？

ありません。Avalonia IDE 拡張機能はライブプレビューをサポートしており、XAML を編集するとリアルタイムで UI プレビューが更新されるため、ドラッグ＆ドロップデザイナーを代替します。

6.3 Avalonia はホットリロードをサポートしていますか？

コミュニティプロジェクトを使用して、Avalonia のホットリロードを有効にすることができます。

6.4 Avalonia はネイティブ API と相互運用できますか？

はい。

6.5 異なるプラットフォーム向けにクロスコンパイルできますか？

はい。Windows プラットフォームで、macOS や Linux 向けのターゲットプログラムをコンパイルできます。これらのプラットフォームでアプリケーションをパッケージ化して、配布用のリリースパッケージを作成する必要がある場合があります。

6.6 Avalonia でモバイルアプリケーションを構築できますか？

はい。現在 Android 向けの開発が可能で、iOS サポートのプレビューも提供されています。ただし、各プラットフォームを慎重に検討し、アプリケーションが小さなタッチデバイスで適切に動作することを確認する必要があります。

6.7 Avalonia でウェブサイトを構築できますか？

まだ初期段階であり、本番環境での使用には適していませんが、可能です。Avalonia は現在 Web Assembly をサポートしています。簡単なデモをご参照ください: NodeEditor Demo。つまり、完全な Avalonia アプリケーションを最新のすべてのウェブブラウザで実行できます。

6.8 どのようにプロジェクトに参加できますか？

コミュニティガイドを参照して、プロジェクトへの参加方法を確認してください。

6.9 サポートされる Linux ディストリビューションは？

Debian 9 (Stretch)+
Ubuntu 16.04+
Fedora 30+

Skia は glibc に対してビルドされています。お使いのディストリビューションが別のものを使っている場合は、SkiaSharp を使用して独自の libSkiaSharp.so をビルドする必要があります。Intel x86-64 向けのプリコンパイル済みバイナリのみを提供しています。ARM/ARM64 のサポートを計画中です。

6.10 サポートされる macOS のバージョンは？

macOS High Sierra 10.13+

7. 学習資料

Avalonia UI 公式サイト: https://avaloniaui.net/
Avalonia UI リポジトリ: https://github.com/AvaloniaUI/Avalonia
コミュニティ Avalonia UI 中国語サイト: https://avaloniachina.gitbook.io
コミュニティ Avalonia UI 中国語サイトリポジトリ: https://github.com/avaloniachina/Documentation