2013年8月2日金曜日

unity-webview の表示ページを追加スクリプトでコントロールする

unity-webviewはUnity画面上にWeb表示エリアを作り出す無料プラグインです。
このunity-webviewには、javascriptで画面を制御する機能があります。






SampleWebView.csを見ると、こういう記述があります。
この場所の指示で、表示しているWeb画面に対して自由に制御することができます。
ただ、ここにそのまま直接記述すると、javascriptの制御文を文字列で
与えなければならないので、やっかいですよね。
そこで、この文字列を外部ファイル読み込みにします。




function Start(){

 var cb0 : WWW = new WWW("http://yourserver.com/cb0.js");
 yield cb0;
 var cb1 : WWW = new WWW("http://yourserver.com/cb1.js");
 yield cb1;

 var Url = 'https://twitter.com/';
 var webViewObject = new GameObject("WebViewObject").AddComponent(WebViewObject);

 webViewObject.Init(function(msg){
  Debug.Log(String.Format("CallFromJS[{0}]", msg));
 });

 webViewObject.LoadURL(Url);
 webViewObject.SetMargins(20,20,20,Screen.height/2);// このタイミングでサイズ指定
 webViewObject.SetVisibility(true);

 switch (Application.platform) {
 case RuntimePlatform.OSXEditor:
 case RuntimePlatform.OSXPlayer:
 case RuntimePlatform.IPhonePlayer:
  webViewObject.EvaluateJS(cb0.text);
  break;
 }
 webViewObject.EvaluateJS(cb1.text);
}

このように外部ファイルの読み込みという形にすることで、素直なjavascript記述が利用できます。
なお、SampleWebView.csにはなかったのですが、SetMarginsというメソッドで、
Unity内でのweb画面の表示範囲を指定することができます。
SetMarginsの指定はLoadURL以降じゃないと無効のようです。




window.addEventListener('load', function() {
 window.Unity = {
  call:function(msg) {
   var iframe = document.createElement('IFRAME');
   iframe.setAttribute('src', 'unity:' + msg);
   document.documentElement.appendChild(iframe);
   iframe.parentNode.removeChild(iframe);
   iframe = null;
  }
 }
}, false);

cb0.jsの内容はこんな感じで済みます。
cb1.jsも同様にできますが、ここで、ちょっと記述を変えてみました。




window.addEventListener('load', function(){
 var id = setInterval(function(){
  if (document.getElementsByClassName("blue").length){
   Unity.call('clicked');
   clearInterval(id);
   var p = document.getElementsByClassName("black")[0];
   p.parentNode.removeChild(p);
  }
 },300);
}, false);

このように、要素の準備が揃うのを待ち、blackクラスの要素を削除してみますと、






スクリプトの処理によって、黒い「ログインボタン」を削除することができました。


EvaluateJSメソッドを使いこなして、Web表示機能の夢が広がりますね。

0 件のコメント:

コメントを投稿