HTTP で直接通信すると手っ取り早いですが、いかんせん汎用性に欠けます。WebView を使うと途中のデバッグそのものが、他の開発に転用できそうなのでいいと思います。とにかく、いろいろ手順が満載です。
1) Android で入力した値を引数としてページに渡す
これは一番簡単です。javascript:以降に関数名を記述して、引数を文字列として埋め込んで loadUrl するだけです。
EditText et = (EditText) MainActivity.this.findViewById(R.id.editText);
String scode =((EditText) MainActivity.this.findViewById(R.id.editText)).getText().toString();
String callString = String.format("javascript:getWebPageData(\"%s\")",scode);
wv.loadUrl(callString);
※ API level 19 から evaluateJavascript が追加されています。こちらでは、JavaScript の戻り値を 非同期で UI スレッド上で得る事ができます
全体のソースコードはこちら
関連する記事
WebView で JavaScript にデータを渡したい時に注意する事
2) Webページでは、jQueryでサーバーから必要な値を取得
$.get("dbdata_json.php?scode="+scode,function( data ){
if ( typeof androidObject !== 'undefined' ) {
// サーバから受け取った application/json データ
// を文字列に変換して Android に渡します
androidObject.toAndroid(JSON.stringify(data));
}
else {
// 通常のブラウザではこちらが実行されます
console.log(JSON.stringify(data,null," "));
}
})
全体のソースコードはこちら
3) サーバーのPHPは、DBのデータをJSONで返す
$_GET["scode"] = str_replace("'","''",$_GET["scode"]);
$result = $connect->query("select * from 社員マスタ where 社員コード = '{$_GET["scode"]}'");
if ( !$result ) {
die('クエリーに誤りがあります : ' . $connect->error );
}
// 内容を書き込むファイルの準備
$log_file = "rowdata_002.json";
file_put_contents( $log_file,"" );
$check = false;
while ($row = $result->fetch_array($db_data_type)) {
$check = true;
print json_encode($row,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
print "\n";
// ファイルに追加出力
file_put_contents( $log_file, print_r(json_encode($row,$json_type)."\n",true), FILE_APPEND );
}
全体のソースコードはこちら
file_put_contents は、デバッグ用です。処理には直接必要ありません
4) WEBページは JSON の文字列を Android に送る
さて、ここが重要な Android 側のインターフェイスの定義が必要なところです。専用のクラスを作成して、Activity 内の変数を使いやすいように、インターフェイスを定義して処理を外に出しています
JavaScriptAccess クラス
package sample.lightbox.webbrowser;
import android.util.Log;
import android.webkit.JavascriptInterface;
/**
* Created by lightbox on 2015/09/24.
*/
public class JavaScriptAccess {
// Webページからデータを取得するイベント用
public interface OnGetWebDataListener {
abstract public void onWebGetDataListener( String textData );
}
private OnGetWebDataListener ogwdl = null;
public JavaScriptAccess( OnGetWebDataListener ogwdl ) {
this.ogwdl = ogwdl;
}
// Webページ上の JavaScript から、Android Studio の logcat に表示します
@JavascriptInterface
public void logcat(String message) {
Log.i("lightbox", message);
}
// コンストラクタで取得したインターフェイスのインスタンス内のメソッドを
// 呼び出して、Webページから取得したデータを渡します
@JavascriptInterface
public void toAndroid(String message) {
this.ogwdl.onWebGetDataListener(message);
}
}
この定義を使用しているのは、WebView の addJavascriptInterface メソッドですが、これによって、WEBページから Andrpod のこのクラスの内部で定義されたメソッドを実行可能になります。
全体のソースコード
WEBページから呼ばれると、onWebGetDataListener 内が実行されます
5) JSON文字列を Gson で Android 内のオブジェクトに変換
Syain というクラスを定義しておいて、Google Gson で gson.fromJson(textData,Syain.class) を実行してインスタンを取得します。
▼ Syain クラス
public class Syain {
String 社員コード;
String 氏名;
String フリガナ;
String 所属;
int 性別;
String 作成日;
String 更新日;
int 給与;
int 手当;
String 管理者;
String 生年月日;
}
日本語を使っているのは、テーブル定義が日本語なのでそのまま利用できるからです。(Google Gson を使用しますが、JSON 側の名前と一致したものがこちらにあれば良く、全てある必要はありませんし、JSON側に無いものがあってもかまいません)
※ compile 'com.google.code.gson:gson:x.x.x' を build.gradle に記述
6) UI スレッドへその値を送る
要するに画面に値をセットするだけですが、JavaScript のインターフェイスが別スレッドなので、runOnUiThread を使用します
try {
syain = gson.fromJson(textData,Syain.class);
// 別スレッドから UI スレッドへのアクセス
MainActivity.this.runOnUiThread(new Runnable() {
@Override
public void run() {
TextView tv = (TextView) MainActivity.this.findViewById(R.id.textView);
tv.setText(syain.氏名);
}
});
} catch (Exception e) {
e.printStackTrace();
}
全てのソースコード
dbdata_json.php は、データベースの部分なので、WEB上にも用意しました
(※ WEB上のソースコードはこちら)
実機でテストする場合必要なので、001.php も WEB上に用意しました
関連する記事
WebView で JavaScript にデータを渡したい時に注意する事
Android で WebView を使ってWEBにあるデータベースのデータを取得する為のクラス
JAVASCRIPT からデータを取得
(Android 側 : 行28〜行56)
JAVASCRIPT からデータを取得ボタンをクリックした結果です。取得するのは、一番下にある文字列で、WebView 内の テキストフィールドです。これは最も単純で、evaluateJavascript を使用して jQuery の文字列を直接渡してフィールドの結果を取得し、イベントで Android 内に戻って来ます。この文字列は ダブルクォート で挟まれているので、元の表示とダブルクォートを取り去った表示を同時に行っています。
JAVASCRIPT へデータを送る
単純に考えてしまうと、JavaScript の引数に文字列を指定すればいいですが、とても煩雑で問題が出そうです。ですから、データを用意した後、いったん『getAndroidUIData』を "request-02" のリクエストで呼び出して、『getAndroidUIData』 内から Android を呼び出す(getRequestData) 事によって、必要な文字列を JavaScript のメソッドの戻り値で取得するようにしています。
Android 側
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
