WebViewの作り方＆JavascriptInterface

WebViewを作る

まず、プロジェクトを作ってみましょう。
下のようにアップ名とカンパニーのdomainを入力したらそれの組み合わせでPackage名が決められます。

ターゲットのデバイスとこのアプリで使える最小のSDKを選びます。

Activityを選びます。Activityは該当アプリの使い方によって選んだら良いです。

最後にActivityとLayoutの名前をついてFinishをクリックするとアプリが生成できます。

初めての画面です。MainActivityはアプリが起動されるときのStartPointになるところです。

次はLayoutですが、下のactivity_main.xmlというものがMainActivityのLayoutになり、MainActivityはこのLayoutを通してデバイスの画面に表せます。

Fragmentを使うためにこのLayoutはFrameLayoutにします。

では、Fragmentファイルを作ります。該当のPackageに右クリック-> New -> Java Class にして新しいJava Classを生成します。

上のように生成されたらそのClassの中身にコードを入れてみましょう。

public class MainFragment extends Fragment {
 
    private static final String TAG = MainFragment.class.getSimpleName();
 
    private WebView mWebView;
 
    public MainFragment() {
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
 
        mWebView = (WebView) rootView.findViewById(R.id.fragment_main_webview);
        setUpWebViewDefaults(mWebView);
 
        mWebView.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
                return super.onCreateWindow(view, isDialog, isUserGesture, resultMsg);
            }
        });
 
        if(mWebView.getUrl() == null) {
            mWebView.loadUrl(“https://www.google.co.jp”);
        }
 
        return rootView;
    }
 
    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    private void setUpWebViewDefaults(WebView webView) {
        WebSettings settings = webView.getSettings();
 
        // Enable Javascript
        settings.setJavaScriptEnabled(true);
 
        // Use WideViewport and Zoom out if there is no viewport defined
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
 
        // Enable pinch to zoom without the zoom buttons
        settings.setBuiltInZoomControls(true);
 
        if(Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
            // Hide the zoom controls for HONEYCOMB+
            settings.setDisplayZoomControls(false);
        }
 
        // Enable remote debugging via chrome://inspect
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }
 
        // We set the WebViewClient to ensure links are consumed by the WebView rather
        // than passed to a browser if it can
        mWebView.setWebViewClient(new WebViewClient());
    }
}

このFragmentにWebViewを入れ込むのでLayoutを作ります。

下のようにWebViewのコードを入れてみます。

InternetのPermissionを取ります。

すると、

JavascriptInterface

WebViewを通してJSとNative間のConnectingができます。
上の設定を説明します。

getSettings().setJavaScriptEnabled(true);

これは文字そのとおりWebViewでJavascriptを使えるようになるものです。

addJavascriptInterface(new AndroidBridge(), “HybridApp”);

これはWebViewにJavascriptInterfaceを追加するもので、前の引数は実行するNative側のClassで、後ろの引数はJSから呼ぶときに使うキーです。

String userAgent = mWebView.getSettings().getUserAgentString();
            mWebView.getSettings().setUserAgentString(userAgent + “ inuckapp”);

次はUserAgentの設定です。UserAgentを設定したら特定なアプリだけで呼ばれ、他のアプリやMobileブラウザーで無駄に呼ばれるのを止められます。
続いてJSから呼ばれるClassをみてみると、

inuckapp()というメソッドを呼ぶことにします。ではinuckapp()の上にJavascriptInterfaceというAnotationを必ずつけなきゃいけないです。
Native側からもJSのメソッドを呼ぶことができます。それはloadUrl()を使って、javascript:[メソッド名]を引数として入れます。
次はサーバ側です。

navigator.userAgentを使ってどんなデバイスかを取得します。
Androidは「window.設定したキー.メソッド名」で簡単に呼べます。
さて、JS側のgoodMorning()を呼んでみます。

テストのため、ボタンを入れてみました。

ボタンをクリックすると、

JS側のメソッドが実行になり、Alertが出ました。
では、Native側からもデータを送ってみます。
メソッドの引数として渡すことができます。

すると、

Native側からJSにデータが送信されたのが確認できます。