.NET MAUI Blazor で Markdown メモアプリを作った感想
この記事で作ったメモアプリのアップデートを行いました。今回は Windows 対応 & Markdown 表示の実装を行いました。
リンクは以下です。
見た目はこんな感じになりました。
Windows
Android
箇条書きやコードの埋め込みなどの基本的なマークダウンの記法に対応しています。
Windows は引き続き .NET MAUI で、Blazor Hybrid で一部実装しました。Android は、以前は MAUI でしたが、今回 MAUI はクビにして普通の .NET 7 の Android アプリとして作り直しました。
.NET MAUI Blazor を使ってみた感想とか、Android 版で MAUI をやめた理由など書ければと思います。
.NET MAUI + Blazor
.NET MAUI アプリで、WebView を画面上に配置し、そこに Blazor でレンダリングを行うことで HTML、CSS で UI の構築ができるというものです。Blazor WebAssembly とは違いネイティブの .NET ランタイムを使うようになっています。
XAML を書かずに（Blazor レンダリング用の WebView を XAML で配置する必要はありますが） HTML、CSS のみで画面を構成するということもできますし、上記の仕組み上、一部にネイティブの UI を使用するという使い方もできます。今回作成したアプリでは、メモの表示部分のみ Blazor を使うという、後者の形になっています。
普通はこのように混合させる意味があまりないため、HTML、CSS のみで画面を構成するか、XAML のみで画面を構成する（普通の .NET MAUI）かの2択になるかと思いますが、今回は XAML ですべての画面を構成をする予定だったのが、Markdown 表示部分がネイティブのコントロールだけではいい感じにならなかったので、メモ表示部分のみ Blazor を使用してみました。（Markdig を使えば Markdown → HTML の変換がすぐにできる）
当初は Blazor を使用する予定はなかったのですが、今回 Markdown 表示の実装のため試しに使ってみたところ動作が安定していていい感じなので、XAML を全部こちらに置き換えてもいいのでは、という気分です。というか、多分やります。
Android 版開発での .NET MAUI 解雇
以前は Android も .NET MAUI で作っていて、CollectionView のパフォーマンスやバグの多さは以前から愚痴ってますが、まあ使えるレベルだったので無視していました。
ところが先日久しぶりにビルドして見ると、以前は大丈夫だったメモ入力部分の表示がおかしくなるようになっていて使えないレベルになってしまったので仕方なくクビにしました。
で、何で作り直したかですが、.NET 7 (.NET 6 から)では以前の Xamarin.Android、Xamarin.iOS などが統合され、Kotlin、Java、Swift などの代わりに C# を用いて Android や iOS のアプリを作成できるようになっているのでこれを試してみました。実際開発してみたところ、Android 開発については文字通り Java の代わりに C# が使えるといった感じでした。Android の API は C# スタイルの命名になっているという以外は名前が全く同じなので、Java のソースコードを持ってきて名前の先頭を大文字にするだけで動いたりします。
気になる点は Android 用のライブラリが使用できるかどうかですが、ライブラリの .jar と C# を接続するバインディングライブラリを作成すれば使用できるようです。基本的なもの（RecylerViewなど）は Microsoft がバインディングライブラリを用意してくれているので nuget から取ってくるだけで使えます。今回は nuget にあるものですべて完結できました。
ちなみに、Material Design 3 のライブラリも nuget にあったので、今回試しに Android 12？13 の Material You に対応させてみたりしました。
スマホの壁紙の色によって微妙に色が変わります。
Material You
実際に開発してみたところ、いくつか問題点もあったので紹介します。
そもそもあまり情報がない
.NET に Xamarin.Android が統合されてからの、Xamarin.Android に対応する呼び名が定まっていないようなので、検索がしにくいです。
古い情報が出がちですが、〇〇 xamarin android というように検索するのがおすすめです。Xamarin.Android 時代を知らないのでわからないですが、基本的には変わっていないっぽいので。
画面のレイアウトはコードで書くしかないので少ししんどい
Android Studio にあるレイアウトエディタみたいなのは（使え）ないので XML を手書きする必要があります。（一応 Visual Studio にもレイアウトエディタがあるみたいですが、役に立ちませんでした）これがちょっとしんどいです。特に ConstraintLayout。
ジェネリック API が非ジェネリックになる仕様が面倒
これが一番よくないポイントです。例えば LiveData<T> などのジェネリッククラスがバインディングライブラリでは LiveData になっており、型が強制的に Java.Lang.Object になっうようです。これどうにかならないんですかね...。
また型が C# の object ではなく、Java.Lang.Object なので、C# のオブジェクトを直接渡せなくて不便というのもあります。ちなみにこの問題は、現在は以下のような C# のオブジェクトをラップするクラスを定義して使うことで回避しています。もっといい方法あれば教えてください。
class JavaObject<T> : Java.Lang.Object
{
public required T Value { get; init; }
}
Microsoft Store への公開
今回はじめて Microsoft Store へアプリを公開してみました。公開するにあたって、アプリの名前が一意でないとダメという謎の制約があり、すでに取られているのか Cache が使えなかったので、名前と言っても多分アプリ ID みたいなものだろうと思って適当に Cach3 としたところストアの表示名も Cach3 になってしまって困ってます...。なんだこれ。これはもう一回公開し直さないとダメということなんでしょうか？
Mac、iOSの対応
Mac は現在実機も持っているので早めに対応させたいところですが、久しぶりに Mac でデバッグしようとして Visual Studio for Mac を立ち上げるとビルドが通らなくなっていたのでやる気がなくなりました。iOS に関しては現在実機が手元にないのでそもそもやる気がでなかったです。ということで対応は後々頑張ります。
今のところ、Mac の実装は .NET MAUI Blazor、iOS は .NET iOS で頑張るつもりです...。
今後の予定
個人的によく使うデバイス（Mac 以外）のプラットフォームのアプリがそれぞれ作成できたので、次はサーバにメモを保存できるようにしたいです。サーバ側も C# で実装することで、夢のフロントエンドとバックエンドオール C# 構成になります。wktk！！！
機能面としては、正規表現での検索や各種設定項目（表示サイズ設定など）の追加あたりを考えてます。
Discussion