iPentec.com  /  Doc  /  Android  /  Java  /  WebView

目次

WebViewでアプリ内のHTMLファイルを読み込む - ローカルHTMLの読み込み - Android

WebViewでアプリ内のHTMLファイルを読み込む手順とコードを紹介します。

プロジェクトの作成

Android アプリケーションプロジェクトを作成します。
[New Android Application]ダイアログボックスが表示されますので、以下を設定します。
  • Application Name: "WebViewLocalFile"
  • Project Name: "WebViewLocalFile"
  • Package Name: "com.iPentec.webviewlocalfile"
  • 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の作成

MainActivityのレイアウトファイルを開き下図のUIを作成します。フォームにWebViewを一つ配置します。


WebViewの高さは"Properties"ウィンドウの"Height"の値に"100dp"と直接数値を入力することで高さを短くできます。

ローカルHTMLファイルの作成とプロジェクトへの追加

ローカルHTMLファイルの作成

ローカルHTMLファイルを作成します。下記のコードを記述します。

menu.html

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <a href="app://news">ニュース</a>&nbsp;
 <a href="app://weather">天気</a>&nbsp;
 <a href="app://shopping">ショッピング</a>;
</body>
</html>

HTMLファイルのプロジェクトへの追加

HTMLファイルをプロジェクトへ追加します。
HTMLファイルはプロジェクトの"/assets"フォルダへ追加します。


作成したHTMLファイルを"Package Explorer"のプロジェクトの"assets"ノードへドラッグ＆ドロップします。


ファイルをドロップすると下図の[File Operation]ダイアログが表示されます。ファイルはコピーするので[Copy files]ラジオボタンにチェックをします。[OK]ボタンを押します。


ファイルが追加されると"assets"ノードに項目が追加されます。

コード

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

MainActivity.java

package com.iPentec.webviewlocalfile;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.*;

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("file:///android_asset/menu.html");
}

  @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;
  }

}

解説

こちらの記事で紹介している、WebViewでWebページを読み込むコードとほぼ同じです。
ローカルファイルを読み込む場合はloadUrlメソッドで指定するURLはAssetsフォルダを指定するローカルURI("file:///android_asset/(ファイル名)")を記述します。
注意
URIは
file:///android_asset/
です。"file:"の後ろには"/"が3つ必要です。また"android_asset"であり"android_assets"ではありません。("s"を付加しないよう注意)

実行結果

プロジェクトを実行します。WebViewにローカルのHTMLファイルが表示されます。

応用編

こちらの記事のコードと組み合わせたプログラムを作成します。 WebViewにローカルHTMLファイルを読み込ませメニューとし、メニューのリンクがクリックされるとメインコンテンツの内容を変更するプログラムです。=

プロジェクトの作成

Android アプリケーションプロジェクトを作成します。
[New Android Application]ダイアログボックスが表示されますので、以下を設定します。
  • Application Name: "WebViewLocalFile"
  • Project Name: "WebViewLocalFile"
  • Package Name: "com.iPentec.webviewlocalfile"
  • 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を作成します。フォームにWebViewを2つ配置します。


WebViewを縦に並べる場合は下部のWebViewの"Bellow"プロパティに上部のWebViewのIDを指定します。またMarginsのTopに数値を入力すると上部と下部のWebViewの間に余白を作れます。

コード

以下のコードを準備します。

メニュー用HTMLファイル

メニュー用のHTMLファイルを作成します。作成したファイルは先の手順で、プロジェクトのAssetsフォルダに追加します。
menu.html
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <a href="app://news">ニュース</a>&nbsp;
 <a href="app://weather">天気</a>&nbsp;
 <a href="app://shopping">ショッピング</a>;
</body>
</html>

コンテンツHTMLファイル

コンテンツ用のHTMLファイルを作成します。この3つのファイルはWebサーバーにアップロードします。
news.html
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>ニュースのページです</h1>
ニュースのコンテンツ
</body>
</html>
weather.html
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>天気のページです</h1>
天気のコンテンツ
</body>
</html>
shopping.html
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>ショッピングのページです</h1>
ショッピングのコンテンツ
</body>
</html>

アプリケーション本体

MainActivity.java
package com.iPentec.webviewlocalfile;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.*;
import android.widget.*;

public class MainActivity extends Activity {

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

    WebView webView1 = (WebView)findViewById(R.id.webView1);
    CustomWebViewClient wvc = new CustomWebViewClient();
    wvc.owner = this;
    webView1.setWebViewClient((WebViewClient)wvc);
    webView1.loadUrl("file:///android_asset/menu.html");
}

  @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;
  }
  
  public void LoadNewsPage(){
    WebView webView2 = (WebView)findViewById(R.id.webView2);
    webView2.loadUrl("http://(HTMLファイルのあるサーバーURL)/news.html");
  }
  
  public void LoadWeatherPage(){
    WebView webView2 = (WebView)findViewById(R.id.webView2);
    webView2.loadUrl("http://(HTMLファイルのあるサーバーURL)/weather.html");
  }
  
  public void LoadShoppingPage(){
    WebView webView2 = (WebView)findViewById(R.id.webView2);
    webView2.loadUrl("http://(HTMLファイルのあるサーバーURL)/shopping.html");
  }
}
解説
LoadNewsPage()は下部のWebViewにnews.htmlファイルを読み込むメソッドです。LoadWeatherPage()は下部のWebViewにweather.htmlファイルを読み込むメソッドです。LoadShoppingPage()は下部のWebViewにshopping.htmlファイルを読み込むメソッドです。
CustomWebViewClient.java
package com.iPentec.webviewlocalfile;

import android.app.Activity;
import android.webkit.*;

public class CustomWebViewClient extends WebViewClient {
  public Activity owner;
  
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    MainActivity ma = (MainActivity)owner;
    
    if (url.equals("app://news") == true){
      ma.LoadNewsPage();
    }
    else if (url.equals("app://weather") == true){
      ma.LoadWeatherPage();
    }
    else if (url.equals("app://shopping") == true){
      ma.LoadShoppingPage();
    }
   
    view.stopLoading();
    return false;
  }

}
解説
WebViewClientを継承したCustomWebViewClientクラスです。URLのキャプチャ部分はのコードはこちらの記事を参照してください。WebViewClient作成時に呼び出し元のアクティビティのインスタンスをownerに代入しています。ownerをMainActivity にキャストすることでMainActivity内のLoadNewsPage(),LoadWeatherPage(),LoadShoppingPage()メソッドをを呼び出しています。

実行結果

プロジェクトを実行します。下図の画面が表示されます。


上部のWebViewのメニューリンクをタップすると下部のWebViewの内容が変わります。


著者
ジョニー
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

関連するページ

最終更新日: 2024-01-04
作成日: 2013-03-18
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.