WebViewを使ってWebサイトを表示する方法 WebKitからアプリ、アプリからWebKitへの連携処理

Androidでは端末内のWebkitブラウザを使用して、簡単にアプリ内にブラウザ表示をさせることができます。

WebViewを使用する基本
ブラウザ(WebKit)からアプリへ処理を渡す方法
アプリからブラウザ(WebKit)へ処理を渡す方法
ローカルのHTMLファイルを表示させる方法
[参考記事] WebViewの設定一覧

WebViewを使用する基本

アプリ内でブラウザを表示させるにはlayoutにWebViewを使用します。
またアプリから外部にアクセスするため、AndroidManifest.xmlにINTERNET権限の設定を追記します。
これは忘れやすいので注意します。

[参考記事] AndroidManifest.xml の permission一覧

AndroidManifest.xml 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.test"
    android:versionCode="1"
    android:versionName="1.0">
  <uses-sdk android:minSdkVersion="4" />

  <application android:icon="@drawable/icon" android:label="@string/app_name">
    <activity android:name=".TestApp"
      android:label="@string/app_name">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

  </application>
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>

レイアウトにはWebViewのパーツを配置するのみです。

/res/layout/main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  >
  <WebView
    android:layout_height="200px"
    android:layout_width="fill_parent"
    android:id="@+id/webview"
  />
</LinearLayout>

配置したWebViewをActivityに渡してURLを指定するだけで、アプリ内にブラウザは立ち上がります。 

WebView webView = (WebView)findViewById(R.id.webview);
webView.loadUrl("http://pentan.info/");

しかしこれだとリンクなどで遷移したときにアプリのブラウザではなく、端末のブラウザが起動して、そちらに移動します。
つまりアプリから離れてしまいます。

そこでリンクしてもアプリ内で遷移する(アプリ内に閉じ込めておく)には、setWebViewClientを使用します。 

WebView webView = (WebView)findViewById(R.id.webview);
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("http://pentan.info/");

Activityをまとめると次のようになります。 

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class TestApp extends Activity {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    WebView webView = (WebView)findViewById(R.id.webview);
    webView.setWebViewClient(new WebViewClient());
    webView.loadUrl("http://pentan.info/");
  }
}

ブラウザ(WebKit)からアプリへ処理を渡す方法

これだけだとアプリ内でブラウザが立ち上がるだけで、アプリとの連携はできません。
アプリと連携させるにはJavaScriptを使用します。

webkitでJavaScriptが使えるようにするには、まず次のようにします。 

webView.getSettings().setJavaScriptEnabled(true);

JavaScriptのオブジェクトを指定するにはaddJavascriptInterfaceでオブジェクトを作ります。
第一引数のクラスは、実際にする処理
第二引数は、javascriptから呼び出すときの名前

webView.addJavascriptInterface(new Object() {
  public void pushLink() {
    handler.post(new Runnable() {
      @Override
      public void run() {
        textView.setText("Bye");
      }
    });
  }
}, "app");

[参考記事] HandlerやRunnableについて

HTMLは次のようにします。 

<html>
<head>
<title>test1</title>
</head>
<body>
<p>
<a href="javascript:void(0)" onclick="window.app.pushLink();">test</a>
</p>
</body>
</html>

アプリ側に表示させるTextViewを追記します。 

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:id="@+id/text1"
    />

これでWebViewのリンクをクリックすると、アプリ側のTextViewのテキストが変化します。

まとめると次のようになります。 

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;

public class TestApp extends Activity {
  TextView textView = null;
  Handler handler= new Handler();
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    WebView webView = (WebView)findViewById(R.id.webview);
    textView = (TextView)findViewById(R.id.text1);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.addJavascriptInterface(new Object() {
      public void pushLink() {
        handler.post(new Runnable() {
          @Override
          public void run() {
            textView.setText("Bye");
          }
        });
      }
    }, "app");

    webView.loadUrl("http://pentan.info/");
  }
}

addJavascriptInterfaceの第一引数は複雑になると、コードが読みづらくなるので別にまとめる例も記載しておきます。 

package com.example.test;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;

public class TestApp extends Activity {
  TextView textView = null;
  Handler handler= new Handler();
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    WebView webView = (WebView)findViewById(R.id.webview);
    textView = (TextView)findViewById(R.id.text1);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.addJavascriptInterface(new JsObj(), "app");
    	
    webView.loadUrl("http://pentan.info/");
  }

  class JsObj {
    public void pushLink() {
      handler.post(new Runnable() {
        @Override
        public void run() {
          textView.setText("Bye");
        }
      });
    }
  }
}

アプリからブラウザ(WebKit)へ処理を渡す方法

またWebKitからアプリに来た処理を、さらにアプリからWebKitに戻すこともできます。 

package com.example.test;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class TestApp extends Activity {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    WebView webView = (WebView)findViewById(R.id.webview);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.addJavascriptInterface(new JsObj(this), "app");

    webView.loadUrl("http://pentan.info/");
  }

  class JsObj {
    private Context con;

    public JsObj(Context con) {
      this.con = con;
    }

    public int calc(int i, int j) {
      return i + j * 10;
    }
  }
}

HTMLは次のようになります。 

<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
  document.write(app.calc(12, 66));
</script>
</body>
</html>

これでブラウザ画面にはアプリ内で計算された結果が表示されます。

ローカルのHTMLファイルを表示させる方法

ローカルのファイルをwebViewに表示させるにはhttp://の代わりにfile://にします。 

String padh = "/data/index.html";
webView.loadUrl("file://" + padh);

関連記事

スポンサーリンク

Windowsでシンボリックリンクを使う方法

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る