素人のアンドロイドアプリ開発日記

web連携のコンテンツ

ブラウザ制作でjavaとjavascriptの連携

2011.04.11

web:Netbookにも広まるAndroidで、かつてないWeb体験を

を参考に勉強をさせていただきました。また、book;初めてのAndroid 第3版

で勉強をしております。

WebViewを使って通常のサイトを表示する事ができますが、jsのアラートの表示などは利用する事ができません。

また、独自のhtmlのページも表示をする事ができるのですが、htmlだけで完結できない場合には、html側からjavaを呼びだす事ができます。(表示はhtmlでバックグランドをjavaにするなどが可能です。)

まず、簡単なhtmlのファイルを用意します。

<html>
 <head>
 </head>
 <body>
 <p><a href="#" onclick="window.alert('javascript');">click1</a></p>
 <p><a href="#" onclick="window.android.AlertAndroid('call android')">click2</a></p>
 </body>
</html>

と言うファイルを作成してandroidのassetsフォルダの中にいれます。(srcなどど並列のところにディレクトリがあると思います。ない場合は作成してください。)

wView.loadUrl("file:///android_asset/index.html");

で表示ができます。このpath自体がandroidのassetsフォルダに通じていると考えればよいでしょう。

これで表示をさせると、エラーも出ませんが、アラートも出ません。

html

もともとalertはブラウザに実装されているアラートを表示しているものだったので、alertの代わりにToastを表示する仕様を作成してみましょう。

Toastについては、Toastを表示してみる。でおこなったように

Toast.makeText(this, "好きな文言", Toast.LENGTH_SHORT).show();

で表示ができます。

また、alertはWebChromeClientからonJsAlertと言う関数を利用して呼び出す事ができます。

wView.setWebChromeClient(new WebChromeClient(){
 @Override
 public boolean onJsAlert(final WebView view , final String url, final String message,JsResult result){
 Toast.makeText(WebJs.this, message, Toast.LENGTH_SHORT).show();
 result.confirm();
 return true;
 }
});

上記でalertで表示をするテキストをToastで表示をする事ができます。

html2

また、resultに関しては、アラート画面を閉じている事をブラウザに知らせる為にconfirm(OK),cancel(CANCEL)で閉じる必要があります。(閉じないと操作不可能です。)

また、同様にconfirm()も設定できます。ただし、この場合はconfirmとcancelで大きな違いが生じる場合があるので、ダイアログ等を開いて、OKとCANCELを取得する必要がありそうです。

sample

new AlertDialog.Builder(myApp)
.setTitle("confirm")
.setMessage(message)
 .setPositiveButton("OK",
 new DialogInterface.OnClickListener()
 {
 public void onClick(DialogInterface dialog, int which)
 {
 result.confirm();
 }
 })
 .setNegativeButton("CANCEL",
 new DialogInterface.OnClickListener()
 {
 public void onClick(DialogInterface dialog, int which)
 {
 result.cancel();
 }
 })
 .create()
 .show();

参考:http://stackoverflow.com/questions/2726377/how-to-handle-a-webview-dialog-popup

外部にonClickをおけると思いますが、今回は中に置いた方が明示的に分かりやすいかと思います。

その他のファンクションに関しては、大体を利用する事ができているかと思います。

 

では、次にjavascriptからjavaを呼び出す方法です。

webView.addJavascriptInterface(this, "android");

と記載をする事で、windowから呼び出す「android」をthisとみなして制御ができるようになります。

つまり

window.android.AlertAndroid('call android')

は、このクラス内のAlertAndroid(_str)クラスを呼び出す。という形で使用ができます。ただし、中身の引数に関してはfinalを用いる必要があります。

public void callAndroid(final String arg){
 Toast.makeText(this, arg, Toast.LENGTH_SHORT).show();
}

以上で、javascriptからjavaを呼び出す事ができました。

最後に、javaからjavascriptを呼び出すには、

webView.load("javascript:func('_str')");

とすると、html側で設定がしてあるファンクション(funcと言う名前のファンクション)を呼び出す事ができます。※ファンクション名は任意で大丈夫です。

以上です。

カテゴリー:web連携

think itの記事でブラウザを作ってみる。

2011.04.04

今回は、think itさんの記事を元に今までの復習を行いたいと思います。

記事は「簡易ブラウザの作成」です。(難易度的にちょうど良かったので。。)

第4回 簡易ブラウザの作成(その2)

第5回 簡易ブラウザの作成(その3)

ブラウザの作成に関しては、当ブログでも一度作成をしておりますが、さまざまな角度から作成をする事で新しい発見もあるかと思いまして、再度ブラウザの作成をしてみたいと思います。

第3回 までは、読み流しました。(設定や基本的な事だったので。。)

第4回 簡易ブラウザの作成(その2)

>今回はAbout画面を追加する作業を通して画面追加の仕方やメニューの操作方法について説明していきます。
前回は「閉じる」と「進む」「戻る」の実装だったので、about画面は作成してなかったです。

>AboutActivity.javaが新たに作成
と言う事なので、新しいActivityを作成してそこに移動をする形式で作成をしています。

移動のIntentに関しても次のように変更をする事が分かる。

Intent intentAboutActitvity = new Intent(this,AboutActivity.class);
startActivity(intentAboutActitvity);

>画面に戻るためには端末の戻るボタンを押すことになります。
一応移動先のアクティビティから、戻るには戻るボタンを押せばよい。となんとなく分かっていたのですが、やはりそうだったか。と思いました。

また、特に記載はなかったのですが、Intentの移動で戻る場合にトップを指定して戻ると、行き先が積み重なるって、戻る時に、再度同じ道をたどって戻る形になります。(home->about->home の場合 || 積み重なった場合には、homeで戻るを押すとaboutでアバウトで戻るで、homeとなる。)

 

AboutActivityの中に、ボタンを配置していた場合に、閉じるボタンを押した時にはfinish()が実行。で元のページに戻る。
つまり、finishn定義としては、「アプリケーションを終了」ではなく「アクティビティの終了」だった事がわかりました。

第5回 簡易ブラウザの作成(その3)

これも良くみると、「検索用のアクティビティ」を作成して、アクティビティ間でのデータのやり取りを行っています。

GoActivityを作成している。

intent.putExtra(THE_URL, edit.getText().toString());
setResult(RESULT_OK, intent);
finish()

と言う部分で、この終了に関して「結果を返す。」また、intentに関しては、(RESULT_OK)変数を返してこのアクティビティが終了する事がわかりました。

上記の場合に関して、ホームとなるアクティビティでは、次の関数が実行される。
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  //ハンドリング対象外のリクエストは無視
  if (requestCode != GO_MENU_ID) {
   return;
  }
  //OKで以外で戻ってきたら何もしない
  if (resultCode != RESULT_OK) {
   return;
  }
  //URLが入力されたと見なしロードする
  WebView webView = (WebView)findViewById(R.id.main_webview);
  webView.loadUrl(data.getStringExtra(GoActivity.THE_URL));
}

上記の実行で、

IntentからRESULT_OKの場合にはwebView.loadUrl();で文字列を読み込む→文字列を検索

と言う形で、検索を実行している。

戻るボタンを押す事によってはRESULT_CANCELなどの値が戻るので、その場合に誤反応が起きないようにRESULT_OKの場合だけに制限などをしている。

ブラウザの使い方と言うより、Intentの値の受け渡しについて掘り下げて理解する事ができました!

カテゴリー:web連携

webページを表示したい。ファイル一式

2011.03.31

webページを作成したいと思います。

webset

WEBページを表示したい。マニフェストの変更。

WEBページを表示したい。機能用関数。

上記だけでそこまでボリュームはないかと思うのですが、

今回はナビゲーションにmenuを利用して作成をしてみます。

メニュー用のアイコン一覧(ic_menu_)

アプリのメニューを作成する。

久しぶりすぎて、ファイルをコピーして中にいれるのを忘れてしまいました。※メニュー用アイコンを利用する時には、ファイルをコピーして利用します。

 

string.xmlは触りません。

次にmain.xmlです。

<?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/WebView01"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_weight="1">
 </WebView>
</LinearLayout>

ここではWebViewを設置します。他のViewと異なって、eclipseではコードヒントが出ませんでした(僕のだけ??)

ですが、上記をいれました。

次にメニュー用の関数として、menu.xmlを用意します。

<?xml version="1.0" encoding="utf-8"?>
<menu
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item 
 android:id="@+id/item1"
 android:title="戻る"
 android:icon="@*android:drawable/ic_menu_back"
 ></item>
 <item 
 android:id="@+id/item2"
 android:title="進む"
 android:icon="@*android:drawable/ic_menu_forward"
 ></item>
 <item 
 android:id="@+id/item3"
 android:title="閉じる"
 android:icon="@*android:drawable/ic_menu_close_clear_cancel"
 ></item>
</menu>

メニューこれでxmlができました。(上記で利用している画像に関しては、drawableファイルを作成してその中にいれています。)

Activiotyのクラスを次のようにします。

package in.andante.webPager;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;

public class WebPager extends Activity{
 
 private WebView webView;
 private EditText editText;
 
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 
 
 webView = (WebView)findViewById(R.id.WebView01);
 webView.setWebViewClient(new WebViewClient());
//拡大表示を行う為のクラス
 webView.getSettings().setBuiltInZoomControls(true);
//javascriptを行う為のクラス
 webView.getSettings().setJavaScriptEnabled(true);
 webView.loadUrl("http://www.google.com");
 
 }
 public boolean onCreateOptionsMenu(Menu menu){
 super.onCreateOptionsMenu(menu);
 getMenuInflater().inflate(R.menu.menu,menu);
 return true;
 }
 public boolean onPrepareOptionsMenu(Menu menu){
 super.onPrepareOptionsMenu(menu);
 if(webView.canGoBack()){
 menu.findItem(R.id.item1).setEnabled(true);
 }else{
 menu.findItem(R.id.item1).setEnabled(false);
 }
 if(webView.canGoForward()){
 menu.findItem(R.id.item2).setEnabled(true);
 }else{
 menu.findItem(R.id.item2).setEnabled(false);
 }
 return true;
 }
 public boolean onOptionsItemSelected(MenuItem item){
 switch(item.getItemId()){
 case R.id.item1:
 webView.goBack();
 break;
 case R.id.item2:
 webView.goForward();
 break;
 case R.id.item3:
 finish();
 break;
 default:
 break;
 }
 return super.onOptionsItemSelected(item);
 }

}

以上で完成です。

また、ページが表示されない場合はマニフェストに関しては、下記のようになっている事を確認してください。

WebPager Manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="in.andante.webPager"
 android:versionCode="1"
 android:versionName="1.0">
 <uses-sdk android:minSdkVersion="7" />
 <uses-permission android:name="android.permission.INTERNET"></uses-permission>

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

以上で完成です。拡大なども対応したwebブラウザの作成ができました。

カテゴリー:web連携

WEBページを表示したい。機能用関数。

2011.03.31

今回利用する為には、webViewを利用する。

webViewを利用する時には、WebViewClientを用意する必要がある。

WebViewClientを登録したら、urlを読み込む事ができる。

WebView webView = new WebView();
webView.setWebChromeClient(new WebViewClient());
webView.loadUrl("http://www.google.com");

これでwebViewが完成した。このままでも通常のクリックなどは反応するが、いくつかの関数を紹介いたします。

//「戻る」が可能かどうか(return Boolean)
webView.canGoBack();
//「戻る」
webView.goBack();
//「進む」が可能かどうか(return Boolean)
webView.canGoForward();
//「進む」
webView.goForward();
//更新する
webView.reload();
//読み込み中止
webView.stopLoading();

以上をボタンなどに割り当てる事で簡単にwebViewアプリができる。

つづく

カテゴリー:web連携

WEBページを表示したい。マニフェストの変更。

2011.03.31

androidでwebページを表示させるには、ユーザーに認証の際にwebページを読み込む機能を使用する事を宣言しておく必要があります。

この機能をマニフェストと言います。

今回対象のマニフェストは次になります。

android.permission.INTERNET

 

アクセスを行う事に対してユーザーの情報を必要としたりする場合には、マニフェストを宣言しておく必要があるようです。

マニフェストの設定はAndroidManifest.xmlで設定を行います。

このxmlファイルに関しては、eclipseを用いて、新規作成でandroid projectを作成すると自動で生成がされているかと思います。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="in.andante.webPager"
 android:versionCode="1"
 android:versionName="1.0">
 <uses-sdk android:minSdkVersion="7" />
 <uses-permission android:name="android.permission.INTERNET"></uses-permission>

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

以上の形です。uses-permissionの部分が追加の分です。

この行の追加が準備には必要になります。

つづく

 

カテゴリー:web連携

公開中のアプリ、是非ダウンロードしてみてください

2chまとめのたね

RSSを利用してさまざまなブログの情報をキュレーションしてくれるアプリ

インストールする

ひらがな戦記

OPENGL ES2 を利用したカルタのソーシャルゲーム

インストールする