AndroidでWebViewを使うときに最低限必要な五つの設定

WebViewを使って簡単に外部に用意したWebページを表示できるけれど、細かいいくつかの点は最低限理解していないとつまづくので、本当に必要最低限（だと思われる）ものをメモ。

インターネットの使用を許可する

AndroidManifest.xmlにインターネットを使った通信を許可する記述を追加する。

この設定をしておかないとインターネットを介して、用意したWebViewに外部サイトの内容を表示することができない。

AndroidManifest.xml
aplication要素の前に

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

リンク先もWebViewで表示させる

リンクをクリックした際に表示する外部ページをデバイス搭載のブラウザではなくWebView内で表示させる。この設定がないと、デフォルトではデバイス搭載の標準ブラウザが起動して、それによる表示となるので。

WebViewを利用するActivityのjavaソースファイルに以下を記述。

sampleWebView.setWebViewClient(new WebViewClient());

JavaScriptを有効化

デフォルトではJavaScriptは無効なので、例えばjQueryなんかを使ったスライドショーのあるページはその部分が機能せず表示できなかったりする。有効化するために以下の記述を追加。

WebViewを利用するActivityのjavaソースファイルに以下を記述。

sampleWebView.getSettings().setJavaScriptEnabled(true);

画面右に生じる余白を消す

スクロールバーのための領域（WebViewの）としてこの部分が確保されているらしい。WebViewにおける領域なので、読み込む外部ページのhtmlやcssをいじってもこれは解消されない。

WebViewを利用するActivityのjavaソースファイルに以下を記述。

sampleWebView.setVerticalScrollbarOverlay(true);

戻るボタンをタップした際にアプリの終了ではなくひとつ前のページを表示させる

デフォルトではデバイスの戻るボタンをタップするとアプリが終了してしまう。（もしくは一つ前のActivityを表示）そうではなく、WebViewで表示したひとつ前のページを表示させる。

WebViewを利用するActivityのjavaソースファイルに以下を記述。

     @Override
     public boolean onKeyDown(int keyCode, KeyEvent event) {
          if(keyCode == KeyEvent.KEYCODE_BACK && sampleWebView.canGoBack()) {
               sampleWebView.goBack();
               return true;
          }
          return super.onKeyDown(keyCode, event);
     }

以上を踏まえたサンプルコードは以下。サンプルプロジェクトとして「ExWebView」として作成した場合の例。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="me.showjin.exwebview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".ExWebViewActivity"
            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>

</manifest>

main.xml

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

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

</LinearLayout>

ExWebViewActivity.java

package me.showjin.exwebview;

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

public class ExWebViewActivity extends Activity {
    private WebView sampleWebView;

	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        // sampleWebViewのインスタンスを生成
        // R.id.sampleWebViewの部分のsampleWebViewはmain.xmlと合わせないとダメ
        sampleWebView = (WebView)findViewById(R.id.sampleWebView);
        
        // リンクをクリックした際に標準ブラウザではなくWebView上で表示させる
        sampleWebView.setWebViewClient(new WebViewClient());
        
        // WebViewに読み込む外部URLをセット
        sampleWebView.loadUrl("http://web.showjin.me/");
        
        // デフォルトではJavaScriptは無効なのでこれを有効化
        sampleWebView.getSettings().setJavaScriptEnabled(true);
        
        // 画面右の余白を消す
        sampleWebView.setVerticalScrollbarOverlay(true);
    }
    
    // 戻るボタンをタップされた際にアプリ終了や一つ前のActivityに戻すのではなく
    // WebViewで表示した一つ前のページを表示させる
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
    	if(keyCode == KeyEvent.KEYCODE_BACK && sampleWebView.canGoBack()) {
    		sampleWebView.goBack();
    		return true;
    	}
    	return super.onKeyDown(keyCode, event);
    }
}

2012/06/21追記：
WebView上ではデフォルトで画面の拡大・縮小（ピンチイン・ピンチアウト）が出来ないので、それを可能にするには
『WebViewに読み込んだWebページを拡大・縮小（ピンチイン・アウト）可能にする』を参照のこと。