連載
» 2012年03月22日 10時50分 UPDATE

Android Tips(11):WebViewの基本的な使用方法

Androidアプリ開発者のためのTips集。Androidの画面部品に「WebView」というものがある。これを使うとアプリケーションにWebブラウザの機能を付加できる。

[秋本耕平(イーフロー),@IT MONOist]
Android Tips

Tips概要と動作検証環境

用途 便利
カテゴリ WebView
レベル 初級〜中級
動作確認環境 Android 2.3.3(GingerBread) エミュレータにて動作確認
備考 今回のTipsは上記環境で動作確認・検証を行っています


Tips 11:WebViewの基本的な使用方法

 Androidの画面部品に「WebView」というものがある。これを使うことによって、アプリケーションに簡単にWebブラウザの機能を付加することができる。今回は、WebViewの基本的な使用方法について解説する。

画面へのWebViewの配置

 WebViewは、Buttonなどの他の画面部品と同様に、アプリケーションの画面に配置できる。例えば、レイアウトXMLで<WebView>タグによって配置することが可能だ。

WebViewを画面に配置するレイアウト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/webView_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
 
    </LinearLayout>


WebViewに任意のWebページを表示する

 WebViewのloadUrl()メソッドを使用すると、WebViewに任意のWebページを表示することができる。

 手順としては、まず、インターネットアクセスが発生するので、AndroidManifest.xmlに、以下のパーミッションを追加しておく必要がある。

インターネットアクセスのパーミッション:

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


 後は、WebViewのloadUrl()メソッドに任意のURLを渡すだけだ。以下に、サンプルを示す。

例:WebViewにWebページを表示するサンプル

    public void gotoWebPage( WebView webView ){
        // ページ移動などの処理を自分で行うための設定
        mWebView.setWebViewClient( new WebViewClient() );
 
        // @IT MONOistのページを表示
        mWebView.loadUrl( "http://monoist.atmarkit.co.jp/" );
    }


 loadUrl()の前段階で実行しているsetWebViewClient()の部分では、ページ移動などを処理するためのクライアントを設定している。これを行わないと、Webページ上のリンクをタップした際に標準のWebブラウザが起動してしまう。

WebViewにWebページを表示する 画像1 実行結果:WebViewにWebページを表示する

基本的なブラウザの操作

 WebViewには基本的なWebブラウザの機能がそろっており、ページの履歴移動や表示の拡大・縮小ができる。以下に、それぞれのメソッドを紹介する(表1)。

メソッド名 機能
public void goBack() ページ履歴で1つ前のページに移動する
public void goForward() ページ履歴で1つ後のページに移動する
public boolean zoomIn() 表示倍率を上げる
public boolean zoomOut() 表示倍率を下げる
表1 WebViewが備えるWebブラウザの機能に関するメソッド

APKファイル内のHTMLファイルを表示する

 アプリケーションのバイナリにHTMLファイルを含めておき、その内容をWebViewで表示することが可能だ。アプリケーションを開発する際、「assets」ディレクトリにHTMLファイルと必要な画像ファイルなどを格納しておけば、WebViewで表示することができる。

 今回は、以下のHTMLファイル(assets.html、page2.html)および画像ファイル(banzai.png、droid.png、star.png、sun.png)をassetsディレクトリに配置した(参考:これらを圧縮したものはコチラ)。

<html>
    <head>
    <title>Assets上のHTMLファイル</title>
    </head>
    <body>
        <b><font size="20">Assets上のHTML</font></b><br>
        こんにちは、Android Tips<img src="banzai.png">です。<br>
        今後ともよろしくお願いいたします。<img src="sun.png"><img src="droid.png"><img src="sun.png"><br>
        <a href="page2.html">リンク</a>のテスト<br>
    </body>
</html>
assets.html

<html>
    <head>
    <title>Assets上のHTMLファイル</title>
    </head>
    <body>
        <b><font size="20">Assets上のHTML 2</font></b><br>
        リンク成功<img src="star.png"><img src="banzai.png"><img src="star.png"><br>
    </body>
</html>
page2.html

banzaidroid PNG形式の画像。左:banzai/右:droid

starsun. PNG形式の画像。左:star/右:sun

 assets.htmlをWebViewに表示するには、以下のようにすればよい。

例:assetsディレクトリのHTMLを表示するサンプル

    void loadFromAssets( WebView webView ){
        webView.loadUrl( "file:///android_asset/assets.html" );
    }


 実行結果は以下の通りだ。画像も表示されているのが分かる。

assetsディレクトリのHTMLと画像を表示 画像2 実行結果(1):assetsディレクトリのHTMLと画像を表示

 以下はリンクをタップした際の様子だ。

リンクをタップした際の動作 画像3 実行結果(2):リンクをタップした際の動作

SDカード上のHTMLファイルの表示

 また、SDカード上のHTMLファイルをWebViewに表示したい場合は、以下のようにすればよい。

例:SDカード上のHTMLを表示するサンプル

    void loadFromSDCard( WebView webView ){
        webView.loadUrl( "file:///sdcard/sdcard.html" );
    }


SDカード上のHTMLを表示 画像4 実行結果:SDカード上のHTMLを表示

ソース上のHTML文字列を表示

 ソース上で作成したHTML文字列を直接WebViewで表示することもできる。その場合、使用するのはloadUrl()メソッドではなく、loadData()メソッドとなる。

例:HTML文字列を表示するサンプル

    void loadFromString( WebView webView ){
        String html = "<html><head><meta http-equiv='content-type' content='text/html;charset=UTF-8'>"
                + "<title>StringのHTML</title></head><body>"
                + "<b><font size='20'>StringのHTML</font></b><br>"
                + "こんにちは、Android Tips<img src='banzai.png'>です。<br>"
                + "今後ともよろしくお願いいたします。<img src='sun.png'><img src='droid.png'><img src='sun.png'><br>"
                + "<a href='page2.html'>リンク</a>のテスト<br>"
                + "</body></html>";
        webView.loadData( html, "text/html", "utf-8" );
    }


 この方法を使用する場合、HTMLヘッダに“文字コード”の指定を記述する必要がある(指定しないと文字化けしてしまう)。実行結果は以下のようになる。

HTML文字列を表示するサンプル 画像5 実行結果(1):HTML文字列を表示するサンプル

 上記の通り、<img>タグで指定した画像は見つからないため、全く表示されない。また、リンク部分をタップすると「ページが見つかりませんでした」となってしまう。

ページが見つかりませんでした 画像6 実行結果(2):ページが見つかりませんでした

 画像やリンク先を表示するためには、それらのファイルを“探す場所”を指定する必要がある。例えば、assetsディレクトリ上の画像ファイルを使う場合には、以下のようにする。

例:assetsディレクトリ上の画像を使用するサンプル

    void loadFromStringWithAssetsImage( WebView webView ){
        String html = "<html><head><meta http-equiv='content-type' content='text/html;charset=UTF-8'>"
                + "<title>StringのHTML</title></head><body>"
                + "<b><font size='20'>StringのHTML</font></b><br>"
                + "こんにちは、Android Tips<img src='banzai.png'>です。<br>"
                + "今後ともよろしくお願いいたします。<img src='sun.png'><img src='droid.png'><img src='sun.png'><br>"
                + "<a href='page2.html'>リンク</a>のテスト<br>"
                + "</body></html>";
 
        // 画像ファイルなどの配置場所を指定してHTML文字列をWebViewで表示
        webView.loadDataWithBaseURL( "file:///android_asset/", html, "text/html", "utf-8", null );
    }


 実行結果は以下の通りだ。

assetsディレクトリ上の画像を使用するサンプル 画像7 実行結果(1):assetsディレクトリ上の画像を使用するサンプル

 この状態でリンクをタップするとassetsディレクトリ上に配置したpage2.htmlが表示される。

assetsディレクトリ上に配置したpage2.htmlが表示される 画像8 実行結果(2):assetsディレクトリ上に配置したpage2.htmlが表示される

Android コーナー

Androidコーナー
「Android(アンドロイド)」の組み込み機器への適用からアプリ開発、レポート、ニュースなどさまざまな技術情報・最新動向をお届けする!!

>>コーナーTOPはこちらから


Copyright© 2017 ITmedia, Inc. All Rights Reserved.