ウェブ、ショウジン

Android APIのWebViewを使って超簡易ブラウザを試してみる【その1】

2011-10-9
Category
スマートフォン・アプリ

AndroidアプリケーションではActivityというものがWebページでいうところのhtmlファイルのようなもので、アプリケーションがユーザーと対話する単位になっているらしい。

おおむね1画面のUI(ユーザー・インタフェース)と「対話のための処理」がひとまとまり、ひとつの単位となったものがActivityということらしい。

Androidアプリケーションでは、このActivityを単位として各種の処理を記述していくらしい。

そして、このActivityの中にAndroid APIで用意されているUIコンポーネント/Viewをつかって、テキストや外部Webページ、Map(その他いろいろ)なんかを組み込んで表示していくことができるらしい。

環境構築後に確認のため試してみたサンプルでは、画面にテキストだけを表示していた。これはTextViewを使用しているかららしい。

外部のWebページをアプリ内で表示するには「WebView」というViewを使えばいいらしいので、アプリを起動すると外部Webページを表示する超簡易ブラウザアプリを試してみる。

Eclipseでプロジェクトの作成

サンプルのとき同様に、まずはEclipseの「ファイル」メニューから「新規>プロジェクト」でウィザードを立ち上げてAndroidプロジェクトを選択。

ダイアログで以下を設定。

1. プロジェクト名(Project name): MyWebView
2. ビルド・ターゲット(Build Target): Android 1.6
3. アプリケーション名(Application name): MyWebView
4. パッケージ名(Package name): com.example.mywebview
5. アクティビティを作成(Create Activity): MyWebView

*パッケージ名は本番(実際にAndroidマーケットに公開する)ではマーケット上でユニークな名前が設定されている必要がある。ドメインを使うのが一般的らしい。(例:me.showjin.mywebviewとか)

MyWebView1

このようにしたら「完了」をクリックしてプロジェクトをビルドする。

アプリの画面デザインを変更する

こうしてビルドしたプロジェクト「MyWebView」が「WebView」を使用できるようにレイアウトを変更する。

*画面のデザインは、Androidアプリにおいてはxmlで記述し、定義されているらしい。(その他もjavaのソース以外は全部xmlらしい)

このプロジェクトにおける画面デザインの定義ファイル(xmlファイル)は
Eclipseのworkspaceディレクトリ/MyWebView/res/layout
内に「main.xml」として在る。

このファイルを開いてみると

<?xml version="1.0" encoding="utf-8"?>
<linearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<textView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</linearLayout>

「TextView」となっていることでTextViewを使用するようになっているので、ここを変更、追記してWebViewを使うように、以下のように編集する。

<?xml version="1.0" encoding="utf-8"?>
<linearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<webView
	android:id="@+id/main_webview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</linearLayout>

これでアプリケーションのMainActivityではWebViewが使用されることになった。

android:id=”@+id/main_webview” は、このWebViewに識別子をつけたということを意味する。(詳しくは後述)

WebViewにURLをロードさせる

アプリケーションのMainActivity(アプリケーションのホーム、かな。たぶん)においてWebViewを使用するよう変更したので、次はWebViewに表示するURLを設定する。

WebViewにURL(外部Webページ)を表示するには、WebViewが持っているメソッド「loadUrl」を使用する。

Activityの処理を変更し、loadUrlを呼び出すように処理を追加する。

Eclipseのパッケージ・エクスプローラーで、MyWebViewプロジェクトの中のsrc/com.example.mywebview/MyWebView.javaを開く。

MyWebView2

*Eclipse上ではこのパスだけど、vimとかで開いていくと実際?のパスは
WebView/src/com/example/mywebview/MyWebView.java

package com.example.mywebview;

import android.app.Activity;
import android.os.Bundle;

public class MyWebView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

これに三行を追加する。(WebViewから始まる一行とその下の二行)

src/com.example.mywebview/MyWebView.java

package com.example.mywebview;

import android.app.Activity;
import android.os.Bundle;

public class MyWebView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView  webView = (WebView)findViewById(R.id.main_webview);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("http://web.showjin.me/");

    }
}

WebViewのメソッドを呼び出すのにfindViewById()を使って、実行時に生成されるViewの情報を取得している。

このときViewを指定するキーとなる情報が、前に「詳細は後述」とした「識別子」で、「android:id=”@+id/main_webview”」の「main_webview」部分になる。

main.xmlに記述したidは、実行ファイル作成時に「R」というクラスのメンバとして生成され、アプリケーション・プログラムから参照可能になる。

あとはWebViewをhttpクライアントとしてloadUrlでURLを呼び出せばよい。今回は自分の備忘録ブログのURLを呼び出す指定をしている。

しかし、このままではjavaファイルに問題があって動作しない。Eclipse上で見るとわかるけれど

MyWebVeiw3

こんな風に指摘されて、このままエミュレーターを立ち上げて実行してみてもそれができない。

チュートリアルとか、ざっと調べてみたけどこういうのは見つからなくて、どこも普通にすんなり進めている様子。結局解決するのに3時間くらいかかってしまった。(普段vimを使ってコーディングをしているので、アプリ開発もそれでいこうと思っていたけれど、Eclipseでないとダメなことが判明)

ピンクのマーカーが出ている問題の箇所をひとつひとつ解決していく必要がある。

まず、上の行のマーカーの部分にカーソルをあてクリック。するとキャプチャ画面のようなダイアログが出てくるので、これの一番上の「”WebView” をインポートします」を選択状態にしてreturnキーを叩く。するとピンクのマーカーが灰色のバッテンに変化するので、そうしたら保存する。そうすると灰色のバッテンも消える。

MyWebView4

同じようにして下の行も処理する。

MyWebView5

これでjavaソースファイルでの問題はクリアした模様。

プログラムとしてはこれでオーケーらしいけど、Androidアプリケーションとして動作させるには、このままではまだ足りないらしい。動かないらしい。

マニフェスト・ファイル

Androidではあらかじめプログラムが必要とする権限を「マニフェスト・ファイル(AndroidManifest.xml) 」に記述しておく必要があるらしい。

今回は外部通信が発生するので、それを許可するための記述をマニフェスト・ファイルに追加してあげる必要があるらしい。

いまのところマニフェスト・ファイルには何も記述していないので、このままでは通信を行う(外部Webページを表示する)ことができない。

以下のようにマニフェスト・ファイルに追記し、外部通信を行う権限を追加する。

マニフェスト・ファイルの場所はプロジェクトのディレクトリ直下
MyWebView/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.mywebview"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MyWebView"
                  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>

このファイルに

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

を追加する。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.mywebview"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MyWebView"
                  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>
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>

これでMyWebViewアプリケーションを立ち上げると、指定したURLがWebViewによってActivity上で表示される準備が出来た。

エミュレーターで確認してみる

パッケージ・エクスプローラーからMyWebViewプロジェクトを選んで右クリックで「実行>2 Android アプリケーション」を実行。

ピクチャ 6

エミュレーターが起動してロックがかかった画面が表示されるので「MENU」ボタンをタップ。

MyWebView7

するとMyWebViewが立ち上がって、指定したURLのWebページが表示される。

MyWebView8

これでアプリというのもあまりにも低レベルだけど、まずはちょっと前進。
今回は第3回 簡易ブラウザの作成(その1)にお世話になりました。ありがとうございます。

そして、Android APIのWebViewを使って超簡易ブラウザを試してみる【その2】に続く。

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 さくらインターネット アクセス解析 カスタム投稿