rksoftware

Visual Studio とか C# とかが好きです

Uno Platform を始めよう

Uno Platform は UWP の XAML でモバイルを含めたクロスプラットフォームができる開発環境で、最近 .NET のクライアント側の界隈で大きな注目を得ています。
今まで、私も含めてあまり注目してこなかったのはカナダの nventive 社が作っているもので MS のプロダクトではないというところかなと思いますが、もしかしたら .NET Core 3 二ばかり私たちが見ていたからかもしれません。

対応プラットフォームは、UWP、WebAssembly、iOS、Android です。モリモリですね。

■ アーキテクチャ

アーキテクチャは次の公式サイトの図で一目で分かります。

https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2019/08/21141002/diagram.png
https://platform.uno/how-it-works/ より

  • UWP は UWP の XAML がそのまま UWP のプロジェクトに組み込まれて UWP としてビルドされます。
  • WebAssembly は UWP の XML から Uno Platform を介して Mono の WebAssembly が出来上がります。
  • Android、iOS は UWP の XML から Uno Platform を介して Xamarin のアプリが出来上がります。

■ Uno Platform でアプリの作り方

作り方は簡単です。

  • 容量の多いネット回線を用意する
  • Visual Studio にテンプレートをインストールする
  • プロジェクトを作る
  • コードを書く
  • ビルドする・実行する

とても簡単です。

■ ネット回線を用意する

最近のプロジェクトは新規作成後初回ビルド時にライブラリのダウンロードが行われます。 Uno Platform もプロジェクトを新規作成した後、ビルド時にダウンロードが行われます。

はまりポイント

私はやたらと弱い回線でチャレンジして全然ダウンロードできずに最初にビルドできるまで何日かかかりました。
モバイル回線で試すことで、ビルドができましたが数 GB の通信量になっていました。まっとうな固定回線のある環境では特に問題はないでしょうが、田舎のカフェーなどでチャレンジする場合はお気を付けください。

■ Visual Studio にテンプレートをインストールする

一番の難関かもしれません。テンプレートは Visual Studio でメニューの 拡張機能 > 拡張機能の管理 で名前で検索してインストールできます。とても簡単です。
しかし、Uno Platform ではハマりポイントがありました。

はまりポイント

こちらがインストールに成功した画像です。「Platform」で検索した結果 Uno Platform のテンプレートが検索結果に出ています。
f:id:rksoftware:20200119192540j:plain

次に、「Uno」 で検索した画像です。「検索用語 Uno に一致する項目が見つかりません」無慈悲。
f:id:rksoftware:20200119192640j:plain

「uno platform」で検索した画像です。「検索用語 uno platform に一致来る項目が見つかりません」慈悲はない。
f:id:rksoftware:20200119192728j:plain

繰り返しになりますが、私は「Platform」で検索してインストールしました。

■ インストールしたテンプレートでプロジェクトを作る

一番の難関かもしれません。Visual Studio でプロジェクトの新規作成で前述の手順でインストールしたテンプレートを選択するだけです。とても簡単です。
しかし、Uno Platform ではハマりポイントがありました。

はまりポイント

こちらがプロジェクト作成に成功した画像です。「Uno」で検索した結果 Uno Platform のテンプレートが検索結果に出ています。テンプレートのインストール時との違いが印象深いですね。とても簡単です。

はまりポイントは、上の画像を見てください。テンプレートにタグが設定されません。私は良く言語とプラットフォームで絞ってテンプレートを選択するのですが、その方法でテンプレートを探せません。
繰り返しになりますが、私は「Uno」で検索して作成しました。

■ 一旦実行

一番の難関かもしれません。新規作成したプロジェクトをいったん実行してみます。前述のようにまともな回線が必要です。とても簡単です。
ただし、状況によってエラーが出る場合があります。

配置エラーが発生しました。続行しますか?

f:id:rksoftware:20200119194700j:plain

重大度レベル  コード 説明  プロジェクト  ファイル    行   抑制状態
エラー     DEP0700: アプリケーションの登録に失敗しました。[0x80073D1F]    XXXXXXXX.UWP      

はまりポイント

UWP で実行する場合、外部ストレージにプロジェクトを置いていると配置エラーになります。もしエラーが発生する場合、C ドライブなどにプロジェクトを移動して bin/obj を削除するなどして再チャレンジしてください。
私は、仮想環境上の Windows の Z ドライブ(ホスト OS との共有)から C ドライブに移動して実行しました。

■ コードを書く

一番の難関かもしれません。XAML とビハインドのコードを少し変更し実行してみます。 UWP の知識で変更できます。とても簡単です。
コードを書く際は、属性(プロパティ)に対して、インテリセンします。
f:id:rksoftware:20200119194859j:plain

しかし、エレメントはインテリセンしません。
f:id:rksoftware:20200119195007j:plain

イベントハンドラも作れます。
f:id:rksoftware:20200119195055j:plain

変更したvコード

XAML

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBox x:Name="box1" Text="Hello, " Margin="20" FontSize="30" />
            <TextBox x:Name="box2" Text=" C# " Margin="20" FontSize="30" />
            <TextBox x:Name="box3" Text=" world!" Margin="20" FontSize="30" />
            <TextBlock x:Name="block1" Margin="20" FontSize="30" />
            <Button Content="button" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>

ビハインド

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            block1.Text = $"{box1.Text}{box2.Text}{box3.Text}";
        }
    }
}

はまりポイント

ビルドも成功し、実行もできるのですがエラーがいつまでも消えないことが(というか消えることが稀)ありました。
f:id:rksoftware:20200119195249j:plain
f:id:rksoftware:20200119195310j:plain

いくらかいじっている間に赤波線は消えることがありました(5 ソリューションくらいいじって 1 回だけ)が、きっかけは不明です。分かったらまた記事にします。

余談ですが、赤波線が消えた状態でも、エラー一覧には UWP 以外のプロジェクトのエラーが表示されつ続けます。フシギ!
f:id:rksoftware:20200119195456j:plain

■ 実行

一番難関のない手続きかもしれません。前述のようにエラーは出続けますが、ビルド/実行は問題なくできます。とても簡単です。

起動直後

ボタンを一回クリック

3 つのテキストをつなげた文字列が、TextBlock に表示されます。

とても簡単です。とても簡単です。

■ まとめ

とりあえず、環境を整えて触ってみるまでは、とても簡単です。
注目度の高いプロダクトですし、もう少し触ってみたいと思います。