🐻

UnityとMagicOnionのAndroid・iOS動作確認編(IL2CPP)

11 min read

はじめに

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

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

環境

前提条件

  • 下記の記事の環境構築が完了している、または、同等の環境が構築済みである事
    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を作成します

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 上記で設定しているサイズより少し小さめに設定
  1. 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)
  1. 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」を押下

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

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

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

  1. 再度アプリを起動

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

あとがき

構築した環境のGitHub

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