Android Bind : WevView + Gson + PHP

Android Bind : WevView + Gson + PHP

日時： 2015/10/17 09:34
名前： lightbox

build.gradle (プロジェクト)
拡張子:buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.0'
        classpath 'com.android.databinding:dataBinder:1.0-rc1'
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}


※ Android Studio 1.4
※ 実機 Abdroid 4.4.4

build.gradle (モジュール)
先頭に apply plugin を追加します

apply plugin: 'com.android.application'
apply plugin: 'com.android.databinding'


Google Gson
https://github.com/google/gson

app\libs に jarをダウンロードして、プロジェクトツリーより jar を右クリックして、Add As Library を実行します




※ app はプロジェクトの初期モジュール名で、Refactor で変更できます
※ Add As Library が見当たらない場合は、Open Module Settings の dependencies タブで追加します



※ build.gradle に直接追加してもかまいません

build.gradle (app) の該当部分
拡張子:dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile files('libs/gson-2.4.jar')
}


全体
拡張子:apply plugin: 'com.android.application'
apply plugin: 'com.android.databinding'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.0"

    defaultConfig {
        applicationId "sample.lightbox.androidbind1017"
        minSdkVersion 19
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile files('libs/gson-2.4.jar')
}


AndroidManifest.xml
拡張子:<uses-permission android:name="android.permission.INTERNET"/>

※ WebView に必要なので追加します

データ取得用 WEBリソース( JSON 取得用) ( No.1 )

日時： 2015/10/17 09:43
名前： lightbox

http://winofsql.jp/001.php
拡張子:<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function getWebPageData(scode) {
	// ***************************************
	// Android WebView の中のこのページ
	// より、サーバへアクセスします
	// ***************************************
	$.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,"   "));
		}
	})
}
</script>
</head>
<body>
<pre>
<?php
// Android の呼び出しテスト
?>
<input type="button" value="logcat test" onclick="androidObject.logcat('OK')">

<?php
// サーバからのデータで Android の呼び出しテスト
?>
<input type="button" value="toAndroid test" onclick="getWebPageData('0001')">

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


http://winofsql.jp/dbdata_json.php
拡張子:<?php
header( "Content-Type: application/json; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );
header( "Access-Control-Allow-Origin: *" );

$server = 'サーバー';
$db_name = 'データベース';
$user = 'ユーザ';
$password = 'パスワード';

$json_type =  JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT;
$db_data_type = MYSQLI_ASSOC;

// 接続
$connect = new mysqli($server, $user, $password, $db_name);
if ($connect->connect_error) {
	die('Connect Error (' . $connect->connect_errno . ') '
	. $connect->connect_error);
}
$connect->set_charset("utf8"); 

$_GET["scode"] = str_replace("'","''",$_GET["scode"]);

$query = <<< QUERY
select 社員マスタ.*,コード名称マスタ.名称 as sname from 社員マスタ
left outer join コード名称マスタ

on 社員マスタ.所属 = コード名称マスタ.コード

where コード名称マスタ.区分 = 2	
and 社員コード = '{$_GET["scode"]}'
QUERY;

// クエリ
$result = $connect->query($query); 
if ( !$result ) {
	die('クエリーに誤りがあります : ' . $connect->error );
}

$check = false;
while ($row = $result->fetch_array($db_data_type)) {

	$check = true;
	print json_encode($row,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
	print "\n";

}

// 開放
$result->close();
// 接続解除
$connect->close();

if (!$check) {
	print <<< ERROR
{
    "社員コード": "{$_GET["scode"]}",
    "氏名": "ERROR",
    "フリガナ": null,
    "所属": null,
    "性別": null,
    "作成日": null,
    "更新日": null,
    "給与": null,
    "手当": null,
    "管理者": null,
    "sname" : null
}	
ERROR;
}

?>

JavaScriptAccess : Webページとの橋渡しをするクラス ( No.2 )

日時： 2015/10/17 09:46
名前： lightbox

拡張子: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;
	}

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


}

単純バインド用 Syain クラス ( No.3 )

日時： 2015/10/17 09:54
名前： lightbox

getter setter があるのは、画面定義内に日本語が使用できないからです。全て英数字の変数が使えるのであれば、単純バインド( データを一回だけセットして全て表示させる )では必要ありません。

しかし、後から個別の変数にデータをセットして画面に反映させたい場合は、getter setter が必要で、追加の定義も必要です


拡張子:public class Syain {

	public Syain() {
		this.氏名 = "";
		this.フリガナ = "";
	}

	String 社員コード;

	public String getShimei() {
		return 氏名;
	}
	public void setShimei(String shimei) {
		this.氏名 = shimei;
	}
	public String getFuri() {
		return フリガナ;
	}
	public void setFuri(String furi) {
		this.フリガナ = furi;
	}

	public String getSyozoku() {
		return 所属;
	}
	public void setSyozoku(String syozoku) {
		this.所属 = syozoku;
	}

	public String sname;

	public String 氏名;
	public String フリガナ;
	public String 所属;
	public int 性別;
	public String 作成日;
	public String 更新日;
	public int 給与;
	public int 手当;
	public String 管理者;
	public String 生年月日;
}

MainActivity ( No.4 )

日時： 2015/10/17 11:05
名前： lightbox

拡張子:public class MainActivity extends AppCompatActivity {

	// *************************************************
	// 変数定義
	// *************************************************
	// WebView のインスタンス
	private WebView wv = null;
	// 表示されているページの URL
	private String startPage = null;
	// 初期表示ページ
	private String initPage = "http://winofsql.jp/001.php";

	private Gson gson = null;
	private Syain syain = null;
	private Handler handler = null;

	// *************************************************
	// 画面定義から自動作成されるクラス
	// ※ 名称は、xml のファイル名から作成されています
	// *************************************************
	private ActivityMainBinding binding = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);


		// *************************************************
		// 初期画面表示
		// *************************************************
		binding = DataBindingUtil.setContentView(MainActivity.this, R.layout.activity_main);

		// 初回バインド
		syain = new Syain();
		binding.setUser(syain);


		// Webページの JavaScript の呼び出し
		MainActivity.this.findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				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);
			}
		});

		// *************************************************
		// 主要インスタンス
		// *************************************************
		handler = new Handler();
		gson = new Gson();

		// *************************************************
		// WebView の目的ページ表示
		// *************************************************
		wv = (WebView) MainActivity.this.findViewById(R.id.webView);
		// 目的のページを表示する
		wv.loadUrl(initPage);

		// *************************************************
		// WebView の準備 ( 開始 )
		// *************************************************
		// Webページとのインターフェイスを登録します
		// Webページ上からは、androidObject.toAndroid で呼ぶ事ができます
		// (toAndroid は、@JavascriptInterface で登録したメソッド)
		wv.addJavascriptInterface(new JavaScriptAccess(new JavaScriptAccess.OnGetWebDataListener() {
			@Override
			public void onWebGetDataListener(String textData) {

				try {
					syain = gson.fromJson(textData, Syain.class);

					// 別スレッドから UI スレッドへのアクセス
					handler.post(new Runnable() {
						@Override
						public void run() {

							// *************************************
							// 画面表示
							// *************************************
							binding.setUser(syain);

						}
					});

				} catch (Exception e) {
					e.printStackTrace();
				}

			}
		}), "androidObject");

		// 必ず必要な JavaScript を有効にする設定
		wv.getSettings().setJavaScriptEnabled(true);
		// 必ず必要な設定
		wv.setWebViewClient(new WebViewClient() {

			// 必ず必要な設定 : 常に WebView 内でページを表示する為
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				Log.i("lightbox", "shouldOverrideUrlLoading" + url);
				return super.shouldOverrideUrlLoading(view, url);
			}

			// オプション : 表示されたページの URL を変数にセット
			@Override
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				super.onPageStarted(view, url, favicon);

				Log.i("lightbox", "onPageStarted:" + url);
				startPage = url;

			}

			// オプション : ページを表示し終わってから発生するイベント
			@Override
			public void onPageFinished(WebView view, String url) {
				super.onPageFinished(view, url);

			}
		});
		// *************************************************
		// WebView の準備 ( 終わり )
		// *************************************************

	}

	@Override
	protected void onStop() {
		super.onStop();
		wv.clearHistory();
		wv.clearCache(true);

		Log.i("lightbox", "onStop");

	}

}

画面定義 ( No.5 )

日時： 2015/10/17 10:43
名前： lightbox



拡張子:<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity">

    <data>

        <variable
            name="user"
            type="sample.lightbox.androidbind1017.Syain"/>
    </data>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/scrollView">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/action">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="CHECK"
                    android:id="@+id/button"
                    android:layout_alignParentEnd="true"
                    android:layout_weight="1"/>

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="JS CALL"
                    android:id="@+id/button2"
                    android:layout_weight="1"/>
            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/dataBody">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="number"
                    android:id="@+id/editText"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@{user.shimei}"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:id="@+id/textView"
                    android:layout_margin="4dp"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@{user.furi}"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:id="@+id/textView2"
                    android:layout_margin="4dp"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@{user.syozoku}"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:id="@+id/textView3"
                    android:layout_margin="4dp"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@{user.sname}"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:id="@+id/textView4"
                    android:layout_margin="4dp"/>

            </LinearLayout>



            <WebView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:id="@+id/webView"
                android:visibility="visible"/>

        </LinearLayout>
    </ScrollView>
</layout>

プライバシーポリシー