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

ニコニコ動画にアップした動画のまとめ記事です。

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

細かい部分は動画を参考にしてください。

Please refer to the video for details.

今回作る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.

そして、AndroidのAPKを作成し、WASMのWEBアプリをFirebaseにデプロイしてみましょう。

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.

右下のプロパティウィンドウを利用してスタイルを調整してもいいですが、今回はXAMLに直接スタイルの値を書き込んでいきましょう。

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]はHTMLでいうIDに相当する値です。この値を利用してテキストの内容等を変えていきます。

[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.

[MainPage.xaml.cs]を開いて、C#のコードを書いていきましょう。

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

まず、先ほどのレイアウトで用意したボタンの[Click]に登録したイベント名のメソッドを用意します。

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

そしてそのメソッド内で、ボタンが押された時に[x:Name]で指定されたテキストの表示を変えられるような処理を書きます。

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.

これらはMicrosoftのドキュメントで詳しく使用方法や書き方を説明してくれているので、そちらを参考にしてください。

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.

続いてUWPアプリの動作を確認してみましょう。

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

最後にWASMアプリの動作を確認してみましょう。

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.

もし自作のアイコンを使いたいなら、プロジェクトのdrawableのフォルダ内に、アイコンジェネレーター等で作成したアイコンの画像ファイルを移して利用することができます。

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.

準備ができたら、Androidプロジェクトで右クリックをしてアーカイブを選択します。

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.

すると、指定した場所に複数のAPKファイルがあるのが確認できると思います。

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.

後はUSBでアンドロイドの実機をパソコンに繋げて、USBデバックを許可してください。

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.

では続いて、WebAssemblyのアプリをFirebaseにデプロイしてみましょう。

Now let's deploy the WebAssembly app to Firebase.

WebAssemblyプロジェクトで右クリックをして発行をクリックします。

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.

後は発行をクリックすると、指定したフォルダ内に名前の頭にPackageと付いたフォルダとindex.htmlとweb.configファイルがあるのが確認できると思います。

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.

これらのフォルダとファイルはFirebaseにデプロイする際に使用します。

These folders and files are used to deploy to Firebase.

ではFirebaseへデプロイする為に必要な作業用フォルダをどこか適当な場所に作成してください。

Now create appropriate working folder somewhere for deploying to Firebase.

そしてFirebaseにログインして新しいプロジェクトを作成してください。

Then log in to Firebase and create a new project.

Firebaseのプロジェクトの作り方とCLIのインストール方法等の詳細は以前の動画を参考にしてください。

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

このdistフォルダ内に先ほどのファイルやフォルダを移動します。

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

web.configファイルはプロジェクトフォルダ直下へ移動させて、デプロイに必要なフォルダとファイルのみを残して後は削除します。

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.

デプロイが成功したら、FirebaseのHostingのページを開き、ウェブアプリのURLをクリックします。

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.