Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

[Android] WebView:WebViewでWebページを表示する

android-android-webapp_00

Webページを表示させるためにはWebViewクラスか<WebView>タグを使います。ここではWebページを表示する方法について説明します。

 

広 告

 

目次

前提条件

動作確認端末

  • Google Nexus 5 – 5.0.0 – API21(エミュレータ)

1. WebViewの概要

Webページを表示させるためにはWebViewクラスか<WebView>タグを使います。WebViewクラスはViewクラスを継承したクラスです。WebViewにはChrome、Firefox、Operaなどのブラウザアプリが持つ、アドレスバー、ナビゲーションコントローラーなどの機能はなく、単純にWebページを表示させる機能のみを提供します。

 

アプリでWebViewを利用する用途は、利用規約、リリースノート、利用説明書、などのケースが考えられます。

 

 

 

 

2. WebViewをアプリに追加する

まずレイアウトXMLに下記のように<WebView>タグを追加します。今回は画面全体にWebページを表示させます。

 

res/layout/activity_main.xml

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

JavaコードでWebページを表示させるためにはWebViewクラスを使用します。読み込むURLを設定するためには、loadUrl()メソッドを使用します。loadUrl()メソッドには表示させたいWebページのURLをString型で渡します。

 

java/<packagename>/MainActivity.java

public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.loadUrl("http://www.programing-style.com");
    }
    …
}

この状態でアプリを実行すると以下のようにエラーとなります。

 

android-android-webapp_01

これはアプリがインターネット通信することが許可されていないためです。この次の章ででは、アプリに対してインターネット通信の実行許可(権限)を与える方法について説明します。

 

3. アプリでインターネット通信を利用できるようにする

アプリにインターネット通信の実行許可を与えるためには、AndroidManifest.xmlを編集する必要があります。AndroidManifest.xmlに以下のように1行追加します。

 

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest 
    …>
    …
    <uses-permission android:name="android.permission.INTERNET" />
    …
</manifest>

以上で完了です。

 

 

 

4. アプリを実行してWebページが表示されることを確認する

アプリを実行すると以下のようにloadUrl()メソッドに渡したURLのWebページが表示されます。

 

android-android-webapp_02

WebViewでWebページを表示する手順は以上です。

 

 

 

5. 参考

 

Building Web Apps in WebView | Android Developers

http://developer.android.com/intl/ja/guide/webapps/webview.html#AddingWebView

広 告