AndroidのWebViewでnendの広告からうまく遷移できない

意外とnendを使った記事が少なかったので書こうと思います。
多分Titaniumあるあるなのではないでしょうか。

nend(ネンド)は、日本最大級のiPhone・Android対応のスマートフォン向け運用型アドネットワークです

普通ならネイティブで開発するため、
ios,Androidそれぞれの拡張webviewがnendから用意されているため、
起こらない問題かもしれません。

nend広告をクリックGoogle Play Storeが開かれない問題

AndroidのWebViewでWEBサイトのアプリ広告をクリックするとこうなります。

結構びっくりします。AndroidのChromeで表示すると普通にGoogle Play Storeが開かれるのにアプリのWebViewだとなぜ。。

nendの資料を探してみる

nendメディアパートナー向け資料

http://nend.net/dl/mediapartner/

一番下にWebView実装ガイドがあります。
そしてAndroid側に以下のような説明があります。

広告バナータップ時に新規ウィンドウで開くためにWebViewClientのメソッドをOverrideしたインスタンスを指定
注意: 下記は一例です。別途クラスを作成しても構いませんが、必ずリンク先をブラウザで開くための処理を記述してください。
対処しない場合、広告バナーと同じWebView内でリンク先のページが開く場合があります。

またエラーの現象を見ていると、
まず広告タグにはplay storeのURLが書いてません。そのため一度nendのサーバと通信してからURLを取得している。
そこが問題なのかな〜と思い。aタグがクリックされた時に、Titnaium側で処理するようにしようかと思いました。

対策

１．WEBViewに表示されているWEBサイトの広告がクリックされる

２．普通ならnendのJavaScriptライブラリが実行され、新しいWindowが開かれるが、TitaniumのWevViewのbeforeloadイベントで検知できるように画面遷移にする

どうやるかというと、広告のaタグがクリックされた時のイベントを仕込んでおく。
以下はWebサイトのコードです。

window.addEventListener('load', function() {
  console.log("pageload");
    var userAgent = window.navigator.userAgent.toLowerCase();
    if(userAgent.indexOf('Mac OS X') == -1){
      $(".nend a").bind("click",function(d){
        location.href = encodeURI(d.currentTarget.href);
        return false;
      });
    }
});

３．Titanium側で広告クリックされ画面遷移が起きたことを検知し、ブラウザ(Chrome)に処理を丸投げする。そして元のWebViewでは画面を戻しておく

以下はTitaniumのコードです。

// WebView内での戻るボタンを有効にします
if(OS_ANDROID){
  $.webview.addEventListener('beforeload',function(e){
     Ti.API.debug("読み込み開始: "+e.url);
     if(e.url.indexOf("market://") != -1){
        $.webview.url = Alloy.Globals.url;
        Ti.Platform.openURL(e.url);
     }
  });
}

動作

問題

連続で広告をクリックすると落ちる。。
もう少しやり方を考える必要があると思う。

まとめ

WebサイトをWebViewでラップして広告を表示するという事はよくあることだと思うので、Titaniumでできないととても困る。
ただTitainumだけだとこれくらいの対応しか思いつかなかったので、ネイティブを触る方法も考えないとなと感じました。

今回のソースはこちらに保存しています。
https://github.com/ganezasan/nend-webview