jQuery mobile のcheckboxでcheckedが固定しちゃうバグらしきもの

jQuery mobile で、　<input type='checkbox' id='check'> なタグに

jQuery('#check').click(function(){
 alert(jQuery('#check').attr('checked'));
});

とすると、そのチェックボックスをクリックするたびに
「checked」「undefined」が交互に返ってきます。

ですが、jQuery mobile のAPIリファレンスにあるように、
スクリプトで初期状態でチェックを入れちゃうと…

jQuery('#check').attr('checked',true).checkboxradio('refresh');
jQuery('#check').click(function(){
 alert(jQuery('#check').attr('checked'));
});

このような記述をすると、クリックしても毎回「checked」が
返ってくるようになってしまいます。
見た目のオンオフはちゃんと切り替わってるのですけどね。

なお、jQuery 1.9.1 , jQuery mobile 1.3.2 です。
なんだかバグくさい挙動なんですが、これ仕様なんですかね？

jQuery('#check').attr('checked',true).checkboxradio('refresh');
jQuery('#check').click(function(){
 alert(jQuery('#check').next().find(":eq(0) :eq(1)").hasClass("ui-icon-checkbox-on"));
});

しょうがないので、このように、jQuery mobile が構成しているアイコンがON用かどうかで
判断するようにしたら、しっかり「true」「false」が返ってくるようになりました。
バッドノウハウな感じで嫌ですね。
公式APIリファレンスさん、正しいチェック状態の取得方法を書いててくださいよ～。

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表示機能の夢が広がりますね。