HSPTV!掲示板

ブラウザ上にてhsp3dish.jsで動作するアプリを作っています。
日本語入力を行いたいのですが、何か方法はございますでしょうか。

OS：Windows10
動作させたいブラウザ：edge(chromium)、Firefox、Google Chrome のいずれか

input命令が限定的にですが対応されているという事で
試してみたところ、アルファベットのみ打てる事は確認しました。

すみません、開発環境が抜けていました。
hsp3.6と3.7β1で試しています。

良い返答が出来ず、申し訳ないのですが
現状、不可能に近いかと。

3.7βに、dish.js 上の input が
制限付きとはいえ、実装されているのは
この方の成果物...と思われます。

http://hsp.tv/play/pforum.php?mode=all&num=94100

の　94157 参照

https://mobile.twitter.com/k_matsuzaki

の　今年、2／4の記事参照

この事から、日本語入力を
実装出来る方が、現れるかどうか...

汎用的じゃない力技で良ければ実現できると思います。

前提として、(hsp3dish.jsで使ってるライブラリのローレベル機能を使って)JS側からHSPの変数に書き込むことが出来ます。
https://hsp.tv/play/pforum.php?mode=all&num=92295#92934

HTMLに <input type="text" id="myinput" required size="10"> のような入力タグを追加しておいて
exec "const ptr = " + ptr + "; const str = document.getElementById('myinput').value; stringToUTF8Array(str, Module.HEAP8, ptr, 1024);"
のような感じでHSP側で入力されたテキストを読めるはずです。
あとはinputタグの表示・非表示や位置、z-orderなどを、execでスタイル変更してやれば、それなりには見えそうです。

＞zrs90(5さい)さん
　ありがとうございます。やはり難しいのですね
　最悪頑張って自前で用意するしか・・・と思っていました。

＞zakkiさん
　zakkiさんに教えて頂けるとは！
　最近dishで勉強させて頂いてます。
　この様な素敵な物を触らせて頂いて感謝の極みです。

　js側から値を渡せるのは凄いですね！
　ただ困ったことに、hsp3dish.jsの実行に応じて(多分)
　inputだとかtextarea等への文字入力が殆どできなくなってしまう様です。
　Ctrl + V は効くみたいなので、適当な物をコピペすると期待通り動いています。
　実際動かしたものは下記のURLです。(その下はhsp側のソースです。)
　http://hsptest.tank.jp/mojitest.html

#include "hsp3dish.as"
sdim timebuf, 1024
sdim strbuf, 1024
timep = varptr(timebuf)
strp = varptr(strbuf)

*main
exec "const ptr = " + timep + "; stringToUTF8Array(new Date().toLocaleString(), Module.HEAP8, ptr, 1024);"
exec "const ptr = " + strp + "; const str = document.getElementById('myinput').value; stringToUTF8Array(str, Module.HEAP8, ptr, 1024);"

redraw 0
color 0,0,0:boxf
color 255,255,255
pos 0,0
mes timebuf
mes strbuf
redraw 1

await 32
goto *main

実験速いですね。

恐らくデフォルト設定でウィンドウ全部のキーボードイベントを拾う設定になってます。
https://wiki.libsdl.org/SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT

window = SDL_CreateWindow()の前あたりに
SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#canvas");
とか入れると普通に動くようすです。
https://github.com/onitama/OpenHSP/blob/master/src/hsp3dish/emscripten/hsp3dish.cpp#L328

ゲーム用途だとフォースが他にある時にキーボードイベント拾い落として悲しいと思いますので
ランタイム側で対応するとすればENVで切り替えでしょうか。

＞zakkiさん
　ありがとうございます。OpenHSPとは？という状態からでしたので
　調べており返信遅くなりました。
　jsやCについてド素人である為、すみません。

　こちらでemscriptenやらを用意し、328行目の前にSDL_SetHintを挿入した所
　おかげ様で期待通り動きました。

　そのままだとWebAssembly用の物が出力されましたので
　試しにmakefile内でWASM=0を指定するとjs版が出力されました。
　実際に動かした物は下記URLになります。
　http://hsptest.tank.jp/moji2/mojitest.html

とりあえずEnterでログに打ち込める所までできました。
(二行目以降の挙動が明らかに怪しいですが)
http://hsptest.tank.jp/moji3/mojitest3.html

やってて気付いたのですが
OpenHSP-masterで生成したhsp3dish.jsは
getkeyやstickが効かないかもしれないです？
SDL_SetHintを入れた影響かと思いましたが
3.7β1についているhsp3dish.jsも同様の症状を確認しました。
3.6についているhsp3dish.jsは問題ありませんでした。
3.6以前のOpenHSPでSDL_SetHintを突っ込めば良いかと思いましたが
emmake時にSDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENTに対し
"use of undeclared identifier"エラーが出るので
私にはもうこれ以上は無理そうです。

↓一応URLの物のソースです。(キー入力はjsで無理やりやってます。)

#include "hsp3dish.as"
	sdim timebuf, 64
	sdim strbuf, 1024
	sdim key, 64
	timep = varptr(timebuf)
	strp = varptr(strbuf)
	keyp= varptr(key)

	log=""
	strofjs_recv=""
	
*main
	exec "const ptr = " + timep + "; stringToUTF8Array(new Date().toLocaleString(), Module.HEAP8, ptr, 1024);"

	gosub *strofjs
	if strofjs_recv!""{
		log=""+strofjs_recv+"\n"+log
		key=""
	}
	
	redraw 0
	color 0,0,0:boxf
	color 255,255,255
	pos 0,0
	mes timebuf
	mes log

	pos 0,440
	mes strbuf
	redraw 1

	await 32
goto *main


*strofjs
exec "const ptr = " + strp + {";
const str = document.getElementById('myinput').value;
stringToUTF8Array(str, Module.HEAP8, ptr, 1024);
"}

exec "const ptr = " + keyp + {"; 
window.addEventListener("keydown", (e)=>{
stringToUTF8Array(e.code, Module.HEAP8, ptr, 1024);
});
"}

if key="Enter"{
	strofjs_recv=strbuf
	exec "document.getElementById(\"myinput\").value=\"\""
}else{
	strofjs_recv=""
}

return

やはりgetkeyが動かないのはアレなので
hsp側で入力フォーム作ってみました。
ひらがなカタカナを入力できるぐらいにはしましたが
漢字への変換は難しそうですね。
あと、一部のIME用のキーはブラウザだと取得できないので
他のキーで代用する必要がありました。

下記URLは実際に動かしたサンプルです。
http://hsptest.tank.jp/moji5/mojitest5.html

下記はソースです。

#include "hsp3dish.as"

#module

;カタカナ変換用サブルーチン
#define katahen(%1,%2,%3) A=%1:B=%2:bp1=peek(B,0+utf8)-peek(A,0+utf8):bp2=peek(B,1+utf8)-peek(A,1+utf8):repeat %3:strrep typing.1,A,B:poke A,1+utf8,peek(A,1+utf8)+1:poke B,0+utf8,peek(A,0+utf8)+bp1:poke B,1+utf8,peek(A,1+utf8)+bp2:loop

;ローマ字置き換え用サブルーチン
#define rp(%1,%2) strrep typing.1,%1,%2

#defcfunc textform
if start=0{
	a="あ":if lpeek(a,0)=$8281E3:utf8=1:else:utf8=0 ;実行環境判定
	start=1
	sdim typing.0,1024,3
	dim keys,255
	dim keysrep,255
	}
r=""

repeat 239
keysrep.cnt=keys.cnt*(keysrep.cnt+1)
getkey keys.cnt,cnt;キー取得関連
key=cnt
keyrep=keysrep.cnt
Shift=keys.16
Backspace=keys.8:Backspacerep=keysrep.8
Enter=keys.13:Enterrep=keysrep.13
TAB=keys.9:TABrep=keysrep.9
Space=keys.32:Spacerep=keysrep.32

if typing.1="":tmode=0:else:tmode=1;入力中？

if keyrep=1 and keys.cnt or keyrep>=10 and keys.cnt{
typing.2=""

if TAB & TABrep=1{ ;全角半角切り替え
	if tmode:Enter=1
	if kana:kana=0:else:kana=1
}

	if key>=48 and key<=57{	;1〜9キーの場合
		poke typing.2,0,key-16*Shift ;Shiftで記号
	}
	if key>=96 and key<=105{	;テンキー数字
		typing.2=str(key-96)
	}
	if key>=65 and key<=90:poke typing.2,0,key+32*(1-Shift) ;英字キーの場合 Shiftで大文字

	;以下記号とか
	if key=111:typing.2="/"
	if key=106:typing.2="*"
	if key=109:typing.2="-"
	if key=107:typing.2="+"
	
	if key=219:typing.2="["
	if key=221:typing.2="]"
if Shift{
	if key=189:typing.2="="
	if key=220:typing.2="|"
	if key=188:typing.2="<"
	if key=190:typing.2=">"
	if key=191:typing.2="?"
}else{
	if key=189:typing.2="-"
	if key=220:typing.2="\\"
	if key=188:typing.2=","
	if key=190:typing.2="."
	if key=191:typing.2="/"

}

if tmode=0 and Space:typing.0+"　";スペースで空白挿入

typing.1+=typing.2
if kana=0:typing.0+typing.1:typing.1=""

if kana{ ;力技でkanaがONの時にローマ字をひらがなに置き換え

rp "lka","ヵ":rp "xka","ヵ":rp "lke","ヶ":rp "xke","ヶ":rp "ryo","りょ"
rp "ryu","りゅ":rp "rya","りゃ":rp "syo","しょ":rp "syu","しゅ":rp "sya","しゃ"
rp "pyo","ぴょ":rp "pyu","ぴゅ":rp "pya","ぴゃ":rp "dyo","ぢょ":rp "dyu","ぢゅ"
rp "dya","ぢゃ":rp "gyo","ぎょ":rp "gyu","ぎゅ":rp "gya","ぎゃ":rp "hyo","ひょ"
rp "hyu","ひゅ":rp "hya","ひゃ":rp "kyo","きょ":rp "kyu","きゅ":rp "kya","きゃ"
rp "zyo","じょ":rp "zyu","じゅ":rp "zya","じゃ":rp "byo","びょ":rp "byu","びゅ"
rp "bya","びゃ":rp "nyo","にょ":rp "nyu","にゅ":rp "nya","にゃ":rp "myo","みょ"
rp "myu","みゅ":rp "mya","みゃ":rp "cho","ちょ":rp "tyo","ちょ":rp "chu","ちゅ"
rp "tyu","ちゅ":rp "cha","ちゃ":rp "tya","ちゃ":rp "ltu","っ":rp "xtu","っ"

rp "fa","ふぁ":rp "fi","ふぃ":rp "fu","ふ":rp "fe","ふぇ":rp "fo","ふぉ"
rp "la","ぁ":rp "li","ぃ":rp "lu","ぅ":rp "le","ぇ":rp "lo","ぉ"
rp "xa","ぁ":rp "xi","ぃ":rp "xu","ぅ":rp "xe","ぇ":rp "xo","ぉ"
rp "va","ヴぁ":rp "vi","ヴぃ":rp "vu","ヴ":rp "ve","ヴぇ":rp "vo","ヴぉ"
rp "jo","じょ":rp "je","じぇ":rp "ju","じゅ":rp "ja","じゃ":rp "rr","っr"
rp "tt","っt":rp "yy","っy":rp "pp","っp":rp "ss","っs":rp "dd","っd"
rp "ff","っf":rp "gg","っg":rp "hh","っh":rp "jj","っj":rp "kk","っk"
rp "ll","っl":rp "zz","っz":rp "xx","っx":rp "cc","っc":rp "vv","っv"
rp "bb","っb":rp "mm","っm":rp "nn","ん":rp "wo","を":rp "we","うぇ"
rp "wu","う":rp "wi","うぃ":rp "wa","わ":rp "ro","ろ":rp "re","れ"
rp "ru","る":rp "ri","り":rp "ra","ら":rp "yo","よ":rp "ye","いぇ"
rp "yu","ゆ":rp "yi","い":rp "ya","や":rp "mo","も":rp "me","め"
rp "mu","む":rp "mi","み":rp "ma","ま":rp "bo","ぼ":rp "be","べ"
rp "bu","ぶ":rp "bi","び":rp "ba","ば":rp "po","ぽ":rp "pe","ぺ"
rp "pu","ぷ":rp "pi","ぴ":rp "pa","ぱ":rp "ho","ほ":rp "he","へ"
rp "fu","ふ":rp "hu","ふ":rp "hi","ひ":rp "ha","は":rp "no","の"
rp "ne","ね":rp "nu","ぬ":rp "ni","に":rp "na","な":rp "do","ど"
rp "de","で":rp "du","づ":rp "di","ぢ":rp "da","だ":rp "to","と"
rp "te","て":rp "tu","つ":rp "ti","ち":rp "ta","た":rp "zo","ぞ"
rp "ze","ぜ":rp "zu","ず":rp "ji","じ":rp "zi","じ":rp "za","ざ"
rp "so","そ":rp "se","せ":rp "su","す":rp "si","し":rp "sa","さ"
rp "go","ご":rp "ge","げ":rp "gu","ぐ":rp "gi","ぎ":rp "ga","が"
rp "ko","こ":rp "ke","け":rp "ku","く":rp "ki","き":rp "ka","か"

rp "o","お":rp "e","え":rp "u","う":rp "i","い":rp "a","あ"

if instr(typing.1,,"n")<strlen(typing.1)-2:rp "n","ん"

if Space & Spacerep=1{ ;カタカナに変換

	if utf8=0{ ;SJIS環境
	
		katahen "ぁ","ァ",63
		katahen "む","ム",23
		
	}

	if utf8=1{ ;UTF-8環境

		katahen "ぁ","ァ",31
		katahen "だ","ダ",32
		katahen "む","ム",23

	}
	
}

}

if Backspace & typing.tmode!""{ ;バックスペース
	if Backspacerep=1 or Backspacerep>=10:typing.tmode=""
}

if Enter & Enterrep=1{ ;エンター時の動作
	if tmode=0:typing_end=typing.0:typing.0="":break
	if tmode=1:typing.0+typing.1:typing.1="":tmode=0
}

}

loop

;表示
pos 0,ginfo.13-50:mes "半角/全角：TABｷｰ、ｽﾍﾟｰｽ：変換、Enter：決定"
pos 0,ginfo.13-30:mes typing.0+"_"+typing.1

if typing_end!""{
	r=typing_end ;戻り値に代入
	typing_end="" ;一度送信したらリセット
}
return r

#global

	;以下動作サンプル
	
	log=""
	text=""

*main
	
	redraw 0
	color 0,0,0:boxf
	color 255,255,255
	pos 0,0
	mes log

	text=textform()

	if text!"":log=text+"\n"+log:text=""
	redraw 1

	await 32
goto *main

stickとgetkeyはたぶんこれで使えるようになります。
https://github.com/onitama/OpenHSP/commit/1a3abdd4e82373c44d27ce4213f30dc6a750c930

＞zakkiさん
ありがとうございます！普通にビルドしたもので
getkeyが効くのを確認しました。
お手数お掛けし申し訳ありません。

ただ、SDL_SetHintを入れると
全くgetkeyを受け付けなくなってしまうみたいです。

動作サンプル
http://hsptest.tank.jp/moji6/mojitest6.html

SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#canvas");だと
canvas要素にフォーカスがあるときだけキーボードイベントを拾うって意味になるんですが
デフォルトだとcanvas要素にはフォーカスが行かないので
<canvas id="canvas">にtabindex="0"を追加してフォーカスが行くようにする必要があります。
このあたり面倒ですね……

＞zakkiさん
ありがとうございます！解決しました。
ついでにinputの表示と非表示を切り替えてみました。
あと2行目以降の挙動が怪しいのは改行コード周辺が原因っぽかったので
環境に応じて改行コードを切り替える事にしました。

動作サンプル
http://hsptest.tank.jp/moji7/mojitest7.html

ソース

#include "hsp3dish.as"
a="あ":if lpeek(a,0)=$8281E3:utf8=1:else:utf8=0 ;実行環境判定
RT="":if utf8=1:poke RT,0,$0A:else:wpoke RT,0,$0A0D ;環境で改行コードが変わる

	exec "document.getElementById(\"canvas\").focus();"
	sdim timebuf, 64
	sdim strbuf, 1024
	timep = varptr(timebuf)
	strp = varptr(strbuf)

	log=""
	strofjs_recv=""
	x=320:y=240
	
*main
	exec "const ptr = " + timep + "; stringToUTF8Array(new Date().toLocaleString(), Module.HEAP8, ptr, 1024);"

	gosub *strofjs
	if strofjs_recv!""{
		log=""+strofjs_recv+RT+log
		key=""
	}
	if Enter:Enterrep++:else:Enterrep=0
	getkey Enter,13
	getkey left,37
	getkey up,38
	getkey right,39
	getkey down,40

	if left:x-5
	if right:x+5
	if up:y-5
	if down:y+5
	if Enter=1 & Enterrep=0:exec {"
	document.getElementById("myinput").style.visibility ="visible";
	document.getElementById("myinput").focus();
	"}
	
	redraw 0
	color 0,0,0:boxf
	color 255,255,255
	
	pos 0,0
	mes timebuf
	mes "カーソルキー：移動、Enter：チャット(?)"
	mes log

	pos 0,240

	pos x,y
	mes "orz"
	redraw 1

	await 32
goto *main

*strofjs
exec "const ptr = " + strp + {";
const str = document.getElementById('myinput').value;
stringToUTF8Array(str, Module.HEAP8, ptr, 1024);
"}

if instr(strbuf,,RT)>=0{
	strofjs_recv=strbuf
	strrep strofjs_recv,RT,""
	exec {"
	document.getElementById("myinput").value=""
	document.getElementById("myinput").style.visibility ="hidden";
	document.getElementById("canvas").focus();
	"}
}else{
	strofjs_recv=""
}

return

とりあえず報告です。
諸々の変更が本家にマージされたので、次のリリースではdish.jsへのパッチは不要になりそうです。
＃あいかわらずinput命令での日本語入力は出来ませんが…
https://github.com/onitama/OpenHSP

＞zakkiさん
ありがとうございます！とても助かります。
次のリリース以降では今回の様な事をする場合
ENV.HSP_KEYBOARD_ELEMENT = "#canvas";
をjs側で指定すれば良いという事ですかね。