ウェブ、ショウジン

AndroidでWebViewを使う時に必要な5つの設定

2012-6-5
Category
スマートフォン・アプリ

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);

戻るボタンで1つ前のページを表示

デフォルトではデバイスの戻るボタンをタップするとアプリが終了してしまう。(もしくは一つ前の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ページを拡大・縮小(ピンチイン・アウト)可能にする』を参照のこと。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿