AndroidでWebViewアプリを作る[初心者向け]

by ⋅ 1 Comment

AndroidでWebビューアプリを作るのは、eclipseの環境と多少の知識があれば完成するので、Androidアプリ作成の練習にはうってつけです。

以下の解説は、「eclipseの環境設定」と「プロジェクトの新規作成」の手順を省いています。初心者の皆さんは、頑張ってググってそのあたりを終わらせた後、またこの記事にもどってきてください。

 

○パーミッションの設定

まず必要なのが、アプリから外部にアクセスするため、AndroidManifest.xmlにINTERNET権限の設定を追記します。

これがないとネットへのアクセスができないので、忘れずに設定しましょう。

一番上の階層にあるAndroidManifest.xmlというファイル、これは、アプリ全体の設定を記入するファイルです。ここに、

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

↑の記述を画像の位置に記入してください。

これで、パーミッションの付与は完了です。

（android:minSdkVersion=”4″とか、android:targetSdkVersion=”15″とかの記述が環境によって異なるかもしれませんが、あんまり気にしないでください）

 

○画面レイアウトの設定

自動的に生成されている[res]-[layout]-[activity_main.xml]というファイルがあると思います。

Androidアプリは、この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”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent” />

</LinearLayout>

重要なのは、<WebView以下の部分です。

ここにURLから読み込んできたデータを表示させます。

 

○javaプログラミング

さて、いよいよメインのJavaプログラミングです。[src]フォルダの中にMainActivity.javaに自動生成されていると思うので、それを書き換えていきます。

単純にWebViewアプリとして動かすだけなら、

WebView webView = (WebView)findViewById(R.id.WebView);
webView.loadUrl("http://www.google.co.jp/");

の2行を追記するだけで動きます。エミュレータで確認してみてください。

しかし、それだけだと著しくユーザビリティの低いアプリにしかならないので、他の機能も多少実装しておきましょう。

public class MainActivity extends Activity {
//接続先のURL
private static final String web_url = "http://www.google.co.jp/";

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

//WebViewインスタンスを取得
WebView webview = (WebView)findViewById(R.id.WebView);

//loadUrlメソッドを呼び出し
webview.loadUrl(web_url);

//WebViewClientを組み込む
webview.setWebViewClient(new WebViewClient());

//ズーム機能を有効にする
webview.getSettings().setBuiltInZoomControls(true);

// JavaScriptを有効にする
webview.getSettings().setJavaScriptEnabled(true);

//右10pxの余白を消す
webview.setVerticalScrollbarOverlay(true);

//Flashなどのプラグインを有効にする
webview.getSettings().setPluginsEnabled(true);
}

//端末の戻るボタンを押した時に前のページに戻す
@Override
public boolean onKeyDown( int keyCode, KeyEvent event ) {
//WebViewインスタンスを取得
WebView webview = (WebView)findViewById(R.id.WebView);

if ( event.getAction() == KeyEvent.ACTION_DOWN
&amp;&amp; keyCode == KeyEvent.KEYCODE_BACK
&amp;&amp; webview.canGoBack() == true ) {
webview.goBack();
return true;
}
return super.onKeyDown( keyCode, event );
}
}

それぞれの記述がどういう働きをしているかは、コメントの通りなので細かい解説は避けますが、行ごとにコメントアウトしてエミュレータで動きを確認したりするとより深く理解できると思います。

 

このアプリ作成を起点にして、他にも色んなアプリを作るきっかけにしてください。

Posted in: android ⋅ Tagged: ,

Post Navigation