【Unity】UniWebView2を使って、簡単にUnityのプロジェクトでWebを表示する方法。え？こんな簡単に出すことができるの？

05 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.» 07

【Unity】UniWebView2を使って、簡単にUnityのプロジェクトでWebを表示する方法。え？こんな簡単に出すことができるの？

おこんにちは。
坂内っす。

お花見の時期ですね。
みなさん花見はしましたか？

ぶっちゃけ花見なんて、15年近くやってませんが。

さて今日はUnityでWebViewを開く方法です。
あ、これ探せばあっちこっちに同じような記事あると思うんですよ。
2番煎じでも、5番煎じでも知りません。
先週実際に触る機会あったので、記事にしちゃいます！

今回の環境はUnity5.6です。

パッと調べてみた感じだと、以下の2つの方法が導入簡単そうです。
●gree様の公開している「unity-webview」を使用
●Asset「UniWebView」を使用

今回は2番目の「UniWebView2」を使用してみました。
ちなみに2の方です。UniWebViewはUnity4系までのようで、5系の場合は2を使用しないといけないらしいです。
※ちなみにWebViewをUnity上で起動するにはMacのUnityでないといけないようです。
WindowsのUnityではエラーがでてWebViewが表示されないのであしからず。

今回やろうと思ってるのは、「uGUIのポップアップにWebViewを載せてみたい！」ってやつです。

こんな感じっす。
この水色の部分にHTML出して、閉じるボタンを押すとこのポップアップが消える的な感じ。

さて、まずはUniWebView2をインポートします。

まずは適当に、WebViewのついてるポップアップを開くボタンを用意。

ほんで、それっぽいポップアップを作成。

で、それっぽいポップアップに以下のコードを付けます。

【NewsManager】

using UnityEngine;

public class NewsManager : MonoBehaviour {
#if UNITY_IOS || UNITY_ANDROID || UNITY_WP8

    private UniWebView _webView;
    
    public int top = 450;
    public int right = 550;
    public int bottom = 450;
    public int left = 400;

    void Start() {
        transform.SetParent(GameObject.Find("Canvas").transform,false);

        _webView = gameObject.AddComponent();
        //_webView.Load(Constant.NEWS_URL);
        _webView.Load("http://google.com");

        _webView.insets = new UniWebViewEdgeInsets(top,left,bottom,right);
        _webView.OnLoadComplete += OnLoadComplete;
    }

    void OnLoadComplete(UniWebView webView,bool success,string errorMessage) {
        if (success) {
            webView.Show();
        } else {
            Debug.Log("Something wrong in webview loading: " + errorMessage);
        }
    }

    public void OnClickClose() {
        _webView.Hide();
        Destroy(gameObject);
    }
#endif
}

ポップアップの閉じるボタンには、OnClickCloseを付けておきます。

画面のサイズに合わせて、次のコードで表示する領域を指定しておきます。

_webView.insets = new UniWebViewEdgeInsets(top,left,bottom,right);

このポップアップをPrefabにして、先ほどのWebを開くボタンが押されると、ポップアップが開くようにします。

さぁ、これでどうなるかAndroidで実行してみませう。

ほら簡単！
Webページを出せました。
Webの位置がおかしかったら、topやrightなどの数値をいじって調整してね！

また、閉じるボタンを押すことでポップアップとWebViewを同時に消しています。

この方法で手軽にWebViewを導入できました。

以上、本日はUnityにおけるWebViewの表示の仕方でした！アディオスノシ

Category: 開発日記（Unity）

Posted on 2017/04/10 Mon. 15:01:31 [edit]

tb 0 : cm 0 ▲

« 【Unity】ゲームオブジェクトのアクティブ状態 | 【ハルシオンブログ】木曜もネタがありませんorz ポケガ2英語対応のiOS版頑張ってます… »

▲