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);
関連記事
- ListViewにArrayAdapterを渡すサンプルコード(一覧項目から選択する場合のUI)
- assetsフォルダのファイルを扱う方法 AssetManager
- SDカードが接続されているかどうか知る方法 書き込み可能かどうか 読み込み可能かどうか
- SDカードの空き容量を調べる方法
- SDカードからサムネイル画像を取り出す getThumbnailメソッド
- 文字列の置き換えを行う方法 (replaceAllで気をつけること)
- 文字列の部分一致検索を行う方法
- 処理中を表すプログレスダイアログを表示する
- Java メモリー使用量を取得する方法
- SDカードに保存したファイルをギャラリーなどに反映させる方法
- 実行中のメソッド名やクラス名を取得する方法
- Singletonパターンを使ってクラスのインスタンスを1つにする(共有クラスのリソースを削減する方法)
- AndroidアプリでTextViewに使用できるフォントの一覧
- TextViewに独自フォントを使用する方法
- assetsフォルダには1MB以上の非圧縮ファイルを設置できない
- EditTextのソフトキーボードの『完了』を虫メガネアイコンなどに変更する方法
- Viewの表示・非表示を切り替える方法
- ファイルのテキストデータを読み込む
- テキストデータをファイルに書き込む BufferedWriterの使用例
- Webからダウンロードして保存する DefaultHttpClientの使用例
- ファイルをコピーする InputStream,OutputStreamの使用例
- 画像を拡大縮小する方法
- LinearLayout をスクロールさせる方法(ScrollViewの使用方法)
- アプリ起動時にスプラッシュ画面を表示させる方法
- WebViewの設定一覧
- 暗号化・複合化を行う ブロック暗号
- base64変換の一覧とその詳細サンプルコード
- 型変換の一覧(キャスト)
- 動画を再生する方法 MediaPlayer
- 動画を再生する方法 VideoView
- Androidでマルチスレッド処理をする方法
- 処理を一定時間停止させる方法
- SDやdata、downloadなど各種ディレクトリパスの取得方法
- ファイルの拡張子を取得する
- 実機内やエミュレータ内のファイルを操作する DDMS、adbとサンプルコード
スポンサーリンク