【Android】WebViewを使ってみた③ #JavaScript

はじめに

WebViewの技術を使って、AndroidのアプリでWebページを表示してみようと思います。
また、webページからAndroidのプログラムのメソッドを呼び出してみたり、Android側のページに戻ったりもしてみようと思います。
プログラムソースがちょっと多めなので、複数回に分けて投稿しようと思います。

第三回目はwebページ側の実装です。

計算画面（webページ）

計算画面のhtmlになります。
Cookieの処理は気にしないでください。
モバイルとPCで開いた際にAndroid側のメソッドを呼び出すボタンの表示制御に使用しています。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>sample</title>
	<meta charset="UTF-8">
	<script src="./test.js"></script>
	<style>
		.name-1 {
		outline:solid 4px red;
		}
	</style>
</head>
<body>
	<div>
		<input type="text" id="param_a" size="1" class="name-1">&emsp;+&emsp; 
		<input type="text" id="param_b" size="1" class="name-1">&emsp;=&emsp; 
		<input type="text" id="sumResult" size="1" class="name-1"></p>
	</div>
	<div>
		<input type="button" id="sum" value="計算" onclick="sum()">
	</div>
	<div>
		<input type="button" id="showMain" value="メイン画面に戻る" onclick="showMain()">
	</div>
	<script>
		if(getCookie() == 2){
    	console.log('getcookie');
    	document.getElementById("showMain").style.display ="none";
    	document.getElementById("sum").style.display ="none";
		}
	</script>
</body>
</html>

Android.sumとかAndroid.showMainがAndroid側のメソッドを呼び出している処理になります。

test.js

let url = new URL(window.location.href);
// URLSearchParamsオブジェクトを取得
let params = url.searchParams;

// クエリパラメータを取得する。
let type = params.get('type');
if(type == null){
    type = 2; // typeがnullの場合は、PC版を表示する。
}

if (navigator.cookieEnabled)  // cookieが使えるか確認
{
    document.cookie = "type=" + type;
    alert(document.cookie);
}

// メイン画面に移動（Android）
function showMain(){
    Android.showMain();
}

// 足し算（Android）
function sum(){
    let sumResult = Android.sum(Number(document.getElementById('param_a').value),Number(document.getElementById('param_b').value));
    console.log(document.getElementById('param_a').value);
    console.log(document.getElementById('param_b').value);
    console.log(sumResult);
    document.getElementById('sumResult').value = sumResult;
}

// Cookieを取得する。
function getCookieArray(){
    var arr = new Array();
    if(document.cookie != ''){
        var tmp = document.cookie.split('; ');
        for(var i=0;i<tmp.length;i++){
            var data = tmp[i].split('=');
            arr[data[0]] = decodeURIComponent(data[1]);
        }
    }
    return arr;
}

function getCookie(){
    var arr = getCookieArray();
    var value = arr['type'];

    return value;
}

以上

三回に分けて説明していきましたが、いかがでしょうか。
WebViewだとAndroidの修正が少ないので楽ですね。
Andoroid側のスキルが無くてもwebページの知識があればスマホアプリを作ることができます。
もしわからない部分がありましたら、質問OKです。

【Android】WebViewを使ってみた③

はじめに

計算画面（webページ）

関連リンク