忍者ブログ

アンドロイドのあれこれ

AndroidアプリとWebアプリの連携
WebViewを使ってアプリ内ウェブサイトを埋め込み、サイト(HTML,JavaScriptなど)とネイティブアプリ(Java)との連携する方法を紹介します。
ここではJavaScriptでの連携とサイトURL取得での連携の2つ例を書きます。

- JavaとJavaScriptの連携
WebViewのaddJavascriptInterfaceを使ってJavaScriptから使用できるオブジェクトを生成することができます。
<!-- サンプルサイト webview.html -->
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta http-equiv="Content-Style-Type" content="text/css" /> 
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
<body>
<br />
<br />
<br />
<div>
    <button onclick="android.getToast()">Show!</button>
</div>
</html>


// MainActivity.java
public class MainActivity extends Activity {
    
    private WebView webview;
    private final static String SHOW_URL = "http://www.sample.com/webview.html";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webview = (WebView)findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.setVerticalScrollbarOverlay(true);
        webview.loadUrl(SHOW_URL);
        webview.addJavascriptInterface(new JsObject(this), "android");
        
    }
    
    public class JsObject {
        private Context mContext;
        public JsObject(Context context) {
            this.mContext = context;
        }
        
        public void getToast() {
            Toast.makeText(mContext, 
                    "Show from JAVA", Toast.LENGTH_LONG).show();
        }
    }
}

- サイトのページ遷移URLを取得して連携する
この場合はWebViewClientのonPageStarted、onPageFinishedなどを使います。
動作の流れはウェブサイトが(例えば、リンクを押されたときに)次のページ切り替えるときにURLをアプリ側でチェックして処理を加えます。
以下のサンプルはGoogleのトップページから検索するとページを止めてURLクエリーを取得してダイアログを表示させます。
// MainActivity.java
public class MainActivity extends Activity {
    
    private WebView webview;
    private final static String SHOW_URL = "http://www.google.co.jp/";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webview = (WebView)findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.setVerticalScrollbarOverlay(true);
        webview.loadUrl(SHOW_URL);
        webview.setWebViewClient(webClient);
        
    }
    
    private WebViewClient webClient = new WebViewClient(){
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            if (url.equals(SHOW_URL)) {
            
            } else {
                String queryStr = url.substring(
                        SHOW_URL.length(), url.length());
                webview.stopLoading();
                showDialog(Uri.decode(queryStr));
            }
        }
        
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }
    };
    
    private void showDialog(String msg) {
        new AlertDialog.Builder(this)
        .setIcon(android.R.drawable.ic_dialog_alert)
        .setTitle("クエリー")
        .setMessage(msg)
        .setPositiveButton("OK",
            new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which){
                }
            })
        .setCancelable(true)
        .create().show();
    }
}

以上!

COMMENT
NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 
PR
© Android Advent
powered by 忍者ツールズ / 忍者ブログ / [PR]