Android関連

関連:簡易ブラウザをつくろう1

Androidでは、WebView?クラスを用いることで、簡単にWebKit?を利用することができます。 WebView?はブラウザですから、特定のURLへ行かせたり、アプリの中のローカルのファイルを読みに行くこともできます。

Javaでのアプリ作成はつらいけれども、HTML5とCSSでウェブページを作る感覚でアプリを作ることができます。HTML5とCSSはネット上にたくさんの情報がありますので、やりたいことがすぐできる可能性があります。

そこで、ここでは、アプリの本体は HTML+CSSにゆだねて、その器をWebView?で作ろうと思います。

※セキュリティの観点から許可する範囲は最小限にする必要がありますが、ここでは実験環境ということでメモを残しておきます。セキュリティに関しては、別途書籍などを参考にしてください。

WebView?で簡易ブラウザを作る

  1. ecpliseを起動します。
  2. [ファイル]-[新規]-[新規プロジェクト]-[Androidアプリケーション・プロジェクト]を選択します。
  3. Application Nameを適当な名前でつけます (例: MyWebView?) webview01.jpg
  4. 次へを選択します。
  5. アイコンセットはとりあえず、無視して次へ
  6. アクティビティの作成もそのままで次へ
  7. Titleを好みの名前に変更してもよい(例:簡易ブラウザ)
  8. 完了を押す
  9. インストールが成功しているならば、Hello Worldと表示するはずです webview02.jpg

インターネットアクセスを許可する

WebView?の初期状態はものすごく制限がかかっているので、それらを解除しなければなりません。AndroidManifest?で、インターネット接続を許可します。

  1. [許可]-[追加]-[Uses Permission]を選択する。
  2. [Name]から[android.permission.INTERNET]を選択する。 webview03.jpg

AndroidManifest?.xml は次のようになっている。

java;highlight: [9]

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="8"
       android:targetSdkVersion="15" />
   <uses-permission android:name="android.permission.INTERNET"/>
   <application
       android:icon="@drawable/ic_launcher"
       android:label="@string/app_name"
       android:theme="@style/AppTheme" >
       <activity
           android:name=".MainActivity"
           android:label="@string/title_activity_main" >
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

/manifest> }}

WebView?を追加する。

  1. [res/layout/activity_main.xml]を開く
  2. [Hello World]を削除する。
  3. [Composite]から[WebView?]を選択する。 webview04.jpg

activity_main.xml の中身。webViewのIDがwebView1と名付けられていることに注意。

java; highlight: [6&#44;7&#44;8&#44;9&#44;10&#44;11]

RelativeLayout? xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >
   <WebView
       android:id="@+id/webView1"
       android:layout_width="match_parent"
       android:layout_height="match_parent"

/RelativeLayout?> }}

ドラッグでうまくいかない場合は、activity_main_xmlを直接扱った方がよい。

WebView?に URL をロードさせる。

  1. [src/com.example.mywebview/MainActivity?.java]を開く。
  2. webView,WebViewClienet? をインポートする。
    java
    import android.webkit.WebView?; import android.webkit.WebViewClient?; }} importの部分は、折りたたまれているので、+を押して展開するとよい。
  3. setContentView?(R.layout.activity_main); のあとに以下を追加する。
    java
           //レイアウトで指定したWebViewのIDを指定する。
           WebView  myWebView = (WebView)findViewById(R.id.webView1);
       //リンクをタップしたときに標準ブラウザを起動させない
       myWebView.setWebViewClient(new WebViewClient());
       //最初にYahoo! Japanのページを表示する。
       myWebView.loadUrl("http://www.yahoo.co.jp/");

}} 大文字と小文字は区別する。

  1. 赤波線が出たら一番上のを選択しておく。 上の手順で行うと、R.id.webView1に赤波線がつくはずである。これは、リソース R.java にID webView1 が登録されていない。赤波線をクリックして、IDを登録しておこう。

R.javaの中身は以下の通り。

java;highlight:[19]

/* AUTO-GENERATED FILE. DO NOT MODIFY.

*
* This class was automatically generated by the
* aapt tool from the resource data it found.  It
* should not be modified by hand.
*/

package com.example.mywebview;

public final class R {

   public static final class attr {
   }
   public static final class drawable {
       public static final int ic_action_search=0x7f020000;
       public static final int ic_launcher=0x7f020001;
   }
   public static final class id {
       public static final int menu_settings=0x7f070000;
		public static int webView1;
   }
   public static final class layout {
       public static final int activity_main=0x7f030000;
   }
   public static final class menu {
       public static final int activity_main=0x7f060000;
   }
   public static final class string {
       public static final int app_name=0x7f040000;
       public static final int hello_world=0x7f040001;
       public static final int menu_settings=0x7f040002;
       public static final int title_activity_main=0x7f040003;
   }
   public static final class style {
       public static final int AppTheme=0x7f050000;
   }

} }}

エミュレータを起動し、Yahoo! Japanのウェブサイトが表示されます。WebView?でJavascriptが有効化されていないので、「Javascriptが無効です」と表示されるはずです。 webview05_0.jpg

アプリ内にHTMLファイル一式を保存するときは、 assetの中に保存し、URLを[file:///android_asset/index.html]などと指定するとよい。

プログラム

MainActivity?.javaの中身は以下の通り

java

package com.example.mywebview;

import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.webkit.WebView?; import android.webkit.WebViewClient?;

public class MainActivity? extends Activity {

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       
       //レイアウトで指定したWebViewのIDを指定する。
       WebView  myWebView = (WebView)findViewById(R.id.webView1);
       
       //リンクをタップしたときに標準ブラウザを起動させない
       myWebView.setWebViewClient(new WebViewClient());
       
       //最初にYahoo! Japanのページを表示する。
       myWebView.loadUrl("http://www.yahoo.co.jp/");
   }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.activity_main, menu);
       return true;
   }

} }}

WebViewを使ったアプリ作成その2


添付ファイル: filewebview02.jpg 4729件 [詳細] filewebview03.jpg 5471件 [詳細] filewebview05.jpg 152件 [詳細] filewebview01.jpg 3590件 [詳細] filewebview04.jpg 5245件 [詳細] filewebview05_0.jpg 4425件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2014-08-22 (金) 20:06:00 (1373d)