初心者歓迎!CLAND教授と新人青木くんのAndroid(アンドロイド)アプリ開発講座

CLAND教授と新人青木くんのAndroidアプリ開発講座トップへ

第5回 WebViewを使ったブラウザアプリ [ 表示編 ]

さぁ、今日はWebViewを使った
ブラウザアプリの作り方
を紹介していくよ!

ぶらうざあぷり??

そう、イメージとしてこんな感じのアプリを今回作っていきたいと思うんだ。


WebViewを使ったブラウザアプリ [ 表示編 ]

おぉ~!なんだか"アプリ"っぽいね!
カッコイイ♪

やれやれ・・青木くん、他人事だなあ。
君もこれから作れるようにならなきゃいけないんだよ!

ハーイ!CLAND教授お願いしますっ!

(なんだかなあ・・・)



アプリに権限を与えよう


まず、アプリがインターネット通信できるように
AndroidManifest.xmlファイルを書き換える
よ。

ほほぉー…、どうやってやればいいの?

<uses-permission android:name="android.permission.INTERNET" />のコードを追加するんだ。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="jp.clinks.webviewtest"
   android:versionCode="1"
   android:versionName="1.0">
  <uses-sdk android:minSdkVersion="7" />
  
  <!-- インターネット通信の許可ここから -->
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- インターネット通信の許可ここまで -->

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

まんなかあたりにコードを入れたよ!
これでオッケーだね。



レイアウトにWebViewを実装しよう


次にレイアウトの編集をしていくよ。
main.xmlファイルを編集して、
WebViewレイアウトを導入
するんだ。

ふむふむ、さっきみたいにまたコードを追加すればいいのかな?

そうそう!こんな感じに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:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:id="@+id/webview">
  </WebView>
</LinearLayout>

これでレイアウトの設定はオッケーだね!楽勝!



実際にウェブサイトを表示してみよう


つぎはつぎは~?

これで、ウェブページを表示できる準備は整ったから、
最後にJavaでウェブページを表示できるように書いていくよ。

うんうん!

まず、メンバ変数に以下のコードを記述
private WebView webView;

次にonCreateメソッドで先程「main.xml」に記述したWebViewを呼び出し。
webView = (WebView) findViewById(R.id.webview);

最後に、呼び出したwebViewに表示させたいURLを教えてあげればページを読み込むよ。
webView.loadUrl("http://sp.clinks.jp/");

う~ん、工程は多いけど、
ひとつずつさっきみたいに入力していけばいいんだよね?

そうそう、全体像としてはこんな感じになるよ。

package jp.clinks.webviewtest;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewActivity extends Activity {

  /**
   * メンバ変数
   */
  private WebView webView;

  /**
   * アプリ起動時に最初に呼ばれるメソッド(onCreate)
   */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main); // main.xmlをセット

    findViews(); // Viewの読み込み
    webView.loadUrl("http://sp.clinks.jp/"); // サイトの読み込み
  }

  /**
   * Viewの読み込み
   */
public void findViews() {
    // main.xmlのwebviewのIDを取得し、
    // WebViewActivityのWebViewクラスに関連付ける
    webView = (WebView) findViewById(R.id.webview);
  }
}

うぇ~…、なんだか疲れてきた~…

もう、青木君!
今回はあと少しで終わるから、もうひと頑張りしてよ!

はぁあ~い。



findViewメソッドについて


今回、画像ではfindVeiwsメソッド内で
webviewの呼出しを行っている
んだけど、
後々もボタンや画像を追加していくよね?

そうだね~♪
カッコイイアプリを作りたいから、ボタンとか色々くっつけてみたい!

でも、その度にonCreateメソッド内で呼び出しの処理を入れると見づらくしまうんだよ。

それは嫌だなぁ…

だから、できるだけonCreate内ではなく、
findViewsメソッドに書き足していきたいんだ

??
…え~っと、え~と…??

たとえば、こんな感じで入力欄と、検索ボタンを追加したとして↓


WebViewを使ったブラウザアプリ [ 表示編 ]

青木君、このふたつのコードを見比べてみて↓

▼onCreateに記述した場合
public class WebViewActivity extends Activity implements OnClickListener {

  /**
   * メンバ変数
   */
  private WebView webView;
  private EditText editText;
  private Button button;

  /**
   * アプリ起動時に最初に呼ばれるメソッド(onCreate)
   */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main); // main.xmlをセット

    webView = (WebView) findViewById(R.id.webview);
    editText = (EditText) findViewById(R.id.editText1);
    button = (Button) findViewById(R.id.button1);

    webView.loadUrl("http://sp.clinks.jp/"); // サイトの読み込み
  }
}

▼onCreate外に記述した場合
public class WebViewActivity extends Activity implements OnClickListener {

  /**
   * メンバ変数
   */
  private WebView webView;
  private EditText editText;
  private Button button;

  /**
   * アプリ起動時に最初に呼ばれるメソッド(onCreate)
   */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main); // main.xmlをセット

    findViews(); // Viewの読み込み

    webView.loadUrl("http://sp.clinks.jp/"); // サイトの読み込み
  }

  /**
   * Viewの読み込み
   */
  public void findViews(){
    webView = (WebView) findViewById(R.id.webview);
    editText = (EditText) findViewById(R.id.editText1);
    button = (Button) findViewById(R.id.button1);
  }
}

確かに、
onCreateの外に記述した方が、
全体的に見やすくなってる~

そう!機能が多くなるにつれて、行数が増えていってしまうけど、
一工夫するとこうやって見易くすることもできるんだ。

なるほど~!!

~Androidアプリ開発講座 第5回 WebViewを使ったブラウザアプリ [ 表示編 ] 完~

Ketchapp!トップページ
CLAND教授と新人青木君のAndroidアプリ開発講座
*「Android」は、Google Inc.の登録商標です。

Ketchapp!コンテンツ

Ketchapp!に掲載されている記事・写真・イラスト等のコンテンツの無断転載を禁じます。

Copyright(c) 2011 Ketchapp! Androidアプリ開発講座 All Rights Reserved.