Uno Platform入門
Let's start Uno Platform

YouTubeにアップした動画、「【日本語解説】Uno Platform入門【Uno Platform】」の補足説明の記事です。

Here's a little more about the 「【Uno Platform】Let's start Uno Platform」 video I uploaded to YouTube.

字幕を付けるなら、英語音声と日本語音声の二つに分けたほうが良いと思ったので、今回から同じ動画だが音声が日本語と英語に分かれたものをアップしました。

I thought it would be better to separate the video into English audio and Japanese audio instead of adding subtitles to the video, so I uploaded the same video with Japanese and English audio separately.

ページの頭に日本語解説動画、ページの最後に英語解説動画のリンクが貼られてます。

There is a Japanese explanation video at the top of the page, and an English explanation video link at the end of the page.

chomadoさんのブログを参考にしました。

I referred to Chomado's blog.

Uno Platform 入門 1 : Uno Platform とは？ ～ C# で iOS, Android, Web, Windows 10 アプリを一気にクロスプラットフォーム開発～

Introduction to Uno Platform 1: What is Uno Platform? Cross-platform development for iOS, Android, Web, and Windows 10 apps in C#

C#とXAMLでAndroid、WebAssembly、iOS、Windows 10のアプリを

Try the Uno Platform, which enables cross-platform development of

クロスプラットフォーム開発できるUno Platformを使ってみよう！

Android, WebAssembly, iOS, and Windows 10 apps in C# and XAML!

まずはVisual Studio Installerを起動して、必要な環境を整えましょう。

Start the Visual Studio Installer and set up the necessary environment.

開発に必要なワークロードにチェックを入れて、インストールしましょう。

Check the workload you need for development and install it.

[ASP.NETとWeb開発]と[.NETによるモバイル開発]と[ユニバーサルWindowsプラットフォーム開発]

After installing [ASP.NET and Web Development], [Mobile Development with .NET]

の三つのインストールが終わったら、VisualStudioを起動します。

and [Universal Windows Platform Development], start Visual Studio.

Uno Platformを試す前に、環境が正しく整っているかを確認していきます。

Before you try out the Uno Platform, make sure your environment is in place.

新しいプロジェクトの作成の画面で、[ASP.NET Core Web アプリケーション]を選択します。

On the Create New Project screen, select [ASP.NET Core Web Application].

[.NET Core]とそのヴァージョンを指定して、[Webアプリケーション]を選択します。

Specify [.NET Core] and its version, then select [Web Application].

Visual Studioが立ち上がったら、特に何もしないで、そのまま[プレイボタン]を押します。

When Visual Studio starts up, just press [play button] without doing anything.

ブラウザが立ち上がり、[Welcom]と表示されていればOKです。

When the browser is up and [Welcom] is displayed, it is OK.

続いてXamarinを確認します。Visual Studioを閉じて、また新しいプロジェクトを作成します。

Then check Xamarin. Close Visual Studio and create a new project.

[モバイルアプリ Xamarin.Forms]を選択します。

Select [Mobile App Xamarin.Forms].

[空白]を選択して、開発したい対象にチェックを入れます。

Select [Blank] and check the items you want to develop.

開発者用モードがオンになっていないと、勝手にウィンドウが立ち上がるので、開発者用モードをオンにしてください。

If developer mode is not turned on, the window will start automatically, so turn developer mode on.

もし手動で開発者用モードをオンにする場合は[スタートメニュー]から[設定]、[更新とセキュリティ]、[開発者向け]の順番に選択していきます。

If you want to manually turn on developer mode, go from [Start menu] to [Settings] to [Updates and Security] to [For Developers].

[Android SDK ライセンスの同意]の画面が表示されるので、同意ボタンを押します。

When the [Android SDK Preview License] screen appears, press the consent button.

[ソリューションエクスプローラー]の[App名.Android]を右クリックして、[スタートアッププロジェクトに設定]を選択します。

Right-click [App Name.Android] in [Solution Explorer] and select [Set to Startup Project].

[Android Emulator]と表示されている[プレイボタン]を押すと、[既定のAndroidデバイスを作成する]という画面が立ち上がるので、

When you press [Play button] which is displayed as [Android emulator], the [Create a default Android device] screen is displayed,

デフォルトか、お好きな[Android Emulator]をインストールします。

So select the [Default Android Emulator] displayed or [Android Emulator] of your choice to install.

すると、インストールした[Android Emulator]の名前が[プレイボタン]に表示されているので、その[プレイボタン]を押します。

Then, the name of the installed [Android Emulator] is displayed in [play button], so press [play button].

Android Emulatorが立ち上がり、[Welcom to Xamarin.Forms!]が表示されていれば成功です。

If the Android Emulator is up and [Welcom to Xamarin.Forms!] is displayed, it's a success.

全ての環境が整ったのを確認したので、Uno Platformを確認します。Visual Studioを閉じて、また新しいプロジェクトを作成します。

Now that we have confirmed that everything is ready, we will check the Uno Platform. Close Visual Studio and create a new project.

上のメニューの[拡張機能]から[拡張機能の管理]を選択します。

Select [Manage Extensions] from the [Extensions] menu above.

[オンライン]を選択、[検索ウィンドウ]に[Uno]と入力、そして表示されている[Uno Platform Solution Templates]をダウンロードします。

Select [Online], enter [Uno] for [Search window], and download the displayed [Uno Platform Solution Templates].

Visual Studioを閉じて、また新しいプロジェクトを作成します。

Close Visual Studio and create a new project again.

新しいプロジェクトの作成の画面で、[Cross-Platform App Uno Platform]を選択します。

On the Create New Project screen, select [Cross-Platform App Uno Platform].

再度[Android SDK ライセンスの同意]の画面が表示されることがあるので、同意ボタンを押します。

The [Android SDK Preview License] screen may appear again, so press the consent button.

プロジェクトが立ち上がるとデフォルトでAndroidが[スタートアッププロジェクト]になっているので、そのまま[プレイボタン]を押してみます。

When the project starts up, Android is set to [startup project] by default, so press [play button].

android emulatorの画面にデフォルトの[Hello World!]が表示されれば成功です。

If the default [Hello World!] appears on the screen of Android emulator, it is successful.

[アプリ名.Shared]にはプラットフォーム共通のコードが入っています。

[App Name.Shared] contains platform common code.

基本的にはここのXAMLとC#を変更すれば、全てのプラットフォームのアプリが最適化されます。

Basically, if you change XAML and C# here, the apps on all platforms will be optimized.

試しに、WASMやUWP等でアプリを実行してみましょう。

Try running your app on WASM or UWP.

XAMLデザイナーを起動して視覚的にレイアウトを変更してみましょう。

Let's start the XAML Designer and change the layout visually.

表示されたドロップダウンメニューからUWPを選択して、一度ファイルを閉じてから、再度開きます。

Select UWP from the drop-down menu provided to close and reopen the file.

XAMLデザイナー上でテキストを変更してみましょう。下に表示されているXAML自体も変更されていることが確認できます。

Let's change the text on the XAML designer. You can see that the XAML itself under the XAML Designer has also changed.

今度はクリックしたらポップアップウィンドウを表示するボタンを作成してみましょう。

Now let's create a button that displays a pop-up window when clicked.

MainPage.xaml

<Page
x:Class="App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App"
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}">
    <TextBlock x:Name="textBlockHelloUno" Text="こんにちは。ウーノ！" Margin="20" FontSize="30" />
    <Button x:Name="buttonAlert" Content="クリックしてね！" Click="AlertFunc" FontSize="30" Margin="20"/>
</Grid>
</Page>

[MainPage.xaml.cs]にボタンが押された時の処理を書きます。

In [MainPage.xaml.cs], write the code for the processing when the button is pressed.

MainPage.xaml.cs

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void AlertFunc(object sender, RoutedEventArgs e)
        {
            var dialog = new MessageDialog("こんにちは。ウーノ！");
            await dialog.ShowAsync();
        }
    }
}

UWPやAndroid等で変更を確認してみましょう。

Check out the changes in UWP, Android, and more.

以上です。お疲れ様です。

That's all. Thank you for your hard work.