Published Date : 2021年1月27日21:24

Uno PlatformアプリをFirebaseにアップロードしたりAPKファイルにエクスポートする方法
How to upload your Uno Platform Application to Firebase or Export to an APK File

This blog has an English translation


This is a summary blog post about a video I uploaded to NicoNico.


Please refer to the video for details.


Table of Contents

① 動画の説明
① Video Description

今回作るUno Platformのアプリはこのようになります。

This is the Uno Platform app we are going to make this time.

Uno Platformの環境設定方法は以前の動画を参考にしてください。

See my previous video for how to set up the Uno Platform.


The content of the application is a simple toy application that greets you with letters when you enter your name.


Also, we'll create an Android APK and deploy the WASM web app to Firebase.

まずはいつものようにVisual Studio 2019を立ち上げ、Uno Platformのテンプレートを使用して、新しいプロジェクトを作成しましょう。

Launch the Visual Studio 2019 as usual and create a new project using the Uno Platform template.


Create a project by specifying a location and name for the appropriate project.

ひとまず、Uno Platformが適切に動作するかどうかを確認してみましょう。

First, let's see if the Uno Platform works properly.


Start debugging each project without making any changes.


Refer to my previous video for details on setting up Designer mode.


Delete the default text box and grid layout, and use the toolbox to create a layout for your app.


You can use the properties window at the bottom right to adjust the style, but this time you will write the style values directly in XAML.


[x:Name] is equivalent to an ID in HTML. Use this value to change the content of the text.


Stack panel layouts can be arranged to stack elements.


If you use grid layout, you can arrange elements such as buttons side by side like this time.


The column width can be determined in advance using the definition.


If you use an asterisk for the width value, it will automatically determine the width based on the number of columns.


You can change the color of the buttons.

<Button Click="Greeting_Btn" Content="名前を付けて挨拶" Margin="10" HorizontalAlignment="Left" Foreground="White" Background="Blue" FontSize="12"/>


Of course, you can also change these values in the properties window at the bottom right.


When you're ready to your layout, Now let's prepare the logic part of the application.


Open [MainPage.xaml.cs] and start writing C# code.


First, we prepare the method of the event name registered in [Click] of the button prepared in the previous layout.


And within that method, We write actions that change alters of the text specified by [x:Name] when the button is pressed.

private void Greeting_Btn(object sender, RoutedEventArgs e)
    string userName = entry.Text;
    string greeting = $"Hello {userName}";

    hello.Text = greeting;


Write the code in the clear method in the same way.

Uno Platformで使用しているXAMLやC#はUWPアプリ開発で用いられている記法です。

XAML and C# used by the Uno Platform are notations used in UWP application development.


For more information about using and writing them, refer to the Microsoft documentation.

Uno Platformのバージョンが最新のものになっている関係なのか、別の問題なのか、どちらかなのか分かりませんが、[x:Name]の箇所でエラー表示になっています。

I don't know if it is a relationship with the latest version of Uno Platform or another problem, but there is an error in [x:Name].


However, it works fine to ignore these errors and start debugging and releasing.


Then, let's check how the Android application works.


Next, let's check the operation of the UWP application.


Finally, let's see how the WASM app works.

ではAndroid APKをリリースしてみましょう。

Let's release the Android APK.

Androidプロジェクトのプロパティを開いて、Android マニフェストを編集してみましょう。

Open the Android project properties and edit the Android manifest.


There is basically nothing to edit other than the keystore input. The default settings are fine.

Google Play等に登録する際はまた別の設定が必要かもしれません。各自で調べてください。

When you register in Google Play, you may need another setting. Please check it by yourself.


If you want to use your own icons, move the icon image files created by the icon generator, for example, to the drawable folder of your project and use them.


When you're ready, right-click on your Android project and choose Archive.


Click the distribution button and select [Ad Hoc] to create the keystore.


Select the keystore you created and click Save As.


You should see multiple APK files in the location you specified.


Of course, it is possible to debug even an Android device.

ツールを選択して、AndroidからAndroid SDK マネージャーを選択してください。

Select Tools and select Android SDK Manager from Android.

そして、ツールを選択し、追加を選択、Google USB Driverにチェックを入れてインストールしてください。

Then, select Tools, select Add, check Google USB Driver and install.


Then, please connect the actual Android device to your computer with USB and allow USB debugging.


Then, you can select the name of the actual device, and if you select it and press the play button, the application will work on the Android device.


Now let's deploy the WebAssembly app to Firebase.


Right-click the WebAssembly project and click Publish.


Select the folder and click the Finish button.


You can also specify any folder. Please set it up by yourself.


After that, if you click Publish, you will see a folder with Package in front of its name, index.html and web.config file in the specified folder.


These folders and files are used to deploy to Firebase.


Now create appropriate working folder somewhere for deploying to Firebase.


Then log in to Firebase and create a new project.


See my previous video for details on how to create a Firebase project and install the CLI.

それでは先ほど作成したフォルダ内でPowerShellを開き、実行ポリシーを変更して、Firebase CLIを使用してFirebaseにログインしてください。

Now open PowerShell in the folder you just created, change the execution policy, and log in to Firebase using the Firebase CLI.

Set-ExecutionPolicy RemoteSigned -Scope Process
[Y] [A] [N] [L] [S] [?]: y
firebase login

ログインできたら、firebase initコマンドを打って、デプロイできる環境を作成します。

Once you are logged in, create a deployable environment by typing the firebase init command.

firebase init
( ) Hosting: <- Press Space Key, then Enter


Move the file or folder you just created into this dist folder.


Move the web.config file directly under the project folder, leaving only the folders and files required for deployment and removing any unnecessary files.

後はfirebase deployコマンドを打って、Firebaseホスティングにアプリをデプロイします。

Then deploy the app to Firebase hosting by typing the firebase deploy command.


After the deployment is successful, go to the Firebase Hosting page and click the web app URL.

Uno Platformを利用すれば、一度にAndroidアプリやWebアプリを一つのコードで作成できるので大変便利ですね。

Uno Platform is very convenient because you can write Android application and web application at once with one code.


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