サーバから送られてくるurlでWebViewが白画面になり表示されない!
くそーhtmlどうなってんだー!
こんな時がありますね。はい。
で調べてみると大体「WebViewクラスの↓これを使ってやりましょう」と書いてあるわけです。
WebView#addJavascriptInterface(Object object, String name);
今回紹介するのは2つの方法
①addJavascriptInterfaceを使う方法
②Google Chrome のinspecterを使う方法 ← 超簡単
#addJavascriptInterfaceを使う
##addJavascriptInterfaceとは
addJavascriptInterface(Object object, String name)はjavascriptから
Android側にコールバックするためのinterfaceを追加できるメソッドです。
例えばMyClassのcallMe()メソッドをjavascript側から呼びたいときは 3 STEP
①MyClass実装
public class MyClass
{
public void callMe()
{
// call me な感じの処理
}
}
②Interfaceを追加
webView.addJavascriptInterface(new MyClass(),"MyClass");
③javascript側で実行
<script>
MyClass.callMe();
</script>
##JavascriptInterface
Android 4.2以降はaddJavascriptInterfaceに追加するメソッドに
「@ JavascriptInterface」のアノテーションを付与する必要が出てきました。
↓つまりこういうことです
public class MyClass
{
@JavascriptInterface
public void callMe()
{
// call me な感じの処理
}
}
JavascriptInterfaceアノテーション指定のメソッドを1つも持たないクラスを
追加しようとするとaddJavascriptInterfaceがビルドエラーになります。
##HTMLソース表示
ではこれらを踏まえてどうやってHTMLソースをアプリ画面に表示するか
例えば、WebView表示用の MyWebViewActivity というアクティビティの場合こんな感じ
public class MyWebViewActivity extends Activity {
private Handler handler = new Handler();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView web = (WebView) findViewById(R.id.webView);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setBuiltInZoomControls(true);
web.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) { // STEP3
view.loadUrl("javascript:window.MyWebViewActivity.viewSource(document.documentElement.outerHTML);");
}
});
web.addJavascriptInterface(this, "MyWebViewActivity"); // STEP1
web.loadUrl(url);
}
@JavascriptInterface // STEP2
public void viewSource(final String src) {
handler.post(new Runnable() {
@Override
public void run() {
TextView text = (TextView) findViewById(R.id.textView);
text.setText(src); // STEP4
}
});
}
}
###解説
①interface追加
web.addJavascriptInterface(this, "MyWebViewActivity"); // STEP1
まずはMyWebViewActivity自身をJavascriptInterfaceとして追加してます。
②アノテーション指定
@JavascriptInterface // STEP2
public void viewSource(final String src) {
handler.post(new Runnable() {
@Override
public void run() {
TextView text = (TextView) findViewById(R.id.textView);
text.setText(src);
}
});
}
javascript側から呼び出すメソッドにJavascriptInterfaceアノテーションを追加してます。
③Android側にHTMLソースを渡す
@Override
public void onPageFinished(WebView view, String url) { // STEP3
view.loadUrl("javascript:window.MyWebViewActivity.viewSource(document.documentElement.outerHTML);");
}
URLが読み込まれたタイミングで、javascriptのouterHTMLで取得したHTMLソースを
Android側のMyWebViewActivity#viewSourceに渡して実行しています。
④TextViewで描画
public void viewSource(final String src) {
handler.post(new Runnable() {
@Override
public void run() {
TextView text = (TextView) findViewById(R.id.textView);
text.setText(src); // STEP4
}
});
}
あとは渡ってきたString型のHTMLソースをTextViewでアプリ画面に表示しているだけです。
これでやっとWebViewのHTMLソースを可視化できました。
くそめんどくさいわ!!!
ということで次はやっと本題の超簡単HTMLソース確認方法
#Google ChromeのInspect機能を使う
ここまで順番に全部読んだ人は度肝を抜かれます。
##手順
① Google Chrome を起動
②「chrome://inspect」のURLにアクセス
③ 端末をUSBデバッグ
④ アプリでWebView表示
⑤④まで行くとこんな画面が出るので「inspect」をクリック
⑥あとはWeb開発のようにChromeの開発者オプションが見れる
これのいいところはHTMLだけじゃなくてjavascriptのエラーなんかも
コンソールで見れちゃう点ですね。
開発者オプション最高!