Android開発 簡単なWEBブラウザを作ってみる

こんにちは、熊谷です。

前回はMacでAndroidアプリを開発するための準備について書きました。ということで、今回はその続き、実際に開発をしてみようと言うことで進めたいと思います。

インストールしたSDKだけで開発はできるのですが、少しでも楽に開発したいと言うことであれば現状Eclipseを使ってということになります。ということで、Eclipseをダウンロードしインストール、Android開発のためのプラグインADT Plugin for Eclipseをインストールします。


このADT PluginをインストールするとAndroidアプリケーション開発のための様々な機能がEclipseに追加されます。設定の中にSDKのPATHを指定する箇所があるので先にインストールしたSDKのPATHが設定されているかどうか、設定されていない場合は設定しておいてください。

では、早速何か作ってみましょう。今回は簡単なWEBブラウザを作ってみたいと思います。


新規プロジェクトで[Android][Android Project]を選択し次へ進みます。


プロジェクトのリソースを作成する画面ではこんな感じに、Project nameやBuild Target、Application name、Package name、Create Activityを入力完了です。


するとこんな感じでProject Explorerにプロジェクトが作成されます。

試しにこの状態でAndroid Applicationとして実行させてみます。

そうすると

こんな感じに表示されます。

では早速ブラウザになるように作ってみましょう。まずは画面周りということでプロジェクト直下のresの中のlayoutにあるmain.xmlを変更します。

先ほど実行したときにHello Worldと文字列が表示されましたがそれはここのTextViewに記述されているためです。

ということで、ここを以下のように変更します。


<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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/webview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
</LinearLayout>

つぎに、MyApp.javaを以下のように変更します。


package com.example.myapp;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
publicclass MyApp extends Activity {
    /** Called when the activity is first created. */
    @Override
    publicvoid onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // Webビューの作成
        WebView webView = (WebView) findViewById(R.id.webview);
        webView.setVerticalScrollbarOverlay(true);
        webView.setWebViewClient(new WebViewClient());
        WebSettings settings = webView.getSettings();
        settings.setSupportMultipleWindows(true);
        settings.setLoadsImagesAutomatically(true);
        settings.setBuiltInZoomControls(true);
        settings.setSupportZoom(true);
        settings.setLightTouchEnabled(true);
        webView.loadUrl("http://www.asial.co.jp/");
    }
}

また、アプリケーションからネットワークにアクセスするためにはパーミッションを設定する必要があるので、プロジェクト直下にあるAndroidManifest.xmlを開きandroid.permission.INTERNETを追加します。

下にあるタブの中の[Permissions]を選択し、[Add...]から[Uses Permission]でandroid.permission.INTERNETを選択します。

実行してみましょう。

こんな感じに無事指定したWebサイトが表示されると思います。

ただ、これだけでは特定のサイトしか表示されないので、簡単なURLバーを追加します。
まず、main.xmlを以下のように変更します。


<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <EditTextandroid:id="@+id/urlbar"
            android:singleLine="true"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </EditText>
        <Buttonandroid:text="go"
            android:id="@+id/go_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickGoBtn">
        </Button>
    </LinearLayout>
<WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
</LinearLayout>

次に、MyApp.javaを以下のように変更します。


package com.example.myapp;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
publicclass MyApp extends Activity {
    private WebView mWebView;
    
    /** Called when the activity is first created. */
    @Override
    publicvoid onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // Webビューの作成
        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setVerticalScrollbarOverlay(true);
        mWebView.setWebViewClient(new WebViewClient());
        WebSettings settings = mWebView.getSettings();
        settings.setSupportMultipleWindows(true);
        settings.setLoadsImagesAutomatically(true);
        settings.setBuiltInZoomControls(true);
        settings.setSupportZoom(true);
        settings.setLightTouchEnabled(true);
    }
    publicvoid onClickGoBtn(View v) {
        EditText editText = (EditText) findViewById(R.id.urlbar);
        String urlString = editText.getText().toString();
        
        mWebView.loadUrl(urlString);
    }
}

これで実行すると

こんな感じにURLバーぽいのが表示されます。ここにURLを入力しgoボタンを押すと

サイトが表示されます。

URLを入力して表示するだけのものですが、いかがでしょうか。ページのリロード機能やプログレスバーの表示だったり追加する機能はまだまだありますが、難しくはないので是非あれこれいじってみてください。