【Unity】【WebGL】モバイル端末でのWebGLでのInputFieldのあれこれまとめ

はじめに

• モバイルは正式対応してないWebGLですが、やらなきゃならないときが来たので、無理やり対応する所存です
• ちなみに、正式対応は次のUnity6バージョンからだそうです

WebGLでの日本語入力

日本語が表示されない問題

• Unityのデフォルトのフォントだと表示されないので、商用利用可能な日本語対応フォントを適用する必要があります

WebGLInputというプラグインを導入する

• モバイル端末であれば、デフォルトの状態でも日本語入力できますが、PC端末だと日本語入力ができません
• そこで、以下のプラグインを利用して対応します

• ですが、こちらのプラグインを利用してモバイル端末で日本語入力を行うと、挙動が怪しくなります
  • InputFieldタッチしても表示されない、など
• なので、「PCではWebGLInputを利用して、モバイル端末では導入せずデフォルトのまま」というように区別をさせます

PC端末とモバイル端末の識別

• Unityでモバイル端末かどうかを判定するには、Application.isMobilePlatformというプロパティがありますが、WebGLでは機能しません
  • 厳密に言うと、chromeなどのブラウザでは機能しますが、safariでは機能しません
• WebGLで識別するには、jslibというものでJavaScriptでモバイル判定して、その値をC#側に持ってくる必要があります

• 以下の記事のようなJavaScriptのコードを.jslibという拡張子のファイルに記載して、C#側に値を渡します
  • jslibに直接記述するのではなく、ビルド時に出力されるTemplateData内のhtmlとかに記載する方が、書き換えるたびにビルドしなくて済みます

JavaScript

PlatformChecker.js

checkMobilePlatform = function() {
        var ua = window.navigator.userAgent.toLowerCase();

        var mobilePattern = /android|iphone|ipad|ipod/i;
        return ua.search(mobilePattern) !== -1 || (ua.indexOf("macintosh") !== -1 && "ontouchend" in document);
}

html

index.html

    <!-- ... -->

    </script>
    <script src="TemplateData/js/PlatformChecker.js"></script>
  </body>
</html>

• 下の方に<script>タグで、jsの処理を追加します

jslib

• ↑のJavaScriptコードのメソッドを呼び出しています

mergeInto(LibraryManager.library, {
    CheckMobilePlatform: function () { 
        checkMobilePlatform();
    },
});

C#

• [DllImport("__Internal")]という属性を利用して、jslibに登録されたメソッドを取得します

    // .jslibからプラットフォーム識別
    [DllImport("__Internal")]
    static extern bool CheckMobilePlatform();

    // WebGLの日本語入力、モバイル端末入力セットアップ
    void InitializeWebGLInput()
    {
#if (UNITY_WEBGL && !UNITY_EDITOR)
        var isMobilePlatform = CheckMobilePlatform();
        
        // モバイル端末でなければ、WebGLInputを追加して、日本語入力対応
        if (!isMobilePlatform) {
            inputField.gameObject.AddComponent<WebGLSupport.WebGLInput>();
        }
#endif
    }

2in1PCの対応

• Surfaceやchromebookなどの、ディスプレイがタッチ入力できる端末の場合、キーボード入力とタッチ入力の2つの入力方法があります。
• これらの端末の場合、上記のようなモバイル判定は効かないので、タッチ入力可能かどうかをjslibで判定する必要があります。

checkTouched = function () {
	var touched = 'ontouchstart' in window ||navigator.maxTouchPoints > 0;
	console.log("touched: " + touched);
	return touched;
};

C#

    // WebGLの日本語入力、モバイル端末入力セットアップ
    void InitializeWebGLInput()
    {
    #if (UNITY_WEBGL && !UNITY_EDITOR)
        var isMobilePlatform = CheckMobilePlatform();
    
        // モバイル端末でなければ、WebGLInputを追加して、日本語入力対応
        if (!isMobilePlatform) {
            inputField.gameObject.AddComponent<WebGLSupport.WebGLInput>();
    
            // タッチ可能な端末の場合、WebGLInputMobileを追加
            if (CheckTouched()) {
                inputField.gameObject.AddComponent<WebGLSupport.WebGLInputMobile>();
            }
        }
    #endif
    }

参考記事↓

さいごに

• おそらく、Unity6になれば、こういう面倒なことはしなくて済むと思います