[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

[Android] Androidアプリ開発環境 for Windows-旧

ず、最低限入門書は買っておこう!! この本は、私がHello Android から先へ進むことができた本です。

1. Java DevelopmentKit (JDK) のインストール

JAVA でつまづくのがインストール。しかし、これは避けて通ることができない道。

Oracleの画面になってJDKのダウンロードがさらにややこしくなったが・・・

  1. http://www.oracle.com/technetwork/java/javase/downloads/index.html へアクセスする。
  2. Java Standard Edition(SE)を選択する。 dev01.jpg
  3. Java Development Kit (JDK) 6 Update30 の downloadボタンを押す。
  4. プラットフォーム(windows)を選択してContinueを選択する。 dev02.jpg
  5. jdk-6u30-windows-i586.exe をダウンロードする。
  6. exeファイルをクリックし、インストールを実行する。
  7. インストール先はコマンドが打ちやすいように「C:\java」にしておく。 dev03.jpg
  8. コマンドプロンプトから 「java -version」 と入力してヴァージョンが表示されればインストールは完了。
    dev04.jpg
  9. 環境変数のPATHを指定する「C:\java\bin;」
    dev05.jpg
  10.  [コントロールパネル]-[システム]-[システムのプロパティ]-[環境変数]

2. Eclipse のインストール

統合環境 Eclipseがあると非常に便利らしい。 しかし、日本語化がややこしい

  1. http://mergedoc.sourceforge.jp/ へ行く。
  2. Eclipse 3.7.1 Indigoを選択する。
  3. Pleiades JAVA (JREを含む)をダウンロードする。 dev07.jpg
  4. ZIPを展開する。
  5. C:\へコピーする。
  6. C:\eclipse\eclipse.exe をクリックする。
  7. ワークスペースの選択を求めるので、C:\workspace など適当な場所を選択する。 dev08.jpg
  8. 日本語で表示されていることを確認する。 dev09.jpg

3. Android Software Development Kit (Android SDK)のインストール

これまたインストールが難儀;;;

  1. http://developer.android.com/sdk/index.html へ行く。
  2. installer_r16-windows.exe をダウンロードする。
    dev10.jpg
  3. exeファイルを実行する
  4. JDKが入っていないと言われるが、いったんBackして進むと、大丈夫らしい。 dev11.jpg
  5. C:\androidにインストールする。
  6. SDK Manager.exeファイルが起動する。
  7. Android SDK and AVD Manager が起動する。
  8. Install packagesを選択する。(2.2,2.3.3,4.0など)。
  9. Update Allをクリックする。
  10. Accept All を選択して、Installをクリックする。インストールにかなり時間がかかる。
    dev12.jpg
  11. Doneと表示されたら、closeを選択する。
  12. PATHを設定する:例)C:\android\tools;C:\android\platform-tools;

4.Eclipseに Android-Plug-inをインストール

  1. ツールバーのヘルプから新規インストールを選択
  2. 追加ボタンを選択
  3. ロケーションにhttps://dl-ssl.google.com/android/eclipse/ を入力してOK。
  4. 名前は適当に「ADTPlugin」としておく。
  5. Developer Tools(開発ツール)をチェックして次へ、次へ File not found: “dev13.jpg” at page “Androidアプリ開発環境 for Windows-旧”
  6. ライセンスに同意して完了。
  7. ウィンドウの設定のAndroidのSDK LocationでAndroid SDKの場所を選択。
  8. “Androidアプリ開発環境 for Windows-旧”以上で開発環境が整った。

4. エミュレーター

  1. eclipseを開く
  2. メニューウィンドウーAndroid SDK AVD Managerを開く
  3. Virtual Devices を選択する。
  4. Newをクリック
  5. Name: 適当に例)Desire
  6. target Android 2.2 API Level 8
  7. SD Card :512MB
  8. Create AVD をクリック
  9. OKをクリックすると Desire ができる。

. エミュレーターの起動

  1. Desireを選択し、Start(開始)をクリック。
  2. Launchをクリックすると、エミュレーターが起動する。
  3. エミュレータの起動には時間がかかる。
  4. エミュレータが起動しても HTC Senceでないと突っ込みを入れない [smile]

エミュレーターの日本語化

  1. (▼) からSettingsを選択。
  2. Language & Keyboad からSelect Localeを選んで、 「日本語」を選択する。
  3. 後の設定方法は、 Desireと同じなので省略

コマンドプロンプトからの起動

  1. cmdを入力
  2. emulator @desire (desireは上で設定した名前) 以上

5 Hello World

  1. eclipseを開く
  2. ファイル-新規-その他を選ぶ
  3. ウィザードからAndroid Projectを選ぶ
  4. 項目を入力する
    1. Project Name (eclipseのプロジェクト名、適当に): HelloWorldProject?
    2. Build Target (環境に合わせて): Android 2.2
    3. Application name (画面上部に表示されるアプリケーション名、適当に)  「Hello, Android!」
    4. Package name (配布するときのパッケージ名、ルールに従う。ここではとりあえず、): com.example.hello.android
    5. Create Activity: HelloWorld (このまま)
    6. Min SDK Version: 8 Android 2.2 level8 なので、
  5. 完了
  6. メニューの実行-実行構成を開く。
  7. Android Application を開く。
  8. 先ほど設定したproject name HelloAndroidProject を選択する。
  9. 適用を押す。
  10. 実行する。
    1. 何かしらエラーが出た場合は、いったんクリーンを選択するとよい。
  11. 画面上にアンドロイドのロゴの後に、以下の画面が表示されれば成功。
    1. 表示されない場合は、エミュレーターのmenuをクリックするとよい。 Hello World, Hello Android! の文字列はeclipseで自動生成される。別のアプリケーション名であれば、そのアプリケーション名が表示される。

6. Hello Worldを実機で動かす

  1. 実機のUSBデバッグにチェックを入れる。
  2. USB充電時のスリープを無効にする
  3. 不明な提供元にチェックを入れる。
  4. 実機をUSBでPCと接続する。
  5. eclipse で実行構成を選択する。
  6. ターゲットタブで手動を選択する。
  7. 実行を選択すると実機のシリアルなどが表示される。
  8. OKを選択すると、実機にHello Worldと表示される。

[Android] WebViewを使ったアプリ作成その4

特定のURL以外は標準ブラウザで開く方法. http://aquaman.cocolog-nifty.com/blog/2011/08/androidwebviewc.html を参考に,修正してみました.

package com.example.mywebview;

import android.net.Uri; import android.os.Bundle; import android.annotation.SuppressLint; import android.app.Activity; import android.content.Intent; import android.graphics.Bitmap; import android.view.KeyEvent; import android.view.Menu; import android.view.MenuItem; import android.view.Window; import android.webkit.WebView; import android.webkit.WebViewClient; import android.webkit.WebChromeClient; import android.webkit.GeolocationPermissions.Callback; import android.widget.Toast;

public class MainActivity extends Activity {

	public static final int MENU_SELECT_A = 0;
	public static final int MENU_SELECT_B = 1;
	public static final int MENU_SELECT_C = 2;
	private static WebView myWebView;
	@SuppressLint("SetJavaScriptEnabled")
	@Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       //タイトルバーを削除する
       requestWindowFeature(Window.FEATURE_NO_TITLE);
       setContentView(R.layout.activity_main);
     //レイアウトで指定したWebViewのIDを指定する。
      myWebView = (WebView)findViewById(R.id.webView1);
       //位置情報
       myWebView.setWebChromeClient(new WebChromeClient(){
           @Override
           public void onGeolocationPermissionsShowPrompt(
             String origin,
             Callback callback) {
             callback.invoke(origin, true, false);
           }
         });
       //リンクをタップしたときに標準ブラウザを起動させない
       myWebView.setWebViewClient(new myWebViewClient());
       //最初にYahoo! Japanスマホ版のページを表示する。
       myWebView.loadUrl("http://m.yahoo.co.jp/");
       //jacascriptを許可する
       myWebView.getSettings().setJavaScriptEnabled(true);
       //右側のスクロールバーの隙間をなくす
       myWebView.setVerticalScrollbarOverlay(true);
       //geolocationを許可する
       myWebView.getSettings().setGeolocationEnabled(true);
   }
	//バックキーが押されたもアプリを終了しない
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
	    if (keyCode == KeyEvent.KEYCODE_BACK) {
	        //WebView myWebView =(WebView)findViewById(R.id.webView1);
	        myWebView.goBack();
	        return true;
	    }
	    return super.onKeyDown(keyCode, event);
	}
   //オプションメニュー
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       //getMenuInflater().inflate(R.menu.activity_main, menu);
       menu.add(0, MENU_SELECT_A, 0, "再読込み");
       menu.add(0, MENU_SELECT_B, 0, "ヘルプ");
       menu.add(0, MENU_SELECT_C, 0, "終了");
   return true;
   }
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       //WebView myWebView =(WebView)findViewById(R.id.webView1);
       switch (item.getItemId()) {
       case MENU_SELECT_A:
       	//再読み込みボタンが押されたときの処理
       	 myWebView.reload();
       	return true;
       case MENU_SELECT_B:
           // 第3引数は、表示期間(LENGTH_SHORT、または、LENGTH_LONG)
           Toast.makeText(this, "簡易ブラウザβ版", Toast.LENGTH_LONG).show();
           return true;
       case MENU_SELECT_C:
       	//終了ボタンが押されたとき
       	myWebView.clearCache(true); // キャッシュのクリア
       	myWebView.clearHistory(); // 履歴のクリア
       	finish();
     }
       return false;
   }
   //Yahoo! Japan 以外のサイトへ接続するときは,標準ブラウザで開く
   public class myWebViewClient extends WebViewClient {
       public myWebViewClient() {
           super();
       }
       @Override
       public void onPageStarted(WebView view, String url, Bitmap favicon) {
           if(!url.startsWith("http://m.yahoo.co.jp/")) {
               myWebView.stopLoading();
               Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
               startActivity(i);
           }
       }
   }

}

 

[Android] WebViewを使ったアプリ作成その3

WebViewを使ったアプリ作成その1で作ったアプリに, 再読込み,ヘルプ,終了の オプションメニューを追加します.

public class MainActivity extends Activity { の次に以下を追加します.

 public static final int MENU_SELECT_A = 0;
	public static final int MENU_SELECT_B = 1;
	public static final int MENU_SELECT_C = 2;

次にメニューボタンを追加します.

   //オプションメニュー
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       //getMenuInflater().inflate(R.menu.activity_main, menu);
    
       menu.add(0, MENU_SELECT_A, 0, "再読込み");
       menu.add(0, MENU_SELECT_B, 0, "ヘルプ");
       menu.add(0, MENU_SELECT_C, 0, "終了");
       return true;
   }

次にメニューボタンが押されたときの動作を追加します。

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       WebView myWebView =(WebView)findViewById(R.id.webView1);
       switch (item.getItemId()) {
       case MENU_SELECT_A:
       	//再読み込みボタンが押されたときの処理
       	 myWebView.reload();
       	return true;
       case MENU_SELECT_B:
           Toast.makeText(this, "簡易ブラウザβ版", Toast.LENGTH_LONG).show();
           return true;
       case MENU_SELECT_C:
       	//終了ボタンが押されたとき
       	myWebView.clearCache(true); // キャッシュのクリア
       	myWebView.clearHistory(); // 履歴のクリア
       	finish();
     }
       return false;
   }

toast とMenuItemをインポートしています.

import android.view.MenuItem; import android.widget.Toast;

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

WebViewを使ったアプリ作成その1を少し改良します。

Javascriptを使う。

これをいれておかないと HTML5 と CSSでアプリは作れません [worried] ただし,Javascriptを有効にすると,XSSなどセキュリティの脆弱性があると警告文がでてきます.

Using setJavaScriptEnabled can introduce XSS vulnerabilities into you application, review carefully.

実験ということで,当面,@SuppressLint(“SetJavaScriptEnabled“)で警告文を出さないようにします.当然アプリを公開するときには十分注意しないといけません.

package com.example.mywebview;

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

public class MainActivity extends Activity {

	@SuppressLint("SetJavaScriptEnabled")
	@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/");
     //jacascriptを許可する
       myWebView.getSettings().setJavaScriptEnabled(true);
   }
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.activity_main, menu);
       return true;
   }

} }}

Yahoo! Japanのページで、Javascriptの警告文は出なくなったと思います。 webview21.jpg

横のスクロールバーの隙間をなくす

Android2.3などで、右側のスクロールバーの隙間をなくす。 webview22.jpg

myWebView.setVerticalScrollbarOverlay(true); }}

タイトルバーを消す

setContentView(R.layout.activity_main);の前に

webview23.jpg

       super.onCreate(savedInstanceState);
       //タイトルバーを削除する
       requestWindowFeature(Window.FEATURE_NO_TITLE);
       setContentView(R.layout.activity_main);

importに以下を追加する.

import android.view.Window;

 

backキーを押したときにアプリを終了させない

このままですと、backキーを押すとアプリは終了してしまいます。

   //バックキーが押されたもアプリを終了しない
   @Override
   public boolean onKeyDown(int keyCode, KeyEvent event) {
   	if (keyCode == KeyEvent.KEYCODE_BACK) {
           WebView webView =(WebView)findViewById(R.id.webView1);
           webView.goBack();
           return true;
       }
       return super.onKeyDown(keyCode, event);
   }

import に以下を追加する.

import android.view.KeyEvent;

アプリ名の変更

[value/strings.xml]を開く

app_name のValueを適当なアプリ名「例)簡易ブラウザ」に変更する.

[Android]google Maps Android API v2を使った地図の表示

google Maps Android API v1 が終了し、v2へ以降しなければならないので、とりあえずメモ。

Google Play servicesのインストール 

まず、eclipseから Android SDKを開き、extraにある、Google Play services をインストールする。

google Maps Android API v2 のAPIキーの取得 

C:\ユーザーに,androidのディレクトリがある。その中に、デバッグ用のキー debug.keysotoreがある。

このフィンガープリントを取得する。 コマンドプロンプトを開いて以下を実行

#cmd{{ C:\>cd C:\Program Files\Java\jdk1.8.0_05\bin C:\Program Files\Java\jdk1.8.0_05\bin>keytool.exe -list -v

-keystore "C:\Users\ユーザー名\.android\debug.keystore"
-alias androiddebugkey -storepass android -keypass android

}}

実行すると以下の画面が出てくる。

#cmd{{ 別名: androiddebugkey 作成日: 2014/04/23 エントリ・タイプ: PrivateKeyEntry? 証明書チェーンの長さ: 1 証明書[1]: 所有者: CN=Android Debug, O=Android, C=US 発行者: CN=Android Debug, O=Android, C=US シリアル番号: 428ec618 有効期間の開始日: Wed Apr 23 21:27:45 JST 2014終了日: Fri Apr 15 21:27:45 JST 20 44 証明書のフィンガプリント:

        MD5:  F8:??:..
        SHA1: EB:??:..
        SHA256: 2F:??:...
        署名アルゴリズム名: SHA256withRSA
        バージョン: 3

}}

このsha1 の内容をコピーする。

https://code.google.com/apis/console/ へ行く。 プロジェクトから google map android v2 をオンにする。 Create new Android key をクリックし、先ほどコピーした SHA1を貼り付けて その後に ;com.example.googlemapsv2 (プロジェクト名) を書いて、Createを押すとApiキーが得られる。

マニュフェストの変更

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

manifest xmlns:android=”http://schemas.android.com/apk/res/android
   package="com.example.googlemapsv2"
   android:versionCode="1"
   android:versionName="1.0" >
   <uses-sdk
       android:minSdkVersion="8"
       android:targetSdkVersion="18" />
   
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
   <uses-permission android:name="com.example.googlemapsv2.permission.MAPS_RECEIVE" />
   <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
  
   <uses-feature
       android:glEsVersion="0x00020000"
       android:required="true" />
   <application
       android:allowBackup="true"
       android:icon="@drawable/ic_launcher"
       android:label="@string/app_name"
       android:theme="@style/AppTheme" >
       
      <meta-data
           android:name="com.google.android.maps.v2.API_KEY"
           android:value="APIキー" />
       <activity
           android:name="com.example.googlemapsv2.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>

google Play services APIライブラリの参照。

  1. プロジェクトの新規から、既存のAndroid codeを選択し、Androidをクリックし、ライブラリをSDKの中にある google-play-services_libを選択する。 D:\adt\sdk\extras\google\google_play_services\libproject\google-play-services_lib
  2. プロジェクトのプロパティを開く
  3. ライブラリからさきほどのファイルを指定する。

activity_main.xmlの変更

  1. [res/layout/activity_main.xml]を開く

    ?xml version=”1.0″ encoding=”utf-8″?>

    fragment

     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/map"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:name="com.google.android.gms.maps.SupportMapFragment"/>

MainActivityの変更

  1. [MainActivity?.java]を開く。
  2. webView,WebViewClienet? をインポートする。

    import android.webkit.WebView?; import android.webkit.WebViewClient?; }} importの部分は、折りたたまれているので、+を押して展開するとよい。

  3. 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/");

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

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

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

/* 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が無効です」と表示されるはずです。 File not found: “webview05_0.jpg” at page “google Maps Android API v2を使った地図の表示”[添付]

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

プログラム

MainActivity?.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;
   }

}

[Android] 位置情報の取得

位置情報を取得する。

スマートフォンの GPSを利用して、位置情報を表示したいときは以下のようにする。

importに以下を追加

import android.webkit.WebChromeClient; import android.webkit.GeolocationPermissions.Callback; }}

WebView webView = (WebView)findViewById(R.id.webView1); の次の行に以下を追加

       //位置情報
       myWebView.setWebChromeClient(new WebChromeClient(){
           @Override
           public void onGeolocationPermissionsShowPrompt(
             String origin,
             Callback callback) {
             callback.invoke(origin, true, false);
           }
         });

 

それから

       //geolocationを許可する
       myWebView.getSettings().setGeolocationEnabled(true);

を追加する。

AndroidManifestの uses-permission でandroid.permission.ACCESS_FINE_LOCATION を許可する。

プログラム

package com.example.mywebview;

import android.os.Bundle; import android.annotation.SuppressLint?; import android.app.Activity; import android.view.KeyEvent?; import android.view.Menu; import android.view.Window; import android.webkit.WebView?; import android.webkit.WebViewClient?; import android.webkit.WebChromeClient?; import android.webkit.GeolocationPermissions?.Callback;

public class MainActivity? extends Activity {

	@SuppressLint("SetJavaScriptEnabled")
	@Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       //タイトルバーを削除する
       requestWindowFeature(Window.FEATURE_NO_TITLE);
       setContentView(R.layout.activity_main);
     //レイアウトで指定したWebViewのIDを指定する。
       WebView  myWebView = (WebView)findViewById(R.id.webView1);
       //位置情報
       myWebView.setWebChromeClient(new WebChromeClient(){
           @Override
           public void onGeolocationPermissionsShowPrompt(
             String origin,
             Callback callback) {
             callback.invoke(origin, true, false);
           }
         });
       //リンクをタップしたときに標準ブラウザを起動させない
       myWebView.setWebViewClient(new WebViewClient());
       //最初にYahoo! Japanのページを表示する。
       myWebView.loadUrl("http://www.yahoo.co.jp/");
       //jacascriptを許可する
       myWebView.getSettings().setJavaScriptEnabled(true);
       //右側のスクロールバーの隙間をなくす
       myWebView.setVerticalScrollbarOverlay(true);
       //geolocationを許可する
       myWebView.getSettings().setGeolocationEnabled(true);
   }
	//バックキーが押されてもアプリを終了しない
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
	    if (keyCode == KeyEvent.KEYCODE_BACK) {
	        WebView webView =(WebView)findViewById(R.id.webView1);
	        webView.goBack();
	        return true;
	    }
	    return super.onKeyDown(keyCode, event);
	}
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.activity_main, menu);
       return true;
   }

}

[Android] WebViewを使ったアプリ作成その1

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

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

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

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

WebViewで簡易ブラウザを作る

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

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

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

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

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

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と名付けられていることに注意。

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,WebViewCliene をインポートする。

    import android.webkit.WebView; import android.webkit.WebViewClient; }} importの部分は、折りたたまれているので、+を押して展開するとよい。

  3. 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/");

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

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

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

/* 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の中身は以下の通り

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;
   }

}

[Android] PhoneGap

PhoneGap は、HTML5 + CSS でウェブサイトのようにアプリを作成し、ネイティブのJava言語に変換してくれます。 また、PhoneGap を使うと、同一ソースからAndroidやiOSなどのネイティブアプリを作ることもできます。

上記の書籍は、良書ですが、あっという間に開発環境が変わってしまったので、メモとして残します。

プロジェクトの作成

  1. [ファイル]-[新規]-[Android Application Project]を開く。
  2. Application Name に適当な名前を入れる。
  3. Project Name, Package Name は自動で入力されるが、必要であれば、適宜変更する。
  4. Build SDKと Minimum Required SDK を選択する。
  5. [次へ]をクリックする。
  6. Launcher Iconはそのまま(必要であれば変更)で、[次へ]をクリックする。
  7. Create Activity はそのまま(必要であれば変更)で[次へ]をクリックする。
  8. Activity Name は必要であれば変更し[完了]をクリックする。

PhoneGapを使用するようにプロジェクトを設定する

  1. プロジェクト・エクスプローラーの[assets]を右クリックし、新規フォルダ[www]を作成する。
  2. HTML,CSS,Javascriptを駆使してアプリを作り、index.html, javascript css のファイル一式を、wwwにコピーする。
  3. http://archive.apache.org/dist/cordova/platforms/からcordova-android-2.9.0をダウンロードする。
  4. PhoneGapのAndroidフォルダを開き、以下をコピーする。
    1. cordova-android\framework\assets\www\cordova.jsを[assets/www]にコピーする。
    2. cordova-2.9.0.jarを[libs]にコピーする。
    3. [xml]フォルダを[res]にコピーする。
  5. index.htmlに、以下のコードを追加する。
    <script type="text/javascript" charset="utf8" src="cordova-2.9.0.js"></script>
  6. [lib/codeova-2.9.0.jar]を右クリックし、ビルド・パスを追加する。
  7. Activity クラスを更新する。
    1. import org.apache.cordova.DroidGap?; (変更)
    2. public class **** extends DroidGap? (変更 *** はアプリ名)
    3. setContentView?()をsuper.loadUrl(“file:///android_asset/www/index.html”)に変更。
  8. Manifestに以下を追加する。必要のないものは適宜削除。
    <supports-screens 
        android:largeScreens="true" 
        android:normalScreens="true" 
        android:smallScreens="true" 
        android:resizeable="true" 
        android:anyDensity="true" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission  android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
  9. activity に以下を追加する。 android:configChanges=”orientation|keyboardHidden”

PhoneGapの詳細 http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

cordova 3.5.1 以降について

なんかうまくいかないな http://www.auraline.co.jp/tech-lab/?p=284 http://cordova.apache.org/docs/ja/3.1.0/guide_platforms_android_upgrading.md.html

import org.apache.cordova.api.***

import org.apache.cordova.***

に変更

[Android] Android で Hello World

Hello World

  1. eclipseを開く
  2. [ファイル]-[新規]-[プロジェクト]を選ぶ
  3. ウィザードからAndroid アプリケーションプロジェクトを選ぶ
  4. 項目を入力する
    1. Application Name (アプリケーション名): Hello
    2. Project Name(プロジェクト名): Hello
    3. Package Name( (配布するときのパッケージ名、ルールに従う。ここではとりあえず、)):com.example.hello
    4. ターゲットSDK (環境に合わせて): API17: Android 4.2
    5. Mininum Required SDK:API 8: Android2.2 hello01.jpg
  5. 次へ
  6. ランチャーアイコンはそのまま次へ
  7. アクティビティの作成もそのまま次へ
  8. 新規ブランク・アクティビティーもそのまま次へ
  9. 完了ボタンを押す。
  1. 下のような画面になり、パッケージエクスプローラーに×印がなければ、エラーはない。 hello02.jpg
    1. 何かしらエラーが出た場合は、いったんクリーンを選択するとよい。
  2. [実行]-[実行構成]-[Androidアプリケーション]-[新規構成]を押す
  3. プロジェクトで「Hello」を選択する。
  4. 実行を押す。
  5. 以下の画面が表示されれば成功。 jdk9.jpg
    1. 表示されない場合は、エミュレーターのmenuをクリックするとよい。 Hello World, の文字列はeclipseで自動生成される。別のアプリケーション名であれば、そのアプリケーション名が表示される。

Hello Worldを実機で動かす

  1. 実機のUSBデバッグにチェックを入れる。
  2. USB充電時のスリープを無効にする
  3. 不明な提供元にチェックを入れる。
  4. 実機をUSBでPCと接続する。
  5. eclipse で実行構成を選択する。
  6. ターゲットタブで手動を選択する。
  7. 実行を選択すると実機のシリアルなどが表示される。 hello04.jpg
  8. OKを選択すると、実機にHello Worldと表示される。 hello05.jpg
    写真は、au HTC J butterfly HTL21