Help us understand the problem. What is going on with this article?

WebAssembly でも ReactiveProperty を使ってみよう on Uno Platform

Uno Platform を使うと Windows, macOS, Linux, Android, iOS, WebAssembly 対応のアプリが作れます。
クロスプラットフォーム開発の苦しさはまぁあるとして、その苦しさとクロスプラットフォームに対応するメリットを天秤にかけて最終的に政治的な力によって採用・不採用が決まる感じですよね。

まぁそれは置いといて Uno Platform でも ReactiveProperty が使いたい!!ということで使うまでの手順を説明します。

やってみよう

ということでやっていきます。

プロジェクトの作成

Uno Platform のアプリのプロジェクトを作ります。

ReactiveProperty の参照の追加

NuGet で全プロジェクトに ReactiveProperty への参照を追加します。

Reactive.Wasm の追加

Wasm (Web Assembly) のプロジェクトに Reactive.Wasm を NuGet で追加します。そして Wasm のプロジェクトにある Program.cs の Main メソッドに EnableWasm の呼び出しを追加します。

using System;
using System.Reactive.PlatformServices;
using Windows.UI.Xaml;

namespace App10.Wasm
{
    public class Program
    {
        private static App _app;

        static int Main(string[] args)
        {
#pragma warning disable CS0618 // 型またはメンバーが旧型式です
            PlatformEnlightenmentProvider.Current.EnableWasm(); // これを追加
#pragma warning restore CS0618 // 型またはメンバーが旧型式です
            Windows.UI.Xaml.Application.Start(_ => _app = new App());

            return 0;
        }
    }
}

これで完了です。では使ってみましょう。

適当にテスト用コードの追加

ViewModel を Shared プロジェクトに追加します。

MainPageViewModel.cs
using Reactive.Bindings;
using System;
using System.Reactive.Linq;
using System.Threading.Tasks;

namespace App10.Shared
{
    public class MainPageViewModel
    {
        public ReactiveProperty<string> Input { get; }
        public ReadOnlyReactiveProperty<string> Output { get; }
        public AsyncReactiveCommand ResetCommand { get; }

        public MainPageViewModel()
        {
            Input = new ReactiveProperty<string>("");
            Output = Input.Select(x => x?.ToUpper() ?? "")
                .Delay(TimeSpan.FromSeconds(3))
                .ToReadOnlyReactiveProperty();

            ResetCommand = new AsyncReactiveCommand()
                .WithSubscribe(async () =>
                {
                    await Task.Delay(TimeSpan.FromSeconds(3));
                    Input.Value = "";
                });
        }
    }
}

ReactiveProperty でよくやる 3 秒後とかに大文字になるやつです。これを MainPage.xaml.cs のプロパティとして追加します。

MainPage.xaml.cs
using App10.Shared;
using Windows.UI.Xaml.Controls;

namespace App10
{
    public sealed partial class MainPage : Page
    {
        private MainPageViewModel ViewModel { get; } = new MainPageViewModel(); // add
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

最後に XAML に適当にコントロールを足してバインドしましょう。

MainPage.xaml
<Page
    x:Class="App10.MainPage"
    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="using:App10"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBox Text="{x:Bind ViewModel.Input.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock Text="{x:Bind ViewModel.Output.Value, Mode=OneWay}" />
        <Button Command="{x:Bind ViewModel.ResetCommand}" Content="Reset" />
    </StackPanel>
</Page>

そして、Wasm のプロジェクトをスタートアッププロジェクトに設定して実行すると以下のような感じで動きます。WebAssembly でも ReactiveProperty が動きました!!

wasm.gif

念のため Android でも

and.gif

もちろん UWP でも

uwp.gif

iOS は試そうと思ってたら MacBook Pro を久しぶりに起動したら起動しなかった(!?)ので保留です。

まとめ

ということで Uno Platform を使うときも ReactiveProperty をぜひお願いします!

okazuki
日本マイクロソフトでサポート系のエンジニアとして働いています。 好きな言語は C# と TypeScript。メインの興味領域は Windows クライアントアプリ開発と Xamarin によるモバイルアプリ開発。その延長として API を作るための Azure の PaaS 系サービスが好きです。 SPA はたしなむ程度に。 お約束ですが、ここでの発言は個人の見解になります。
https://blog.okazuki.jp
microsoft
マイクロソフトのメンバーが最新の技術情報をお届けします。Twitterアカウント(@msdevjp)やYouTubeチャンネル「クラウドデベロッパーちゃんねる」も運用中です。
https://aka.ms/MSFT-Docs-JPN
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away