[Android]簡易ブラウザをつくろう1

プロジェクトの作成

eclipseを使ったAndroidプログラミングの例として、簡易ブラウザを作ってみたいと思います。

まず、eclipseを起動します。 次に、[ファイル]-[新規]-[Androidプロジェクト]を選択します。 webview01_0.jpg プロジェクト名、アプリ名などを設定します。

プロジェクト名 easyWebView
ターゲット名 Android2.2にチェックを入れます。
アプリケーション名 easyWebView
パッケージ名 com.example.easyWebView
アクティビティーの作成 easyWebView
最小SDKバージョン 8

webview02.jpg

プロジェクト名は任意で構いません。 アプリケーション名はプロジェクト名と同じにしておきます。 ターゲット名は、2011年春の時点で一般的なAndroid2.2を選択します。 パッケージ名は、www.example.comというドメインを持っていれば、com.example.アプリケーション名になります。 アクティビティはアプリケーション名と同じものを設定します。 最小SDKバージョンはAndroid2.2を選択しているので8を入力します。

完了ボタンを押すと次のような画面になります。 webview03.jpg

レイアウト

パッケージ・エクスプローラーの [easyWebView]-[res]-[layout] の中のmain.xmlをダブルクリックすると、右側にmain.xmlの内容が表示されます。 webview04.jpg webview05.jpg 左図はGraphical Layout で右図がテキスト表示です。下側にタブがありますので、ここで表示の切り替えができます。 Graphical Layoutは、Javaのソースをこつこつ入力しなくても、左側の部品を選んで、ドラッグして配置するだけで、Javaソースができあがります。細かい設定はmain.xmlで行わなければなりません。 では、早速作っていきましょう。 Graphical LayoutにあるHello World Hello easyWebViewはいらないので、削除します。 webview06.jpg

左のパレットのコンポジットからWebViewを右側のレイアウトへドラッグします。 webview07.jpg

main.xmlタブをクリックしてソースを見ると確かに、Hello…の部分が消え、

<WebView android:id="@+id/webView1"...

という部分が追加されています。また、WebViewにはwebView1というIDが付いていることがわかります。

<?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/webView1"  
   android:layout_width="match_parent"
   android:layout_height="match_parent">
</WebView>
</LinearLayout>

main.xmlを保存します。保存すると上のタブの*main.xmlのアスタリスクが消えます。*が表示されているときは、未保存であることを示しています。

命令

レイアウトができたので、今度は、表示する命令を付け加えましょう。 [easyWebView]-[src]-の中の easyWebView.javaをクリックします。 次のようなソースが表示されます

package com.example.easyWebView;
import android.app.Activity;
import android.os.Bundle;
public class easyWebView extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
   }
}

setContentView?(R.layout.main);の次の行に以下の文を挿入します。

WebView webView=(WebView)findViewById(R.id.webView1);

WebViewの下に赤波線が表示されます。これは何らかのエラーがあることを示しています。マウスを赤波線の上にのせると、解決策が表示されます。ここでは、インポートを選択します。 webview08.jpg

さらにその下に次の文を挿入します。

webView.setWebViewClient(new WebViewClient());

入力していくと、入力候補が表示されますので、それを選択すると楽ですし、入力ミスも減ります。ここでもどうように、WebViewClient? をインポートしておきます。 webview10.jpg

その下の行に次の文を挿入します。

webView.loadUrl("http://www.yahoo.co.jp/");

http://www.yahoo.co.jp/を表示させようとしています。 easyWebView?.javaを保存します。

マニフェスト 

最後にマニフェストを設定します。 ここでは、インターネット通信を行いたいので、インターネット通信を許可するようマニフェストを変更します。 [easyWebView?]のAndroidManifest?.xmlを開きます。

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

と入力してもよいですが、eclipseを使っているので、次のようにします。 [許可]タブをクリックし、[追加]を選択します。 webview11.jpg nameの欄からandroid.permission.INTERNETを選びます。

以上でプログラムは完成です。実行してみましょう。 webview12.jpg

次のように表示されれば成功です。 webview13.jpg