15
15

More than 1 year has passed since last update.

.NET MAUIで人生初のMacデスクトップアプリを作ってみた

Last updated at Posted at 2023-03-02

.NET MAUIの正式リリースから半年以上経った現時点での.NET MAUIの現在地の確認のために、一回最新の開発環境を整えて人生初のMac用のデスクトップアプリをC#でサクッと作ってみる

開発環境構築

まずマシンは最新のM2 MacBook Proなんて訳もなく、2019年製の余ってるMacBook Air 13inch
OSはBig Sur 11.2.1かあ、さすがは放置マシンですね
OSのバージョンアップ、Visual Studio for Mac 2022と順番に入れていきます
ss1.png

Montereyはすっ飛ばして、Ventura(2022/10リリース)の最新版にあげます
ss2.png

はい、入りました
ほんで、Visual Studio for Mac 2022を入れます、何は無くともMAUIは必須
ss3.png

ほんで、Xcodeの更新も言われます、あるあるですね

ss4.png

でもXcodeのインストールって何処まで進んでるのかわからんし、時間滅茶苦茶かかります
なので、アクティビティモニタを横目で見つつのんびり待ちます、これリアルにMacの開発者の人ってどうしてんのやろ
どこまで進んでんのか不安のならんのかしらん?
ss5.png

.NET MAUIでhello world

やっとここまで来た!
ss6.png

さて、MAUIでアプリ作っちゃうぞー
ss7.png
C#ってとこ気になるな

ss8.png
C#しか選べやんのかー

ss9.png

ss10.png

おっと、テンプレート作っただけで何か怒られた、拒否する余地無いんでOKにする
ss11.png

これをそのままビルドするだけでいとも容易く、Mac版、iOS版、Android版のHello worldが即座に動く
Xamarinの初期の不安定さとは全然違ってる、容易い!!!

macOS版
ss12.png

Android版(エミュレータ)
ss13.png

iOS版(エミュレータ)
ss14.png

ここまでの感想

すごく簡単にマルチプラットフォームのアプリが作れるのは確認できた
LinuxのGUIアプリが正式に組み込まれるのかどうかはわからないけど、Linux版まで入ったらひとまず何でも作れる感じにはなるね

MAUI の方言とか制限とか

Windowsで.NET Frameworkしか触ったことがない人がWindows8.0のWinRT APIに初めて触れたときの手探り感のような感覚は実際にあります
これはXamarinでスマホアプリを開発する時以上にデスクトップアプリを書きたい時に感じる不自由さです
すごく単純な例でいえば、ローカルファイルへのアクセスとか全然できないのでWindows Exploererみたいなファイラーを作るとかできません、個人的にはデスクトップアプリはツールとかばっかり作るのでMAUIでやる気にはならない感じ
私の主戦場はWindowsなので.NETでWPFって感じになります

やれる範囲での実際の簡易アプリの実装例

突貫工事なので大したことやってません、ユーザーが画像ファイルを選ぶと画面に表示されるだけの超簡単なイメージビューワを作ってみました

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="meetupapposaka7.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>
        <Button
                x:Name="CounterBtn"
                Grid.Row="0"
                Text="ファイル選択"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        <Image
            x:Name="image1"
                Grid.Row="1"
                HorizontalOptions="Center" />

    </Grid>
</ContentPage>
MainPage.xaml.cs
namespace meetupapposaka7;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
	}

	private async void OnCounterClicked(object sender, EventArgs e)
	{
        var imageFileTypes = new FilePickerFileType(new Dictionary<DevicePlatform, IEnumerable<string>>
                                                  {
                                                     { DevicePlatform.iOS, new[] { "jpg", "jpeg", "png" } },
                                                     { DevicePlatform.Android, new[] { "jpg", "jpeg", "png" } },
                                                     { DevicePlatform.WinUI, new[] { "jpg", "jpeg", "png" } },
                                                     { DevicePlatform.MacCatalyst, new[] { "jpg", "jpeg", "png" } },
                                                        });
        var options = new PickOptions
        {
            PickerTitle = "画像ファイルを選択してください",
            FileTypes = imageFileTypes,
        };


        var result = await FilePicker.Default.PickAsync(options);
        if (result != null)
        {
            image1.Source = ImageSource.FromFile(result.FullPath);
        }
    }
}

実行イメージはこんな感じ、こんなことやるだけでも変な挙動があって、実践投入するには慣れは必要って感じでした
Videotogif (1).gif

以上です

15
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
15