ブラウザ制作でjavaとjavascriptの連携

web:Netbookにも広まるAndroidで、かつてないWeb体験を

を参考に勉強をさせていただきました。また、book;初めてのAndroid 第3版

で勉強をしております。

WebViewを使って通常のサイトを表示する事ができますが、jsのアラートの表示などは利用する事ができません。

また、独自のhtmlのページも表示をする事ができるのですが、htmlだけで完結できない場合には、html側からjavaを呼びだす事ができます。(表示はhtmlでバックグランドをjavaにするなどが可能です。)

まず、簡単なhtmlのファイルを用意します。

<html>
 <head>
 </head>
 <body>
 <p><a href="#" onclick="window.alert('javascript');">click1</a></p>
 <p><a href="#" onclick="window.android.AlertAndroid('call android')">click2</a></p>
 </body>
</html>

と言うファイルを作成してandroidのassetsフォルダの中にいれます。(srcなどど並列のところにディレクトリがあると思います。ない場合は作成してください。)

wView.loadUrl("file:///android_asset/index.html");

で表示ができます。このpath自体がandroidのassetsフォルダに通じていると考えればよいでしょう。

これで表示をさせると、エラーも出ませんが、アラートも出ません。

html

もともとalertはブラウザに実装されているアラートを表示しているものだったので、alertの代わりにToastを表示する仕様を作成してみましょう。

Toastについては、Toastを表示してみる。でおこなったように

Toast.makeText(this, "好きな文言", Toast.LENGTH_SHORT).show();

で表示ができます。

また、alertはWebChromeClientからonJsAlertと言う関数を利用して呼び出す事ができます。

wView.setWebChromeClient(new WebChromeClient(){
 @Override
 public boolean onJsAlert(final WebView view , final String url, final String message,JsResult result){
 Toast.makeText(WebJs.this, message, Toast.LENGTH_SHORT).show();
 result.confirm();
 return true;
 }
});

上記でalertで表示をするテキストをToastで表示をする事ができます。

html2

また、resultに関しては、アラート画面を閉じている事をブラウザに知らせる為にconfirm(OK),cancel(CANCEL)で閉じる必要があります。(閉じないと操作不可能です。)

また、同様にconfirm()も設定できます。ただし、この場合はconfirmとcancelで大きな違いが生じる場合があるので、ダイアログ等を開いて、OKとCANCELを取得する必要がありそうです。

sample

new AlertDialog.Builder(myApp)
.setTitle("confirm")
.setMessage(message)
 .setPositiveButton("OK",
 new DialogInterface.OnClickListener()
 {
 public void onClick(DialogInterface dialog, int which)
 {
 result.confirm();
 }
 })
 .setNegativeButton("CANCEL",
 new DialogInterface.OnClickListener()
 {
 public void onClick(DialogInterface dialog, int which)
 {
 result.cancel();
 }
 })
 .create()
 .show();

参考:http://stackoverflow.com/questions/2726377/how-to-handle-a-webview-dialog-popup

外部にonClickをおけると思いますが、今回は中に置いた方が明示的に分かりやすいかと思います。

その他のファンクションに関しては、大体を利用する事ができているかと思います。

 

では、次にjavascriptからjavaを呼び出す方法です。

webView.addJavascriptInterface(this, "android");

と記載をする事で、windowから呼び出す「android」をthisとみなして制御ができるようになります。

つまり

window.android.AlertAndroid('call android')

は、このクラス内のAlertAndroid(_str)クラスを呼び出す。という形で使用ができます。ただし、中身の引数に関してはfinalを用いる必要があります。

public void callAndroid(final String arg){
 Toast.makeText(this, arg, Toast.LENGTH_SHORT).show();
}

以上で、javascriptからjavaを呼び出す事ができました。

最後に、javaからjavascriptを呼び出すには、

webView.load("javascript:func('_str')");

とすると、html側で設定がしてあるファンクション(funcと言う名前のファンクション)を呼び出す事ができます。※ファンクション名は任意で大丈夫です。

以上です。

前後の記事

前の記事:

次の記事:

関連の記事

コメント

:D 名無し

大変勉強になりました。連携できると選択肢が広がりますね。

コメントの投稿

  • サイト内検索

新作アプリの紹介

関連サイトの紹介

アンドロイドアプリ開発TIPS
きぐるみカメラ
ふらいぱん
アンドロイドのデザイン集
Page top↑