素人プログラマ奮闘記

javaの初心者がAndroidのことを独学で勉強しつつ、メモを残していきます。

Webブラウザー作成

今回はWebViewを使用して、簡単なWebブラウザーを作成してみようと思います。

とりあえずデフォルトでWebViewTestプロジェクトを作成してください。

次に、インターネット使用許可設定をします。
初期状態はアプリがインターネットを使用するための制限が厳しいため
それらを解除するための設定をします。
AndroidManifest.xmlに下記の設定を追加してください。
<uses-permission android:name="android.permission.INTERNET"/>追加します。

AndroidManifest.xmlの内容


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webviewtest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
	lt;uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.webviewtest.MainActivity"
            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>


レイアウトの作成です、画面内にWevViewを配置します。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffd5"
    android:orientation="vertical">
<WebView
    android:id="@+id/mainView_webView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
</LinearLayout>


で、Activityの編集です。

package com.example.webviewtest;

import java.util.HashMap;
import java.util.Map;

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

public class MainActivity extends Activity {

	private WebView mainView = null;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		//コントロール取得
		this.mainView = (WebView)findViewById(R.id.mainView_webView);
		//表示URL設定
		this.mainView.loadUrl("https://www.google.co.jp/");
		//HTTPヘッダーを追加したい場合はこっち
		/////////////////////////////////////////
		////ユーザーエージェント名(User-Agent)
		////リファラ(Referer)
		////更新されていたら(If-Modified-Since)
		////クッキー(Cookie)
		////受け取り希望(Accept、Accept-Language、Accept-Encoding、Accept-Charset)
		/////////////////////////////////////////
		//Map<String, String> extraHeaders = new HashMap<String, String>();
		//extraHeaders.put("ACCEPT", "text/html");
		//this.mainView.loadUrl("https://www.google.co.jp/",extraHeaders);
	}
}
コントロールを取得してthis.mainView.loadUrlをつかって表示したいサイトのURLを引数で渡しています。
HTMPヘッダーを使用したい場合は

this.mainView.loadUrl("https://www.google.co.jp/",extraHeaders);です。

アプリ起動するとグーグルのトップページを表示するだけのアプリが完成です(笑)



カテゴリーへ

Webブラウザー作成(2)

前回作ったブラウザーをより使い勝手がいいように改造していきます。

前回のブラウザーのままだとグーグルページから検索をした時に
標準のwebブラウザを起動しようとします。
アプリケーション内で閉じた動作とさせるためにはsetWebViewClientを設定します。


@Override
protected void onCreate(Bundle savedInstanceState) {
	
	this.mainView = (WebView)findViewById(R.id.mainView_webView);
	
	//表示URL設定
	this.mainView.loadUrl("https://www.google.co.jp/");
	
	//リンクをタップしたときに標準ブラウザを起動させない
	this.mainView.setWebViewClient(new WebViewClient());		
}
次にEditTextと更新ボタンを画面上部に新たに配置して
EditTextに入力したurlにアクセスできるようにします。
			
@Override
protected void onCreate(Bundle savedInstanceState) {
	//これを設定しておくとソフト起動時にキーボードが立ち上がらなくなります。
	this.getWindow().setSoftInputMode(LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
	this.urlText = (EditText)findViewById(R.id.url_text);
	this.pageOpenButton = (ImageButton)findViewById(R.id.pageOpne_button);
	//クリックイベント登録
	this.pageOpenButton.setOnClickListener(this);
	
	//URL入力テキスト設定
	InputFilter[] filters = { new UrlEditFilter() };
	this.urlText.setFilters(filters);
	//フォーカス変更時イベント登録
	this.urlText.setOnFocusChangeListener(this);
	//キーボード入力時イベント登録
	this.urlText.setOnEditorActionListener(this);


}

@Override
public void onClick(View v) {
	switch (v.getId()) {
	case R.id.pageOpne_button:
		//更新ボタン押下
		//ソフトキーボードを閉じる
		InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
		inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(),0);
		search();			
		break;
	}
}

@Override
public void onFocusChange(View v, boolean hasFocus) {
	// TODO 自動生成されたメソッド・スタブ
	 InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
     // フォーカスを受け取ったとき
     if(hasFocus){
         // ソフトキーボードを表示する
         inputMethodManager.showSoftInput(v, InputMethodManager.SHOW_FORCED);
     }
     // フォーカスが外れたとき
     else{
         // ソフトキーボードを閉じる
         inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(),0);
     }
}

@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
	//ソフトキーボードを閉じる
	InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
	inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(),0);

	if (actionId == EditorInfo.IME_ACTION_NEXT) {
		search(); // search処理  
	}
	return true; // falseを返すと, IMEがSearch→Doneへと切り替わる  
}

/**
 * 検索
 */
private void search() {
	
	UrlEditFilter fl = new 	UrlEditFilter();
	String urlString = this.urlText.getText().toString();
	
	//入力URLチェック
	if(fl.CheckUrlString(urlString))
	{
		this.mainView.loadUrl(urlString);
	}
}


public class UrlEditFilter implements InputFilter {

	public static final String MATCH_URL = 
			  "^(https?|ftp)(:\\/\\/[-_.!~*\\'()a-zA-Z0-9;\\/?:\\@&=+\\$,%#]+)$";
	
	@Override
	public CharSequence filter(CharSequence source, int start, int end,
            Spanned dest, int dstart, int dend) {		
		if( source.toString().matches("^[-_.!~*\\'()a-zA-Z0-9;\\/?:\\@&=+\\$,%#]+$") ){
			return source;
		}else{
			return "";
		}
	}
	
	/**
	 * 		
	 * @param urlString
	 * @return
	 */
	public boolean CheckUrlString(String urlString) {
		try {
		    URL url = new URL(urlString);
		    String protocol = url.getProtocol();
		 
		    if(! protocol.equals("http") && ! protocol.equals("https")){
		            throw new MalformedURLException("protocol is not http or https");
		     }
		    //スキームがhttpかhttpsだった場合の正常処理
			return true;
		}catch (MalformedURLException e){
		    e.printStackTrace();
		    return false;
		}
	}
}

キーボード表示制御について

ソフト起動時はEditTextにフォーカスがあたってると勝手にキーボードが表示されちゃうので
this.getWindow().setSoftInputMode(LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
で制御してます。

onEditorAction内でキーボード上の次へボタンが押された時に検索処理を実行するようにしてます。

更新ボタン押下時にキーボードが表示されてた場合、閉じるように処理をいれました。

フォーカス移動自にonFocusChangeが発生するので、
キーボードを閉じたり開いたりする処理をいれてます。

上記のようにキーボードの表示制御が非常にメンドクサイですね('A`)
よくわからない場合は
キーボード表示制御についてを見てみてくださいね。

WebViewの脆弱性対策

あと、どうもWebViewは脆弱性の数が多いらしくて、使用する際は注意が必要のようです
今回のソフトは「file://」を使用しないので、入力値を検証して「http://」と「https://」以外はエラーとしてます。

ulr入力時チェックですが、正規表現を使用してます。

InputFilter[] filters = { new UrlEditFilter() };
this.urlText.setFilters(filters);

search()メソッド内でもurlのチェックをおこなっています。


カテゴリーへ

Webブラウザー作成(3)

次に、前回のソフトに、ページの進む、戻るボタンを
つけてブラウザ履歴を移動する機能を作っていきます。

履歴操作で使用する主な関数を下記に記述します。

●public boolean canGoBack()
戻る履歴アイテムが有ればtrueを返します。
ボタンを無効にしたりするときにつかうのかな。。?

●public boolean canGoForward ()
進む履歴アイテムが有ればtrueを返します。

●public boolean canGoBackOrForward (int steps)
引数に履歴を確認する数を指定します。
負の値を指定した場合には戻る履歴アイテム
正の値を指定した場合には進む履歴アイテムを確認します。
動作可能な履歴がある場合はtrueを返します。
どんな状況で使用するのかいまいちピンときませんねぇ~

●public void goBack ()
現状ページから1つ前の履歴ページへ遷移します。
ちなみに戻る履歴アイテムがない場合にgoBack()をしても
動作しないだけでエラーになったりはしません。

●public void goForward ()
現状ページから1つ先の履歴ページへ遷移します。

●public void goBackOrForward (int steps)
引数に移動したい履歴数を指定
負の値を指定した場合には、指定数分ページを戻ります。
正の値を指定した場合には、指定数分ページを進めます。

public void clearHistory ()
閲覧履歴をクリアします。

ソースコードは以下の通り

			


	private ImageButton forwardButton = null;	//進むボタン
	private ImageButton backButton = null;		//戻るボタン

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		this.forwardButton = (ImageButton)findViewById(R.id.forward_button);
		this.backButton = (ImageButton)findViewById(R.id.back_button);
		//進むボタン
		this.forwardButton.setOnClickListener(this);
		
		//戻るボタン
		this.backButton.setOnClickListener(this);
	}
	
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.forward_button:
			//進むボタン押下
			if(this.mainView.canGoForward()) {
				this.mainView.goForward();
			}
			break;
		case R.id.back_button:
			//戻るボタン押下
			if(this.mainView.canGoBack()) {
				this.mainView.goBack();
			}
			break;
		}
	}

WebViewキャッシについて

Webviewにてフォームのデータなどを保存するデータベースのことです。
どうもこのデータベースの保存場所が一意に決まってしまうため
簡単に攻撃されてしまうようです。(;´∀`)

(/data/data/アプリケーション名/databases/webview.db)
よってWebViewの履歴を取り扱う時には以下の注意が必要です。

●file://は使用できないようにする。
●javaScriptは必要ないなら使用しない。
●WebViewは小まめに削除。

結論!グーグルさんに早く治してもらう!(´Д`)

カテゴリーへ

Webブラウザー作成(4)

前回からの続きで、まだまだ改造していきます(笑)
今回はWebViewに表示したページの拡大や縮小するボタンを実装していきます。
画面の下部にout,inのボタンを設けて、押すことにより画面に表示されたページの
ズームイン、ズームアウトが操作できるようにします。

●public boolean canZoomIn()
ズームイン可・不可の取得
●public boolean canZoomOut()
ズームアウト可・不可の取得
●public boolean zoomIn()
1段階拡大して表示
●public boolean zoomOut()
1段階縮小して表示
●public void resetZoom()
拡大縮小段階をリセットする

一度見たページはキャッシュとして保存されてしまうのでアプリ終了時に
キャッシュのクリアー処理をするように実装しました。

onPause() や onDestroy() など終了処理でキャッシュをクリアしておけば
処理速度の改善につながると思います
●public void clearCache (boolean includeDiskFiles)
includeDiskFiles がfalseでRAMのみのキャッシュクリアー
基本はtrueでOK
ソースコードは以下の通り

private Button zoomInButton = null;			//ズームイン
private Button zoomOutButton = null;		//ズームアウト

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		this.zoomInButton = (Button)findViewById(R.id.zm_in_button);
		this.zoomOutButton = (Button)findViewById(R.id.zm_out_button);
		//ズームイン
		this.zoomInButton.setOnClickListener(this);
		
		//ズームアウト
		this.zoomOutButton.setOnClickListener(this);
	}
	
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
			case R.id.zm_in_button:
				this.mainView.zoomIn();
				break;
			case R.id.zm_out_button:
				this.mainView.zoomOut();
				break;
		}
	}
	
	
	@Override
	protected void onDestroy() {
		super.onDestroy();
		//破棄
		this.mainView.stopLoading();
		this.mainView.freeMemory();
		this.mainView.clearCache(true);  //←クリア
		this.mainView.setWebViewClient(null);
		this.mainView.setWebChromeClient(null);
		this.mainView.destroy();
		this.mainView = null;				
	}

カテゴリーへ

Webブラウザー作成(5)

今回は画面に表示したWebページの画面イメージをキャプチャーしてファイルに
保存する処理を実装していきます。

画面上にボタンを増やすのがレイアウト的に限界になってきたため
画面イメージ保存アクションはOption機能を使います。
※Option機能の詳細については(1)を参考にしてください^^

●public Picture capturePicture
表示しいるコンテンツWebViewのスクリーンショットが撮れます。
しかもスクロールしないと見れない箇所も含めて撮れます。

Picture→Bitmapに変換したらSDカード内に保存することもできます。
ではソースを見ていきます

			
	public static final int MENU_SELECT_SAVE = 3;
	
	/*
	 * メニュー表示
	 */
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		menu.add(0,MENU_SELECT_SAVE,4,getString(R.string.action_save));
		return true;
	}
	
	/*
	 * メニュー押下時
	 */
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// TODO 自動生成されたメソッド・スタブ
		
		switch (item.getItemId()) {
		
		case MENU_SELECT_SAVE:
			Picture pictureObj = this.mainView.capturePicture();
            // 取ったキャプチャの幅と高さを元に
            // 新しいBitmapを生成する。
            Bitmap  bitmap = Bitmap.createBitmap(
                            pictureObj.getWidth(),
                            pictureObj.getHeight(),
                            Bitmap.Config.ARGB_8888);

            // canvasを通してBitmapに書き込む
            Canvas canvas = new Canvas(bitmap);
            pictureObj.draw(canvas);

            // Bitmapをファイルシステムに書き出す。
            FileOutputStream fos = null;
            try {
                    String path =
                            Environment.getExternalStorageDirectory().toString() +
                            "/test.jpg";

                    fos = new FileOutputStream(path);
                    if ( fos != null )
                    {
                            bitmap.compress(Bitmap.CompressFormat.JPEG, 90, fos);
                            fos.close();
                    }
            } catch( Exception e ){
                    e.printStackTrace();
            } finally {
                    try {
                            if(fos != null) fos.close();
                    } catch (IOException e) {
                    }
            }
			
			break;
		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}	

Bitmap.createBitmapでの引数のBitmap.Config.ARGB_8888とは
32ビットのARGBデータでBitmapを作成する事を、示しています。

ローカルにファイルを保存する方法は色々あるのでまた別の機会に調べます。
とりあえず今回はここまで

次はブックマーク機能でもつくるかなー


カテゴリーへ

inserted by FC2 system