[Java] WebViewコントロールを用いてアプリケーション内でWebページを表示する - シンプルなWebViewを利用したアプリ - Android

WebViewを用いて、Androidアプリ内でWebページを表示するプログラムを作成します。

プロジェクトの設定

Androidアプリケーションプロジェクトを新規作成します。
[New Android Application]ダイアログボックスが表示されますので、以下を設定します。

• Application Name: "SimpleWebview"
• Project Name: "SimpleWebview"
• Package Name: "com.iPentec.simplewebview"
• Minimum Required SDK: "API 8: Android 2.2 (Froyo)"
• Target SDK: "API 17: Android 4.2 (Jelly Bean)"
• Compile With: "API 17: Android 4.2 (Jelly Bean)"
• Theme: "Holo Light with Dark Action Bar"

UIのデザイン

UIをデザインします。MainActivityのレイアウトXMLファイルを開きデザイナを表示します。左側のツールパレットの[Composite]カテゴリにWebViewウィジェットがあります。WebViewウィジェットをドラッグ＆ドロップしてフォームに設置します。


WebViewがフォームに設置できました。

AndroidManifest.xmlの編集

今回のアプリはWebViewを用いてWebページを開くアプリケーションです。Androidアプリはデフォルトの状態ではインターネットへのアクセスが禁止されているため、インターネットへの接続許可を有効にする必要があります。

"Package Explorer"にてプロジェクトのノード内の"AndroidManifest.xml"ファイルをダブルクリックして開きます。


下図のAndroidManifestエディタが表示されます。


エディタ画面の下部のタブから[Permissions]タブをクリックします。下図の画面が表示されます。画面内の[Add...]ボタンを押します。


追加する要素を選択するダイアログボックスが表示されます。一覧から[Uses Permission]を選択します。選択後[OK]ボタンを押します。


左側の[Permissions]エリアに"Uses Permission"が追加されました。右側の[Attributes for Uses Permission]エリアの[Name]欄のコンボボックスを開きます。


ドロップダウンリストが表示されますので、一覧の中から"android.permission.INTERNET"を選択します。



Name欄のコンボボックスで"android.permission.INTERNET"を選択後、ツールバーの保存アイコン、または[File]メニューの[Save]メニューを選択し、AndroidManifest.xmlファイルを保存します。
AndroidManifest.xmlが保存されると左側の[Permissions]エリアの内容が更新され"Uses Permission"から"android.permission.INTERNET"に更新されます。

コード

下記のコードを記述します。

package com.iPentec.simplewebview;

import com.iPentec.simplewebview.R;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;  //追加

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //以下2行を追加
    WebView webView1 = (WebView)findViewById(R.id.webView1);
    webView1.loadUrl("http://www.google.co.jp");
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }
}

解説

protected void onCreate(Bundle savedInstanceState) {

onCreateはアクティブティが初期化された際に呼び出されるメソッドです。onCreate内にコードを記述するとアプリケーションの開始時にコードが実行されます。

WebView webView1 = (WebView)findViewById(R.id.webView1);

にてリソースIDからWebViewのコントロールのインスタンスを取得します。

webView1.loadUrl("http://www.google.co.jp");

WebViewオブジェクトのloadUrlメソッドを呼び出してWebViewにWebページを読み込みます。第一引数に読み込むWebページのURLを与えます。今回の例では"http://www.google.co.jp"を与えているためWebViewでGoogleのトップページを表示します。

実行結果

アプリケーションを実行するとWebView内にGoogleのWebページが表示されました。検索ボックスも動作します。リンクのクリックや画面遷移では通常のWebブラウザが起動しリンク先のページや検索結果はWebブラウザで表示されます。


他のサイトでも同様です。ページ内のリンクをクリックすると外部のWebブラウザが起動しWebブラウザ側で遷移先のページが表示されます。

以前の版

Androidアプリケーションプロジェクトを新規作成します。

プロジェクトの設定

• Project name: SimpleWebView
• Build Target: Android 2.3.3
• Application name: SimpleWebView
• Package name: iPentec.SimpleApp.SimpleWebView
• Activity: SimpleWebViewActivity

UI

Eclipseのパッケージエクスプローラからプロジェクトの"/res/layout/main.xml"ファイルを開きます。下図のデザイナウィンドウが開きます。左側のコントロールパレットから[Composite]セクションを選択し、一番下にある[WebView]をクリックして選択します。


[WebView]コントロールをフォームにドラッグ＆ドロップします、WebViewコントロールがフォームに配置され下図のようになります。

パーミッションの設定

WebViewでインターネット上のWebページを開く場合アプリケーションからインターネットにアクセスするためのパーミッションを設定する必要があります。パッケージエクスプローラで"androidManifest.xml"ファイルを開きます。マニフェスト編集画面が表示されます。編集画面の下部のタブから[Permissions]タブをクリックして選択します。下図のパーミッション編集画面が開きますので、中央上部にある[Add...]ボタンをクリックします。

ダイアログボックスが開きますので追加する要素[Uses Permission]を選択します。


"Uses Permission"が追加されますので、右側のNameの欄のコンボボックスをクリックし一覧から[android.permission.INTERNET]を選択します。


設定を終えた状態が下図になります。

コード

以下のコードを記述します。

SimpleWebViewActivity.java

package iPentec.SimpleApp.SimpleWebView;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.widget.*;

public class SimpleWebViewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        WebView webView1 = (WebView)findViewById(R.id.webView1);
        webView1.loadUrl("http://www.ipentec.com/document/");      
    }
}

解説

WebView webView1 = (WebView)findViewById(R.id.webView1);
webView1.loadUrl("http://www.ipentec.com/document/");      

が追加部分になります。最初の行はレイアウトファイルからWebViewコントロールのインスタンスを取得するコードです。2行目のloadUrlでWebViewコントロールに第一引数で指定したURLのページを読み込ませ表示します。

実行結果

アプリケーションを保存し実行します。
アプリケーションが起動し、WebViewに指定されたURLのページが表示できました。