engine/design/task/UI_WebView – PlaygroundOSS

UI_WebView (2013/02/21現在 Windowsでの動作はしないです) ¶

   <task pointer> = UI_WebView( <parent pointer>, <mode>, <x>, <y>, <width>, <height>, <url>, "<callback>" )

   function <callback>( <task pointer>, <type>, <argument string> )
     -- <task pointer>          呼び出し元 UI_WebView タスクのポインタ
     -- <type>                      呼び出し理由
     -- <argument string>　通知に必要な文字列
   end

引数 ¶

<parent pointer> 親UIのポインタ
<mode> ページ遷移の許可/禁止
<x>, <y> 表示座標
<width>, <height> 表示領域のサイズ
<url> 初期表示状態のURL
<callback> WebViewのイベントコールバック

戻り値 ¶

<task pointer> 生成された UI_WebView タスクのポインタ

コールバック引数 ¶

<task pointer> コールバックを呼び出した UI_WebView のポインタ
<type> コールバック理由。
- WEBVIEW_LOCALLINK スクリプトへの通知。<argument string>がWebView上で踏まれたリンクの値になる
- WEBVIEW_DIDSTARTLOAD Webのロードが開始された。<argument string> は空になる。
- WEBVIEW_DIDENDLOAD Webのロードが終了した。<argument string> は空になる。
- WEBVIEW_FAILEDLOAD Webのロードが失敗した。<argument string> は空になる。
<argument string> WebSite 中のリンクから与えられた識別用文字列

解説 ¶

画面の一部に簡易ブラウザを表示する。用途によって他ページへの遷移を禁止できる。

また、表示したWebPage中のリンクやボタンから特定のJavaScript呼び出しを行うことで、 <callback>で指定されたコールバック関数を呼び出し、JavaScriptの引数として与えられた文字列を受け取ることができる。

コマンド ¶

UI_WEBVIEW_SETURL

表示するURLを指定する

UI_WEBVIEW_SETURL

   pWeb = UI_WebView(...)
   sysCommand(pWeb, UI_WEBVIEW_SETURL, "<url>")

UI_WEBVIEW_GETURL

現在表示しているURL文字列を取得する

UI_WEBVIEW_GETURL

   pWeb = UI_WebView(...)
   <url> = sysCommand(pWeb, UI_WEBVIEW_GETURL)

UI_WEBVIEW_SCALESPAGETOFIT

OSによって表示されるWebView の scalesPageToFit フラグを指定する。現時点ではiOS限定であり、対応していない環境では無視される。

   pWeb = UI_WebView(...)
   <url> = sysCommand(pWeb, UI_WEBVIEW_SCALESPAGETOFIT, <scalesPageToFit-value>

   <scalesPageToFit-value> true で YES / false で NO

UI_WEBVIEW_SETBGCOLOR

背景色を指定します。

   pWeb = UI_WebView(...)
   sysCommand(pWeb, UI_WEBVIEW_SETBGCOLOR, <alpha>, <rgb>)

   <alpha> 0x00 ～ 0xff までのアルファ値
   <rgb> 0x000000 ～ 0xffffff までのRGBカラー値

UI_WebView向けサイトの実装 ¶

UI_WebView向けのサイトでは、ページ遷移せずにLua中のコールバック関数を呼ぶリンクを作ることができます。

簡単なサンプルを書くと、下記のようになります。

HTML側(XHTML1.1による例)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"]
               "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<meta name="language" content="jp" />

		<script type="text/javascript" src="./webview.js" />

		<title>JavaScript Test</title>
	</head>

	<body>
	<div>
	<h1>テスト</h1>
	<ul>
	<li><a onclick="eng.cmd('campaign')">呼び出しリンク(test:campaign)</a></li>
	<li><a onclick="eng.cmd('shop')">呼び出しリンク(test:shop)</a></li>
	<li><a onclick="eng.cmd('special')">呼び出しリンク(test:special)</a></li>
	</ul>
	</div>
	</body>
</html>

webview.js

// UserAgentを取得
var strUA = "";
strUA = navigator.userAgent.toLowerCase();

// UserAgent に iphone または ipad が含まれたら、iOSデバイス
var iOSclient = false;
if(strUA.indexOf("iphone") >= 0) iOSclient = true;
if(strUA.indexOf("ipad") >= 0) iOSclient = true;

// iOSデバイスの場合は、Androidによって定義されるインタフェースクラスと同名のメソッドを持つ
// 簡易インタフェースクラスを実装する。
if(iOSclient) {
	var engineIF = function() {};
	engineIF.prototype.cmd = function(keyString) {
		location.href = "native://" + keyString;
	};
	var eng = new engineIF();
}

webview.js を読み込んだ後は、iOS,Android共にHTML中で eng.cmd('<argument string>') を呼ぶことで、そのページを表示しているUI_WebViewに指定された<callback>を呼び、<argument string>を渡すことができるようになります。

eng インスタンスは、iOSでは webview.js 中で生成され、AndroidではEngine側でWebView表示の際にJavaScript Interfaceとして生成されます。どちらも cmd(String) メソッドを持ち、同じ呼び出し記述で<callback>を呼び出すことができます。