03 «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.» 05

ハルシオンシステムの気ままBlog

株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

 

【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)

tb 0 : cm 0