東芝から発売されているFlashAirを用いた開発を行う人々向けのまとめwikiです。※本wikiは東芝及びフィックスターズ、キオクシアとは何の関係もありません。お問合わせは管理者へお願いします。

×

Lua:HTMLとの連携編集する

最終更新： gps_nmea gps_nmea 2017年09月17日(日) 21:00:21履歴

概要

CGIとしてのLuaスクリプトの利用の仕方を幾つか上げてみます。

ライセンス

WTFPL

HTMLを吐く 

print("HTTP/1.1 200 OK")
print("")
print("<HTML><b>Hello World</b></HTML>")


データを渡してみる

http://flashair/script.lua?abcd
のように、スクリプト名の後に?で文字列を連結すると、引数として渡されます。
arg[0]でスクリプトのパスを
arg[1]で引数を取得することができます。
%20(空白)で区切るとarg[2]、arg[3]と増えていきます。
※引数は末端に改行がくっつきます。
print("HTTP/1.1 200 OK")
print("")
print("<HTML>")
print("Script:",arg[0],"<br>")
print("<b>Value1:",arg[1],"</b><br>")
print("<b>Value2:",arg[2],"</b><br>")
print("<b>Value3:",arg[3],"</b><br>")
print("</HTML>")


リンクでデータを渡してみる

リンクで決まったメニューを用意してもOKです
print("HTTP/1.1 200 OK")
print("")
print("<HTML>")
print("<a href='/FTLE/run.lua?hello'>send hello</a><br>")
print("<a href='/FTLE/run.lua?world'>send world</a><br>")
print("<a href='/FTLE/run.lua?hello world !'>send hello world !</a><br>")
print("Script:",arg[0],"<br>")
print("<b>Value1:",arg[1],"</b><br>")
print("<b>Value2:",arg[2],"</b><br>")
print("<b>Value3:",arg[3],"</b><br>")
print("</HTML>")


リンクでデータを渡してみる(別ファイル)

HTMLから呼び出してもOKです。
/test.htm
<HTML>
<a href='/FTLE/run.lua?hello'>send hello</a><br>
<a href='/FTLE/run.lua?world'>send world</a><br>
<a href='/FTLE/run.lua?hello world !'>send hello world !</a><br>
</HTML>

/FTLE/run.lua
print("HTTP/1.1 200 OK")
print("")
print("<HTML>")
print("Script:",arg[0],"<br>")
print("<b>Value1:",arg[1],"</b><br>")
print("<b>Value2:",arg[2],"</b><br>")
print("<b>Value3:",arg[3],"</b><br>")
print("</HTML>")

リンクでデータを渡してみる&別のページにふっとばす

301や303応答を使うと、別のページに飛ばすことができます。
電子工作等の用途なら、即座に戻ってもアリですね。

※引数は末端に改行がくっつきます。
/test.htm
<HTML>
<a href='/FTLE/run.lua'>go example</a><br>
<a href='/FTLE/run.lua?google'>go google</a><br>
<a href='/FTLE/run.lua?yahoo'>go yahoo</a><br>
</HTML>

/FTLE/run.lua
url="http://example.com/"
if(arg[1]=="google\n")then
  url="http://www.google.com"
end
if(arg[1]=="yahoo\n")then
  url="http://www.yahoo.co.jp/"
end

print "HTTP/1.1 301 Moved Permanently"
print "Pragma: no-cache"
print("Location: "..url)
print("")

入力フォームを用意してみる

入力フォームで自分自身に送信するようにしてもOKです。
ただし、送信内容に空白(%20)が含まれると分割されるのでご注意を。
print("HTTP/1.1 200 OK")
print("")
print([[<!DOCTYPE html>
  <form action="/FTLE/run.lua" method="get">
  Message:<input type="text" name="msg" value="HelloWorld" size="20" />
  <input type="submit" name="submit" value="submit" /></p>
  </form>]])
print("Script:",arg[0],"<br>")
print("<b>Value1:",arg[1],"</b><br>")
print("<b>Value2:",arg[2],"</b><br>")
print("<b>Value3:",arg[3],"</b><br>")
print("</HTML>")

javascriptで非同期取得

画面の処理を継続しながら、裏でLuaスクリプトを操作するためには、
XMLHttpRequestを使って操作するのがもっとも手っ取り早くできます。
ただし、非同期通信になるのでちょっと気にすることが増えます。



/test.htm
<HTML>
<input type="button" value="Get message" onclick="getmsg()">
<div id="res">Respons</div>
<script>
function getmsg()
{
	document.getElementById( "res" ).innerHTML = "Wait...";

	var xhr = new XMLHttpRequest();
	xhr.open("GET", "/FTLE/run.lua");
	xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jan 1970 00:00:00 GMT"); //キャッシュさせないため
	xhr.timeout=3000; //通信失敗時は3秒でタイム・アウトするように
	xhr.onload = function(){
		if (xhr.status == 200) {
			document.getElementById( "res" ).innerHTML = xhr.responseText;
		}else {
			document.getElementById( "res" ).innerHTML = "Error! " + xhr.status;
		}
	};
	xhr.onerror = function(){document.getElementById( "res" ).innerHTML = "Error!"};
	xhr.send();
}
</script>
</HTML>

/FTLE/run.lua
print("HTTP/1.1 200 OK")
print("")
print("Hello World!")
sleep(1000) --わざと待ち時間を入れてみる(非同期通信の利点がわかる)

javascriptからデータを渡す

データを渡してみましょう



/test.htm
<HTML>
Message:<input type="text" id="data" value="HelloWorld" size="20" />
<input type="button" value="Get message" onclick="getmsg()">
<div id="res">Respons</div>
<script>
function getmsg()
{
	var dat = document.getElementById( "data" ).value;
	document.getElementById( "res" ).innerHTML = "Wait...";

	var xhr = new XMLHttpRequest();
	xhr.open("GET", "/FTLE/run.lua?"+dat);
	xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jan 1970 00:00:00 GMT"); //キャッシュさせないため
	xhr.timeout=3000; //通信失敗時は3秒でタイム・アウトするように
	xhr.onload = function(){
		if (xhr.status == 200) {
			document.getElementById( "res" ).innerHTML = xhr.responseText;
		}else {
			document.getElementById( "res" ).innerHTML = "Error! " + xhr.status;
		}
	};
	xhr.onerror = function(){document.getElementById( "res" ).innerHTML = "Error!"};
	xhr.send();
}
</script>
</HTML>

/FTLE/run.lua
print("HTTP/1.1 200 OK")
print("")
print("Data get: "..arg[1])
sleep(1000) --わざと待ち時間を入れてみる(非同期通信の利点がわかる)

javascriptからデータを渡す(jquery版)

jqueryで書き直してみました。
上と全く同じ動作をしますが、よりシンプルに書けますね。
FTLE ver1.06(2017/09/15更新)から内蔵したjqueryを当てにして動作していますが、ご自身で配置されても問題ありません。

/test.htm
<!DOCTYPE html>
	<head>
		<title>Ajax Test</title>
		<!--- FTLE ver1.06以降に標準内蔵のjqueryを呼び出す --->
		<script type="text/javascript" src="/SD_WLAN/jquery-3.2.1.min.js"></script>
	</head>
	<body>
		<input type="text" id="send_text_id" value="HelloWorld">
		<input type="button" id="button_id" value="Get message">
		<div id="response_div_id">
			Respons
		</div>
	</body>

	<script>
		"use strict"; //厳格なチェックを有効にする
		
		//HTTPアクセスの設定を行います
		$.ajaxSetup({
			cache: false,	//キャッシュ禁止
			timeout: 10000	//10秒でタイムアウト。0で無効。単位はms
		});
		
		//id=button_idのボタンがクリックされたとき実行する
		//値が変わったときの場合は.changeを使う
		$("#button_id").click(function(e) {
			//表示を変える
			$("#response_div_id").html("Wait...");
			
			//データを取り出し、URLを生成する
			var dat = $("#send_text_id").value;
			var url = "/FTLE/run.lua?"+dat;
			
			//HTTPリクエストを実行
			$.get(url).done(function(data, textStatus, jqXHR){
				//成功した場合:受信した結果を非同期で表示
				$("#response_div_id").html(data);
				
			}).fail(function(jqXHR, textStatus, errorThrown){
				//失敗した場合:エラー内容を表示
				$("#response_div_id").html("Error:"+textStatus);
				
			});
		});
	</script>
</HTML>

/FTLE/run.lua
print("HTTP/1.1 200 OK")
print("")
print("Data get: "..arg[1])
sleep(1000) --わざと待ち時間を入れてみる(非同期通信の利点がわかる)

javascriptで自動更新

どんどん変化する値を500msごとに取得してみます。



/test.htm
<HTML>
<div id="res">Respons</div>
<script>
function getmsg()
{
	document.getElementById( "res" ).innerHTML = "Wait...";

	var xhr = new XMLHttpRequest();
	xhr.open("GET", "/FTLE/run.lua");
	xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jan 1970 00:00:00 GMT"); //キャッシュさせないため
	xhr.timeout=3000; //通信失敗時は3秒でタイム・アウトするように
	xhr.onload = function(){
		if (xhr.status == 200) {
			document.getElementById( "res" ).innerHTML = xhr.responseText;
		}else {
			document.getElementById( "res" ).innerHTML = "Error! " + xhr.status;
		}
	};
	xhr.onerror = function(){document.getElementById( "res" ).innerHTML = "Error!"};
	xhr.send();
}
setInterval(getmsg,500); //500msごとに呼び出し
</script>
</HTML>

/FTLE/run.lua
local num
--数値ファイルを読み込む
local file = io.open("test.txt","r")
if(file ~= nil)then --ファイルが存在しない場合は処理しない
	num = tonumber(file:read("*a"))
	file:close()
end

--もし中身が空だったら、0を入れる
if(num == nil)then
  num=0
end

--数値を更新する
local file = io.open("test.txt","w")
file:write(num + 1)
file:close()

--ブラウザに数値を返す
print("HTTP/1.1 200 OK")
print("")
print("File:"..num)

共有メモリ

ここが参考になるかもしれません。
Lua:実行中の停止と取得
このエントリーをTumblrにポストClip to Evernoteこのエントリーをはてなブックマークに追加
Lua:HTMLとの連携 - FlashAir開発者向け非公式wiki 先頭へ

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい
 

Menu

スマートフォンの方は画面下部よりPC版に切り替えることをおすすめします

最近更新したページ

最新コメント

QRコード

アクセス解析中

忍者アナライズ

GoogleAnalytics

アクセス解析中

編集にはIDが必要です

広告募集中