サイレンスブログ

Unity初心者の備忘録をかねた自分のやってきたもの

【Unity】WebViewを実装した話

ソーシャルゲームや様々なアプリで使われているWebView。

簡単に説明すると、ブラウザアプリを立ち上げずにアプリ内でWebを見ることが出来るものです。

今更ですが、WebViewを実装する過程で試行錯誤した時の話です。

導入後の具体的な使用例などが調べてもあまり見つからない、MacのUnityまたは実機でないと確認できないため、少し時間がかかりました....。

……………………………………………………………………………………………………

使用するのは、greeから提供されているプラグインです。

https://github.com/gree/unity-webview 

 

あと、コールバックを設定するには編集可能なローカルではないWebページも必要です。

ローカルのWebページでやるやり方 ?

unity-webview で自前のHTMLを表示するサンプル - Qiita

 

導入方法は他のサイトで詳しく載っているため割愛します。

Unity上でWebViewを開く unity-webview - テラシュールブログ

https://loumo.jp/wp/archive/20131115085810/

……………………………………………………………………………………………………

作業目標

ボタンをクリック  WebView起動  WebView削除

この動作を何度も行えるプロジェクトを作成してみます。

 導入が終わったら、まずボタンを作ります。(WebViewButton)

f:id:yuukiacid:20180209141845j:plain

 

WebViewButtonの子にWebViewOriginという空のオブジェクトを作ります。

( 子である必要はないですが分かりやすいかなと思い)

そのWebViewOriginに以下のスクリプトをアタッチします。

 

SampleWebviewObject.cs

using System;
using UnityEngine;
using UnityEngine.SceneManagement;

public class SampleWebviewObject : MonoBehaviour {


private WebViewObject webViewObject;
public const string url ="https://www.google.co.jp";

// Use this for initialization
void Start ()
{
  // WebViewObjectの生成
  this.webViewObject = new     GameObject("WebViewObject").AddComponent<WebViewObject>();

  //マージンを求める
  int mX = Screen.width / 9;
  int mY = Screen.height / 5;

  // キャッシュ回避用タイムスタンプ
  //string date = '?'+DateTime.Now.ToString();

 
  // コールバック設定
  this.webViewObject.Init((msg) =>
  {
    switch (msg)
    {
      case "シーン名":

        // WebViewの停止

        this.webViewObject.SetVisibility(false);
        Destroy(this.webViewObject);

        //シーンの遷移
           SceneManager.LoadScene(msg);
        break;

        case "close":
        // WebViewの停止
        this.webViewObject.SetVisibility(false);
        Destroy(this.webViewObject);

Destroy(GameObject.Find("WebViewObjectOrigin(Clone)").gameObject);
        break;
    }
  });

       // URLの設定
  this.webViewObject.LoadURL(url);

       // マージン(余白)の設定
  this.webViewObject.SetMargins(mX, mY, mX, mY);

  // WebViewを有効にする
  this.webViewObject.SetVisibility(true);
}

 

次は、親のWebViewButtonに以下のスクリプトをアタッチします。

 

WebViewButtonManager.cs

using UnityEngine;

public class WebViewButtonManager : MonoBehaviour{


 /// <summary>
 /// WebView起動ボタン押下時
 /// </summary>
 public void LegalButton_OnClick()
 {

#if UNITY_EDITOR_WIN
   // MacでないとUnity上でデバックできないため
   Application.OpenURL("https://www.google.co.jp/");

#else
   // オブジェクトを複製し、有効にする
   GameObject WVO = Instantiate(GameObject.Find("Canvas").transform.Find("WebViewButton/WebViewObjectOrigin").gameObject);
   WVO.SetActive(true);
#endif
 }

}

 

スクリプトを見て分かる通り、以下の流れで動きます。

  1. WebView起動ボタンを押す
  2. WebViewOriginが複製される
  3. WebViewOriginを有効にする
  4. WebViewOriginのStart()処理が始まる
  5. WebViewObjectが生成される
  6. コールバックを受け取り、処理分岐へ
  7. WebViewObjectを削除
  8. WebViewOrigin(Clone)の削除

 8まで終了すると、また1から繰り返すことが出来ます。

今回は繰り返して行えるようInstantiateを使っていますが、他にもっと効率的な方法があるかもしれません。

 ……………………………………………………………………………………………………

 

また、コールバック用の処理としてHTMLに

<a href="unity:コールバック用文字列">  シーン遷移します <a/>

こんな感じで書けばクリック時に送ることができます。

 

(例)

<a href="unity:close">閉じる</a>

webViewObject.Init((msg)の msg == "close"

 

キャッシュのクリーンについては、iosAndroidで対応が異なり、

まだ開発者が手をつけれていないみたいです(2018/2/9 時点)

github.com

でもcookieはクリアできるみたいです!

github.com

 

「キャッシュ」はコンピューターに一時的に記憶された使用頻度の高いデータのこと。

「クッキー」は端末に保存されたウェブブラウザー利用者の情報のこと。

 

ちなみに、SampleWebviewObject.cs内の

// キャッシュ回避用タイムスタンプ
//string date = '?'+DateTime.Now.ToString();を有効にし、this.webViewObject.LoadURL(url+date);として実行しても

キャッシュ回避が出来ていませんでした。

(iosはWebViewが真っ白になります。)

github.com

 

javascriptファイルのキャッシュはよくわからなかった(小声)

 

 今回は以上です!!