UnityとMagicOnionのAndroid・iOS動作確認編（IL2CPP）

はじめに

やはりUnityを使うなら、マルチプラットフォームと言うことで、
AndroidとiOSでのMagicOnionの環境を構築していきます！！

今回のゴールは、UnityとMagicOnionの環境構築（IL2CPP）と同様に、
スマホのクライアントから、サーバー側の関数の結果を受け取れるところまで！！
サーバーへ数値を２つ渡し、足した結果をクライアントの画面に表示します！！

環境

• Unity 2020.3.13f1

• Windows 10

• VisualStudio 2019

• MacBook Pro 2018 (macOS Big Sur 11.4)

• XCode 12.5.1

• MagicOnion 4.3.1

• MessagePack-CSharp 2.1.194

• gRPC 2.40.0

• 確認端末

  • Google Pixel 5 (Androidバージョン 11)
  • iPhone 11 Pro Max (iOS 14.6)

前提条件

• 下記の記事の環境構築が完了している、または、同等の環境が構築済みである事
  UnityとMagicOnionの環境構築（IL2CPP）

• サーバーはWindowsで起動

• iOSの確認は、MacPCにXCodeの環境が構築済みである事

• 確認用の端末は、すべて同一ネットワーク内である事

確認する環境によって、ルーター、セキュリティソフト等の設定が必要になります
※ポート解放など

手順

■共通

1. サーバーの設定変更
2. クライアントの動作確認用UI作成
3. クライアントビルド設定

■プラットフォーム単位

1. ビルド対象の変更
2. プロジェクトの設定変更
3. 動作確認

■サーバーの設定変更

WindowsのIPを確認して、「appsettings.json」の「applicationUrl」をIPに変更

appsettings.json

{
  "profiles": {
    "KumattaApp-Server": {
      "commandName": "Project",
      "launchBrowser": false,
      "applicationUrl": "http://111.111.111.111:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

■クライアントの動作確認用UI作成

スマホのログ確認は、めんどくさいので、結果を表示するＵＩを作成します

UIの表示を見やすくする為、カメラの背景を変更

1. 「Hierarchy」の「Main Camera」を選択
2. 「Camera」に、下記を設定

項目	値
Clear Flags	Solid Color

結果表示用のテキストUIを追加

「Hierarchy」で右クリックして、「UI -> Text - TextMeshPro」を押下

追加すると下記のダイアログが表示されるので、「Import TMP Essentials」を押下

さらに「Import TMP Examples & Extras」を押下

「Hierarchy」に下記が追加されている事を確認

Canvas
  └─Text(TMP)
EventSystem

画面の縦サイズ基準でUIを、自動調整するように設定

私の環境では、画面サイズが下記になるので、それを基準に設定しています！
画面サイズ、テキストサイズは、環境にあった設定をしてください！！

端末	画面サイズ
Google Pixel 5	1080 x 2340
iPhone 11 Pro Max	1242 x 2688

1. 「Hierarchy」の「Canvas」を選択
2. 「Canvas Scaler」に、下記を設定

項目	値
UI Scale Mode	Scale With Screen Size
Reference Resolution	確認端末の画面サイズ
Screen Match Mode	Match Width or Height
Match	1

テキストサイズの変更

1. 「Hierarchy」の「Text(TMP)」を選択
2. 「Rect Transform」に、下記を設定

項目	値
Post	X:0 Y:0 Z:0
Width	上記で設定しているサイズより少し小さめに設定
Height	上記で設定しているサイズより少し小さめに設定

3. 「TextMeshPro - Text (UI)」に、下記を設定

項目	値
Fornt Size	画面サイズに合わせて設定

接続先の変更と結果をUIに出力する為、スクリプトを修正

1. 「host」をサーバーIPに変更
2. 追加したテキストUIを検索して、結果を設定

横着して、テキストUIが一個であることが前提で、検索して設定しています

Assets/KumattaApp/Scripts/MyApp/KumattaAppCall.cs

using UnityEngine;
using Grpc.Core;
using MagicOnion.Client;
using MyApp.Shared;
using TMPro;

public class KumattaAppCall : MonoBehaviour
{
    void Start()
    {
        CallTest();
    }

    public async void CallTest()
    {
        string host = "ローカルのIP";  // ←　サーバーのIPを設定
        int port = 5001;
        var channel = new Channel(host, port, ChannelCredentials.Insecure);
        //var channel = new Channel(host, port, new SslCredentials());

        var client = MagicOnionClient.Create<IMyFirstService>(channel);
        var result = await client.SumAsync(100, 23);

        // 追加したテキストUIを検索して、結果を設定
        var textUI = FindObjectOfType<TextMeshPro>();
        textUI.text = $"Result: {result}";
    }
}

■クライアントビルド設定

マネージバイトコードストリッピングで、gRPCのライブラリが参照できなくなるので、
「KumattaApp」配下に、「link.xml」を追加して参照できるようにする

マネージバイトコードストリッピングの説明は、 記事の目的とは違うので説明しません！！
気になる方は、下記のURLを参照してください！

Unity - IL2CPP を使ったマネージバイトコードストリッピング

gRPC - Unityビルドについて

Assets/KumattaApp/linx.xml

<linker>
    <assembly fullname="UnityEngine">
       <type fullname="UnityEngine.Application" preserve="fields">
            <property name="platform"/>
        </type>
    </assembly>
</linker>

■Android

ビルド対象の変更

「File -> Build Settings...」を押下

「Android -> Switch Platform」を押下

プロジェクトの設定変更

1. 「Edit -> Project Settings...」で、設定画面を開く
2. 「Player」を押下
3. 「Android -> Other Settings -> Identification」の設定を変更

確認端末によって、バージョンは設定してください！
古すぎるバージョンは、動作保障できないので、今回はAndroid 10を最小に指定します

項目	設定値
Minimum API Level	Android 10 (API level 29)

4. 「Player -> Other Settings -> Configuration」の設定を変更

項目	設定値
Scripting Backend	IL2CPP
App Compatibility Level*	.Net 4.x
Internet Access	Require

動作確認

1. サーバーを起動
2. 「File -> Build And Run」を押下
3. 「apk」の出力先を聞かれるので、作用フォルダ外の任意の場所を指定

起動したアプリの画面に、結果が表示されれば成功！！

■iOS

iOSのビルドには、Mac端末が必須です！！

ビルド対象の変更

「File -> Build Settings...」を押下

「iOS -> Switch Platform」を押下

プロジェクトの設定変更

1. 「Edit -> Project Settings...」で、設定画面を開く
2. 「Player」を押下
3. 「iOS -> Other Settings -> Configuration」の設定を変更

確認端末によって、バージョンは設定してください！
古すぎるバージョンは、動作保障できないので、今回はiOS 14.0を最小に指定します

項目	設定値
App Compatibility Level*	.Net 4.x
Target minimum iOS Version	14.0

ビルドで出力されるXCodeプロジェクトの設定変更用スクリプトを作成

出力されるXCodeに対して、下記の設定を行うスクリプト

項目	設定値
Bitcode	無効
libz.tbd	Framework追加
ローカルネットワーク確認文言	テストの為

下記のフォルダに、「KumattaAppBuild」を作成

Assets/KumattaApp/Editor/KumattaAppBuild

using System.IO;
using UnityEditor;
using UnityEditor.Build;
using UnityEditor.Build.Reporting;
using UnityEditor.Callbacks;
using UnityEditor.iOS.Xcode;

public class KumattaAppBuild : IPostprocessBuildWithReport
{
    public int callbackOrder => 0;

    [PostProcessBuild(1)]
    public static void OnPostProcessBuild(BuildTarget target, string path)
    {
        if (target == BuildTarget.iOS)
        {
            IOSPostProcessBuild(path);
        }
    }

    private static void IOSPostProcessBuild(string path)
    {
        var projectFilePath = PBXProject.GetPBXProjectPath(path);
        var project = new PBXProject();
        project.ReadFromFile(projectFilePath);

        var targetGuid = project.GetUnityFrameworkTargetGuid();
        project.AddFrameworkToProject(targetGuid, "libz.tbd", false);

        project.SetBuildProperty(targetGuid, "ENABLE_BITCODE", "NO");
        project.WriteToFile(projectFilePath);
    }

    public void OnPostprocessBuild(BuildReport report)
    {
        if (report.summary.platform == BuildTarget.iOS)
        {
            IOSOnPostprocessBuild(report);
        }
    }

    public void IOSOnPostprocessBuild(BuildReport report)
    {
        // ローカルネットワーク利用の確認ダイアログの文言を変更
        string plistPath = Path.Combine(report.summary.outputPath, "Info.plist");
        PlistDocument plist = new PlistDocument();
        plist.ReadFromFile(plistPath);
        plist.root.SetString("NSLocalNetworkUsageDescription", "テストの為");
        plist.WriteToFile(plistPath);
    }
}

動作確認

1. サーバーを起動
2. 「File -> Build And Run」を押下
3. 「XCodeプロジェクト」の出力先を聞かれるので、作用フォルダ外の任意の場所を指定
4. アプリが起動すると、「ダイアログ」が表示されるので、「OK」を押下

5. 一度アプリを完全に落とす

ダイアログで許可を出す前に、接続処理が実行されてしまう為、
１回目の起動時は、接続が失敗します

執筆時点では、このダイアログを待つ方法が不明な為、２回起動で回避します！
本来はスタートボタンを設けるなどで、回避が良いと思います！！

6. 再度アプリを起動

起動したアプリの画面に、結果が表示されれば成功！！

あとがき

構築した環境のGitHub

ここまで読んでいただきありがとうございます！！！
次回は、引数をオブジェクトでやり取りする手順ついて書こうと思います！！