SQLの窓

2017年11月25日


C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (1)



まずプロジェクトですが、DXライブラリのダウンロードから、C# 用をダウンロードしてそのまま動作する場合はそれでもいいですが、Visual Studio の 2010 では動かないので普通にプロジェクトを Windows アプリケーションで作成します。

次に、bin の下の実行場所に DxLib.dll と DxLib_x64.dll と DxLibDotNet.dll をコピーして、DxLibDotNet.dll を参照すれば使えるようになります。



以下のソースコードに関しては、player.png が必要ですが、シューティングゲーム用ドット絵フリー素材よりダウンロードして作成しました。


(DxLib.dll と同じ場所に保存します)

こちらはクラス化した C# テンプレートです。プロジェクトをテンプレートで作成したら、DxLib.dll と DxLib_x64.dll と DxLibDotNet.dll と player.png をコピーして DxLibDotNet.dll を参照します


クラス化なしのベタコード

このコードで、自機が左矢印キーと右矢印キーで左右に移動します。
using DxLibDLL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace DX_001 {

	static class Program {

		[STAThread]
		static void Main() {

			// ウインドウモードで起動( コメントにするとフルスクリーン )
			DX.ChangeWindowMode(DX.TRUE);

			// スクリーンサイズ
			int screen_w = 800, screen_h = 600;
			DX.SetGraphMode(screen_w, screen_h, 32);

			// DXライブラリの初期化
			if (DX.DxLib_Init() < 0) {
				return;
			}

			// 描画先を裏画面に変更
			DX.SetDrawScreen(DX.DX_SCREEN_BACK);

			// 画像の読み込み
			int player = DX.LoadGraph("player.png");

			// 画像のサイズを取得
			int player_graph_w, player_graph_h;
			DX.GetGraphSize(player, out player_graph_w, out player_graph_h);

			// プレーヤーの初期位置
			int x = screen_w / 2 - player_graph_w / 2, y = screen_h - 70;

			int payer_move_offset = 5;

			// メインループ
			while (DX.ProcessMessage() != -1) {

				// ESC で終了
				if (DX.CheckHitKey(DX.KEY_INPUT_ESCAPE) == 1) {
					break;
				}

				// 右矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_RIGHT) == 1) {
					x += payer_move_offset;
					if (x + player_graph_w > screen_w) {
						x = screen_w - player_graph_w;
					}
				}
				// 左矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_LEFT) == 1) {
					x -= payer_move_offset;
					if (x < 0) {
						x = 0;
					}
				}
				// 上矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_UP) == 1) {
				}
				// 下矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_DOWN) == 1) {
				}
				// スペースキー
				if (DX.CheckHitKey(DX.KEY_INPUT_SPACE) == 1) {
				}

				// 画面をクリア
				DX.ClearDrawScreen();

				// プレイヤーを描画
				DX.DrawGraph(x, y, player, DX.TRUE);

				// 裏画面の内容を表画面に反映する
				DX.ScreenFlip();
			}

			// DXライブラリの後始末
			DX.DxLib_End();
		}
	}

}


このままいろいろ機能を実装して行くと、とてもメンテしにくいコードになるので、まずゲームの本体である初期化とメインループをクラス化し、メインループ用の start メソッドの引数の無名処理を呼び出すようにしました。

Game クラスを作成して使用
	static class Program {

		[STAThread]
		static void Main() {

			// メインゲームインスタンス作成
			Game game = new Game(800, 600);

			// 初期化
			game.init();

			// 画像の読み込み
			int player = DX.LoadGraph("player.png");

			// 画像のサイズを取得
			int player_graph_w, player_graph_h;
			DX.GetGraphSize(player, out player_graph_w, out player_graph_h);

			// プレーヤーの初期位置
			int x = game.screen_w / 2 - player_graph_w / 2, y = game.screen_h - 70;

			int payer_move_offset = 5;

			game.start(
				// *******************
				// 主処理
				// *******************
				(int counter) => {

					// 右矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_RIGHT) == 1) {
						x += payer_move_offset;
						if (x + player_graph_w > game.screen_w) {
							x = game.screen_w - player_graph_w;
						}
					}

					// 左矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_LEFT) == 1) {
						x -= payer_move_offset;
						if (x < 0) {
							x = 0;
						}
					}

				},
				// *******************
				// 描画処理
				// *******************
				() => {

					DX.DrawGraph(x, y, player, DX.TRUE);

				}

			);



		}
	}


Game クラス

public void start(main_action call, draw_action draw) として定義されているので、内側から call と draw を呼び出して呼び出し元のコードを実行させます。

こうする事によって、ループ処理の中をキー処理と描画処理を分けて解りやすく記述できるようになります。

呼び出し元は、ラムダ式で単純なブロックを作成して記述が可能です。
class Game {

	// 外部呼出し用
	public delegate void main_action(int counter);
	public delegate void draw_action();

	// メインループカウント
	private int loopCount = 0;

	// スクリーンサイズ
	public int screen_w;
	public int screen_h;

	// *******************
	// コンストラクタ
	// *******************
	public Game(int w, int h) {
		screen_w = w;
		screen_h = h;
	}

	// *******************
	// 初期化
	// *******************
	public void init() {

		// ウインドウモードで起動( コメントにするとフルスクリーン )
		DX.ChangeWindowMode(DX.TRUE);

		// スクリーンサイズ
		DX.SetGraphMode(screen_w, screen_h, 32);

		// DXライブラリの初期化
		if (DX.DxLib_Init() < 0) {
			return;
		}

		// 描画先を裏画面に変更
		DX.SetDrawScreen(DX.DX_SCREEN_BACK);

	}

	// *******************
	// メインループ開始
	// *******************
	public void start(main_action call, draw_action draw) {


		// メインループ
		while (DX.ProcessMessage() != -1) {

			// ESC で終了
			if (DX.CheckHitKey(DX.KEY_INPUT_ESCAPE) == 1) {
				break;
			}

			// 外部を呼び出し
			call(loopCount);
			loopCount++;
			if (loopCount > 100000) {
				loopCount = 0;
			}

			// 画面をクリア
			DX.ClearDrawScreen();

			// 外部を呼び出し(描画処理用)
			draw();

			// 裏画面の内容を表画面に反映する
			DX.ScreenFlip();

		}

		// DXライブラリの後始末
		DX.DxLib_End();

	}

}


関連する記事

C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (2)


【VS(C#)の最新記事】
posted by lightbox at 2017-11-25 22:07 | Comment(0) | VS(C#) | このブログの読者になる | 更新情報をチェックする

2017年11月18日


JavaScript : ブラウザ判定( IE11 対応 ) / edge を追加

2017-11-18 更新 : edge を追加
※ 前回投稿日 : 2014-10-02

▼ 運営中サイトのブラウザ比率



IE11 の登場で少し変わりました(IE11 を一意に識別することが必要な場合があります。 その場合は、Trident トークンを使ってください)

IEのシェアは大きいですが、実際問題として IE6、IE7、IE8、IE9、IE10 が存在します。IE 以外では Firefox と Google Chrome を少なくとも視野にいれる必要があります。( あと、Safari もあります )

そういえば、『Operaが独自路線を転換、ブラウザエンジンをWebKitに切り替え』 なんで、気苦労が少し減りますが、相変わらず IE は増える一方で・・・・

ちにみに、jQuery 1.9 では、$.browser は削除されています
<script>
function browser_name() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			alert("IE6");
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			alert("IE7");
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			alert("IE8");
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			alert("IE9");
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			alert("IE10");
		}
		else {
			alert("Unknown");
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		alert("IE11");
	}
	else if (userAgent.indexOf("edge") > -1) {
		alert("Edge");
	}
	else if (userAgent.indexOf("firefox") > -1) {
		alert("Firefox");
	}
	else if (userAgent.indexOf("opera") > -1) {
		alert("Opera");
	}
	else if (userAgent.indexOf("chrome") > -1) {
		alert("Google Chrome");
	}
	else if (userAgent.indexOf("safari") > -1) {
		alert("Safari");
	}
	else {
		alert("Unknown");
	}
}
</script>
<input type="button" value="表示" onclick="browser_name();">

関連する記事
prototype.js の Browser メソッドを転用して jQueryの名前空間へ投入。IE バージョンも含めてブラウザ(仕様)判定 String オブジェクトにメソッドとして実装 IE と それ以外の判定方法として "ie".browser() で判定できます。 ▼ 実際の実行


<script type="text/javascript">

String.prototype.browser = function() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var target = this.valueOf();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			return ( target == "ie6" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			return ( target == "ie7" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			return ( target == "ie8" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			return ( target == "ie9" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			return ( target == "ie10" || target == "ie" );
		}
		else {
			return false;
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		return ( target == "ie11" || target == "ie" );
	}
	else if (userAgent.indexOf("edge") > -1) {
		return ( target == "edge" );
	}
	else if (userAgent.indexOf("firefox") > -1) {
		return ( target == "firefox" );
	}
	else if (userAgent.indexOf("opera") > -1) {
		return ( target == "opera" );
	}
	else if (userAgent.indexOf("chrome") > -1) {
		return ( target == "chrome" );
	}
	else if (userAgent.indexOf("safari") > -1) {
		return ( target == "safari" );
	}
	else {
		return false;
	}
}
</script>
<select id="browser">
	<option value="chrome">chrome</oprion>
	<option value="firefox">firefox</oprion>
	<option value="opera">opera</oprion>
	<option value="safari">safari</oprion>
	<option value="edge">edge</oprion>
	<option value="ie11">ie11</oprion>
	<option value="ie10">ie10</oprion>
	<option value="ie9">ie9</oprion>
	<option value="ie8">ie8</oprion>
	<option value="ie7">ie7</oprion>
	<option value="ie6">ie6</oprion>
	<option value="ie">ie</oprion>
</select>
<input type=button
	value="ブラウザ判定"
	onclick='alert((document.getElementById("browser").value).browser())'>

jQuery の名前空間に登録
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.extend({
	browser_name: (function(){
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var browser_string = "unknown"

		if (userAgent.indexOf("msie") > -1) {
			if (appVersion.indexOf("msie 6.0") > -1) {
				browser_string = "IE6";
			}
			else if (appVersion.indexOf("msie 7.0") > -1) {
				browser_string = "IE7";
			}
			else if (appVersion.indexOf("msie 8.0") > -1) {
				browser_string = "IE8";
			}
			else if (appVersion.indexOf("msie 9.0") > -1) {
				browser_string = "IE9";
			}
			else if (appVersion.indexOf("msie 10.0") > -1) {
				browser_string = "IE10";
			}
		}
		else if (appVersion.indexOf("trident/7.0") > -1) {
			browser_string = "IE11";
		}
		else if (userAgent.indexOf("edge") > -1) {
			browser_string = "Edge";
		}
		else if (userAgent.indexOf("firefox") > -1) {
			browser_string = "Firefox";
		}
		else if (userAgent.indexOf("opera") > -1) {
			browser_string = "Opera";
		}
		else if (userAgent.indexOf("chrome") > -1) {
			browser_string = "Chrome";
		}
		else if (userAgent.indexOf("safari") > -1) {
			browser_string = "Safari";
		}
		return browser_string;

	})()
});

console.log($.browser_name);

</script>

▼ オリジナルコード
http://winofsql.jp/VA003334/infoboard.php?id=070828100942&mid=sjscript&pid=3


IE と それ以外だけの判定
<script type="text/javascript">

	var ie = window.navigator.appName.toLowerCase().indexOf("microsoft") > -1;
	ie |= window.navigator.userAgent.toLowerCase().indexOf("trident/7.0") > -1;
	if (ie) {
		// IE 用
		console.log("IE");
	}
	else {
		// IE 以外用
		console.log("IE以外");
	}

</script>





posted by lightbox at 2017-11-18 15:17 | JavaScript | このブログの読者になる | 更新情報をチェックする

Android : WebView 経由のデータベースアプリケーション



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にあるデータベースのデータを取得する為のクラス





posted by lightbox at 2017-11-18 14:46 | Comment(0) | 2 Android Studio | このブログの読者になる | 更新情報をチェックする

JavaScript から Android へアクセス

Android で、Google MAP を扱いたい場合、WebView 内で自分がホストしているページを扱うのがとても容易で便利です。しかし、そうした場合の一番の問題点は、WEBページと、Android とのデータのやり取りができないというところです。

しかし、Android 側の WebView の addJavascriptInterface メソッドでクラスを登録すると、そのクラスのメソッドが JavaScript から呼べるようになります。また、Android 側から JavaScript を呼び出す方法としても、WebView の loadUrl メソッドを使って loadUrl("javascript:コード") というように、ブックマークレットと同じ方法でアクセスできます。

Android の ドキュメントでは以下のようなコードが掲載されています( @JavascriptInterface に注意 / only public methods that are annotated with JavascriptInterface can be accessed from JavaScript )
class JsObject {
    @JavascriptInterface
    public String toString() { return "injectedObject"; }
 }
 webView.addJavascriptInterface(new JsObject(), "injectedObject");
 webView.loadData("", "text/html", null);
 webView.loadUrl("javascript:alert(injectedObject.toString())");
この例では、Android から Web ページの alert を呼び出して、その引数として Android 側のメソッドを与えています。結果的に、Android 側の "injectedObject" という文字列が、Webページ上の alert の結果として表示されます。
この内容は今もドキュメントにありますが、API level 19 から  evaluateJavascript が追加されています。こちらでは、JavaScript の戻り値を 非同期で UI スレッド上で得る事ができますので、こちらを使用したほうがいいでしょう。
以下はもう少し具体的なクラスを使った例、Webページ上のボタンで Android の intent を使用して画面遷移を行います。
package com.example.androidapp;

import android.content.Context;
import android.content.Intent;
import android.widget.Toast;

public class myWeb {
	Context mContext;

	myWeb(Context c) {
		mContext = c;
	}

	@JavascriptInterface
	public void showPostActivity(String message) {
		
		Intent intent = new Intent(mContext, PostActivity.class);
		intent.putExtra("message_text",message);
		
		// アクティビティの呼び出し
		mContext.startActivity(intent);
		
	}
}

このクラスを以下のようにして登録します
// ************************************************************
// WebView のイベントを処理する
// ************************************************************
webView = (WebView)findViewById(R.id.webView1);
webView.addJavascriptInterface(new myWeb(this), "MyWeb");
webView.setWebViewClient( new WebViewClient() {
		
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			Log.i("lightbox", url);
			return false;
		}

		// API level 24 以降ではこちら
		//public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
		//	Log.i("lightbox", url);
		//	return false;
		//}

	}
);		


最後にボタンで呼び出します( 緯度・経度を引き渡しています )
<input type="button" value="Android へアクセス" onclick="MyWeb.showPostActivity('-34.397, 150.644')">


関連する記事

WebView で JavaScript にデータを渡したい時に注意する事

Android で WebView を使ってWEBにあるデータベースのデータを取得する為のクラス



posted by lightbox at 2017-11-18 14:00 | Android | このブログの読者になる | 更新情報をチェックする

2017年11月17日


Android で WebView を使ってWEBにあるデータベースのデータを取得する為のクラス

WebView は非表示で良く、HTTP の機能のみ必要です。その為、最低限必要な機能を WebView を継承して実装しています

※ compile 'com.google.code.gson:gson:2.8.2' を使用

DataWebView.java
import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class DataWebView extends WebView {

	public DataWebView(Context context) {
		super(context);
		init();
	}
	public DataWebView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	public DataWebView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		init();
	}

	private void init(){
		// 編集モードの場合は処理を行わない
		if (isInEditMode()) {
			return ;
		}

		this.getSettings().setDomStorageEnabled(true);
		this.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
		this.getSettings().setJavaScriptEnabled(true);

		this.setWebViewClient(new WebViewClient() {

			@Override
			public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
				return false;
			}
		});

	}

}


Android と WebView 内の JavaScript とのインターフェイスです

JavaScriptAccess.java
import android.util.Log;
import android.webkit.JavascriptInterface;

public class JavaScriptAccess {

	// Webページからデータを取得するイベント用
	public interface OnGetWebDataListener {
		abstract public void onWebGetDataListener( String textData );
	}

	private OnGetWebDataListener ogwdl = null;

	public JavaScriptAccess( OnGetWebDataListener ogwdl ) {
		this.ogwdl = ogwdl;
	}

	@JavascriptInterface
	public void logcat(String message) {
		Log.i("lightbox", message);
	}

	@JavascriptInterface
	public void toAndroid(String message) {
		this.ogwdl.onWebGetDataListener(message);
	}

}


JavaScriptAccess によって(インターフェイス経由の onWebGetDataListener の呼び出し)、JavaScript から呼び出された時のイベントとして、こちら側で処理が可能になっています。

但し、非同期の処理の為、UI スレッドへは直接アクセスできないので、runOnUiThread を使用しています。

MainActivity での実装部分
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.google.gson.Gson;

public class MainActivity extends AppCompatActivity {

	private DataWebView dataWebView;
	private Gson gson;
	private Syain syain;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		gson = new Gson();
		dataWebView = (DataWebView) MainActivity.this.findViewById(R.id.webView);

		MainActivity.this.findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View view) {

				// 呼び出し( 後は、JavaScriptAccess のイベントで待つ )
				String callString = String.format("getWebPageData(\"%s\")", "0001");
				dataWebView.evaluateJavascript(callString,null);

			}
		});

		// JavaScript からの戻り
		dataWebView.addJavascriptInterface(new JavaScriptAccess(new JavaScriptAccess.OnGetWebDataListener() {
			@Override
			public void onWebGetDataListener(String textData) {

				syain = gson.fromJson(textData, Syain.class);
				MainActivity.this.runOnUiThread(new Runnable() {
					@Override
					public void run() {

						TextView textView1 = (TextView) MainActivity.this.findViewById(R.id.textView1);
						textView1.setText(syain.scode);

						TextView textView2 = (TextView) MainActivity.this.findViewById(R.id.textView2);
						textView2.setText(syain.kj);

					}
				});

			}
		}), "androidObject");

		dataWebView.loadUrl("http://winofsql.jp/002.php");
	}
}


画面定義
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="30sp"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="30sp"/>

    <com.example.lightbox.webviewtest.DataWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible"/>


</LinearLayout>


Syain クラス
public class Syain {

	public String scode;
	public String kj;
	public String furi;
	public String syozoku;
	public String seibetu;
	public String kyuyo;
	public String teate;
	public String kanri;
	public String birth;
	public String sname;

}


Web 側の定義( JavaScript / HTML )

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// **************************************
// Android から呼ばれる場合
// console.log は Android 側で表示
// **************************************
if ( typeof androidObject !== 'undefined' ) {
	window.console.log = function(message){
		androidObject.logcat(message);
	}
}

function getWebPageData(scode) {

	$("#param").val(scode);
	// ***************************************
	// Android WebView の中のこのページ
	// より、サーバへアクセスします
	// ***************************************
	$.get("dbdata2_json.php?scode="+scode,function( data ){
		$("#result").val(JSON.stringify(data));
		if ( typeof androidObject !== 'undefined' ) {
			// サーバから受け取った application/json データ
			// を文字列に変換して Android に渡します
			androidObject.toAndroid(JSON.stringify(data));
		}
		else {
			// 通常のブラウザではこちらが実行されます
			console.log(JSON.stringify(data,null,"   "));
		}
	})
}
function setWebPageData(sdata) {

	$("#param").val(sdata);
	// ***************************************
	// Android WebView の中のこのページ
	// より、サーバへアクセスします
	// ***************************************
	$.get("dbdata_update_json.php?sdata="+encodeURIComponent(sdata),function( data ){
		$("#result").val(JSON.stringify(data));
		if ( typeof androidObject !== 'undefined' ) {
			// サーバから受け取った application/json データ
			// を文字列に変換して Android に渡します
			androidObject.toAndroid(JSON.stringify(data));
		}
		else {
			// 通常のブラウザではこちらが実行されます
			console.log(JSON.stringify(data,null,"   "));
		}
	})
}
</script>
</head>
<body>
<pre>
<input type="button" value="logcat test" onclick="androidObject.logcat('OK')">

<input type="button" value="toAndroid test" onclick="getWebPageData('0001')">

<input type="button" value="toAndroid update" onclick='setWebPageData(&#39;{"birth":"2000/10/1","furi":"ウラオカ トモヤ","kj":"浦岡 友也","kyuyo":"270000","scode":"0001","seibetu":"0","sname":"営業部第三","syozoku":"0003","teate":"9000"}&#39;)'>

<a href="dbdata2_json.php?scode=0001">リンク</a>

<textarea id="param" style="width:100%;height:100px;"></textarea>
<textarea id="result" style="width:100%;height:100px;"></textarea>

</pre>
</body>
</html>


関連する記事

WebView で JavaScript にデータを渡したい時に注意する事




posted by lightbox at 2017-11-17 21:48 | Comment(0) | 2 Android Studio | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり