HSPポータル
サイトマップ お問い合わせ


HSPTV!掲示板


未解決 解決 停止 削除要請

2022
0316
hspfunhsp3dish.js 日本語入力について14解決


hspfun

リンク

2022/3/16(Wed) 14:29:55|NO.95742

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

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

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



この記事に返信する


hspfun

リンク

2022/3/16(Wed) 14:30:49|NO.95743

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



zrs90(5さい)

リンク

2022/3/16(Wed) 18:42:54|NO.95744

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

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

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

の 94157 参照

https://mobile.twitter.com/k_matsuzaki

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

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



zakki

リンク

2022/3/16(Wed) 19:38:01|NO.95745

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

前提として、(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でスタイル変更してやれば、それなりには見えそうです。



hspfun

リンク

2022/3/16(Wed) 22:03:57|NO.95749

>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



zakki

リンク

2022/3/16(Wed) 23:05:00|NO.95750

実験速いですね。

恐らくデフォルト設定でウィンドウ全部のキーボードイベントを拾う設定になってます。
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で切り替えでしょうか。



hspfun

リンク

2022/3/17(Thu) 18:04:49|NO.95754

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

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

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



hspfun

リンク

2022/3/17(Thu) 21:48:13|NO.95755

とりあえず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



hspfun

リンク

2022/3/19(Sat) 00:46:17|NO.95764

やはり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



zakki

リンク

2022/3/21(Mon) 21:13:56|NO.95797

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



hspfun

リンク

2022/3/21(Mon) 23:11:53|NO.95798

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

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

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



zakki

リンク

2022/3/22(Tue) 11:47:49|NO.95800

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



hspfun

リンク

2022/3/22(Tue) 18:05:28|NO.95802

>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



zakki

リンク

2022/3/24(Thu) 21:05:03|NO.95836

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



hspfun

リンク

2022/3/24(Thu) 21:55:46|NO.95838

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



ONION software Copyright 1997-2023(c) All rights reserved.