junkerstock

⚫︎todoまとめ

残りリスト
・モーション追加
　・ウエイト1

今考えているのは、TODOアプリに付属する、デスクトップキャラクターの行動部分だ。
はじめ、行動の部分は追加したいときにGeminiにたのめばいいかと思っていたんだけど、細かい修正が多くなりそうで、効率が悪そう。
そこで、エディタを搭載し、キャラクターの絵とサブループを作る所を作成。
（サブループは、使う絵とそれの表示時間、それらがまとまった物。たとえば、走るだと走るコマの絵４枚をファイル名　数値　として4つ並べて1ユニットとする。）、
そこで作られたユニットをメインループでいろんな条件で配置する、といった感じにしたい。
例えばユニット（走る）を3秒そのあとランダム数３　1の場合、止まるだけ（ユニット止まる）2の場合（周りを見回す）　3の場合、手をなめる　　といった感じ。

Q
これはTODOアプリだ。これのデスクトップキャラクターとして猫が動いている部分があるが、これのキャラクターの部分を大幅に修正していきたい。

キャラクターの動きを、エディター作成、管理できるようにする。
編集ボタンを押した時に、ランダムボタン、履歴ボタンを消して、代わりに「動作」ボタンを設置。

動作ボタンを押した時にアクション編集画面に進む。スマートフォンの縦長画面は上から３分割されてそれぞれ役割が有り、別々に解説する。

■一番上の３分の１の空間（一番上）この空間をキャラクタ表示画面と呼称する。
./pic4 フォルダにある絵を表示。
絵の右隣に上ボタンと下ボタン、↓ボタンが縦に並ぶ。この上と下ボタンで絵が切り替わる。
↓ボタンは、次のアクション入力テキストボックスに、今表示されている絵のファイル名略称（基本的に方向を指すneko-の後ろのrとlを抜いて、拡張子を抜いた物）がそのまま入るボタン。
全てのファイルにはRとLがある。これは直前の左右の進行方向によって切り替わる。
とりあえずここでの絵の表示は全てRで。ファイル名は、neko-rstop4.png のように neko-のあとにrまたはlが入る。

■次の３分の１の空間（上から2番目）この空間はアクション入力画面と呼称する。
上に1行の入力ボックス、下に複数行が入る大きいテキストボックスが縦に並ぶ。
1行の入力ボックス（アクション名が入る）の右隣には左右の矢印ボタンと↓ボタンがあり、左右ボタンで入力されたアクションを選択する事ができる。
↓ボタンは、次のメインループ入力テキストボックスに、今表示されているアクション名がそのまま入るボタン。
テキストボックスは、アクションの内容が入る。
アクションの形式は以下の通り。

ファイル名略称数値（100分の1秒の単位がいいか？秒だと長いので、この辺は適当に。）
ファイル名略称数値
ファイル名略称数値
ファイル名略称数値
と続く

略称とは、neko-stop1 など。実際のファイルは　neko-rstop1.png および neko-lstop1.pngであり、
必ず2つのペアが存在する。
右を向いている時は r側を、左を向いている時はl側のファイルを使う。

■次の３分の１の空間（一番下）この空間はメインループ入力画面と呼称する。
上側は複数行が入る大きいテキストボックス、下側は横に並んだ数個のボタンが並ぶ。
メインループ入力ボックスはアクションと条件式が並ぶ。
メインループの形式は以下の通り。

AAA:　　　　　　　　　　ラベルAAA GOTOで移動する為に使う
アクション１秒数　　　実行するアクション名と行う時間が入る。
RANDOM 3　　　　　　　　仮の変数R に 1～3の乱数を入れる
R＝1　　　　　　　　　　乱数が１なら下の行に続く。必ずこれらの後にGOTOがあり、R=数値から始まってGOTO ラベルまでで一セットとなる。
アクション２秒数
GOTO AAA
R＝2 AND S=0 AND M=1 SはTODOの数 Mは現在のモード M:1で通常画面　2で編集モード時 3で履歴表示時
アクション３秒数
GOTO BBB
R＝3 AND T＝1 Tは猫自体にタッチが有ったかどうか。タッチ有りで1、無しで0 一度タッチしたらフラグが立つ
アクション５秒数
アクション６秒数
TC TCはタッチフラグの解除
GOTO AAA

BBB:
アクション４　秒数
GOTO AAA

ここで使われた変数は
乱数のR
モードのM
TODO数のS
タッチのT

上は具体的には

:AAA　
neko-run 3
T=1
neko-jump 1
GOTO BBB
:BBB　　
RANDOM 3　　　　　　　　
R＝1　　　　　　　　　　
neko-stop 3
GOTO AAA
R＝2 AND S=0 AND M=1
neko-korogaru 5
GOTO CCC
R＝3 AND T＝1
neko-jump 1
neko-nuramu 3
TC
GOTO AAA

:CCC
neko-okiru 1
GOTO AAA

のような感じになる。走ってる時のタッチのアクションも追加した。

横に並んだ数個のボタンは、入力補佐のボタンと保存のボタン。
保存のボタンは押すと、アクション入力ボックス、メインループ入力ボックスの内容が、ローカルストレージに保存される。
入力補佐のボタンは押すとGOTO がメインループ入力ボックスに入るGOTOボタン　とりあえずこれだけ入れる。
以上だ。
難しいがこれで作ってみてほしい。

A
この要件は、単なるTODOアプリの装飾を超えて、簡易的な**ビジュアルスクリプトエンジンとエディタ**を実装する高度な内容です。

既存のコードをベースに、以下の機能を実装しました。

1. **エディタUI**: 画面を3分割（キャラ表示、アクション定義、メインループ）したフルスクリーンオーバーレイ。
2. **VM（仮想マシン）**: 定義されたスクリプトとアクションを解析し、非同期で実行するエンジン。
3. **状態管理**: `S`(TODO数), `M`(モード), `T`(タッチ), `R`(乱数) の変数をリアルタイムで監視・評価。
4. **アセット管理**: `./pic4` フォルダを想定した画像プレビュー機能（※ブラウザの制約上、ファイル一覧は自動取得できないため、代表的なファイル名をプリセットしています）。

以下が修正・追加された完全なコードです。　　　ーーー＞todo-test12

Q　2回目

これで修正したい箇所がある。アクション編集画面で、一番上のキャラクタ表示画面だが、これのキャラクターは、./pic4ではなく./pic3で、その中のlist.txtというものの中に
aaa.bat
list.txt
neko-lrun1.png
neko-lrun2.png

などと入っているので、そのうちneko-とついているものだけをリストとして使うようにしてほしい。
あと、絵の隣にうえから　上矢印、移動ボタン（↓ボタン）下矢印　となっているが、これを　キャラクターの左側に移動ボタン（↓ボタン）、キャラクターの右側に上から上矢印、下矢印としてほしい。　後、絵の下に、ファイル名を出すようにしてほしい。
そのあとの
中段のアクション入力画面、下段のメインループ入力画面なんだけど、これの画面構成を、
横に並べてほしい。というのも命令が短いので、横の幅をとる必要がないからだ。　
とりあえず、ここまで直してほしい。

アクション定義画面と、メインループ画面が、半分ずつになってない。きっちり画面の半分になってほしい。どんなに狭くても、きれいに半分にしてほしい。
あと、アクション定義のところだけど、タイトル、右矢印、左矢印、メインループに入るボタン、下にテキストボックスになっているけど、テキストボックスの下に
メインループに入るボタンを設置してほしい。キャラクター表示のところの↓ボタンのように→ボタンしてくれ。
それと、？ボタンを→ボタンのとなりに設置してほしい。おすと窓が出て、かんたんな説明　がだせるようにしたい。

うーん　？をおすと、すぐにはヘルプの表示にならないね。閉じるボタンをおすと、スクリプトの書方の表示が出てくる。できればすぐ出てきてほしい。
それと、走るときの定義は、いまどうなっているのか、そちらでうまいことつくってもらっているっぽいけど、そこを定義したい。
ラベルのあたまにMOVEがついているときだけ、移動先の座標をまずランダムで定義する。MOVEが先頭にあるときだけなので、
:MOVE1 とか　:MOVEAA とかも含む。
そのMOVEの後のアクションの秒数で移動先の座標まで移動する、としたい。

いいね。さて、キャラクタ表示のところだけど、高さと幅を同じ大きさにしてるよね？高さは今の大きさでちょうどいいので、幅を絵の正確な今の絵の比にしてほしい。
あと、アクション定義だが、？の隣にアクションの削除を設けたい。ゴミ箱マークがいいかな。　けしたらそのまま保存もされるでＯＫ

Q
あと、アクション編集画面で、ダブルクリックで拡大にならないようにってできる？それができるといいんだけど。
A
ダブルタップ拡大の防止:
CSSに touch-action: manipulation を追加しました。これにより、ボタンや入力エリアを連打してもズームが発生しにくくなります（スマホでの操作性が向上します）。

以下は2個前のv3.1のコードの？ボタンの内容だ。
<h4>アクション定義 (左側)</h4>
画像IDと表示時間(1/100秒)を記述します。 
stop1 20 stop2 20
上の例：stop1を0.2秒、stop2を0.2秒表示。

<h4>メインループ (右側)</h4>
猫の行動ロジックを記述します。 
コマンド: 
neko-[アクション名] [秒数]
指定したアクションを秒数分繰り返す。 
GOTO [ラベル]
指定したラベル(:LABEL名)へジャンプ。 
RANDOM [数]
1～[数]の乱数を変数Rに入れる。 

条件分岐: 
R=1 AND S>0 ...処理...
条件が真なら次の行へ。偽なら次の条件/ラベルまでスキップ。 
変数: 
R (乱数), S (タスク数), M (モード:1=通常/2=編集/3=履歴), T (タップ:0/1)

今の内容は上の内容からだいぶはしょられてしまっている。どんなに長くなってもいいので完全に書いてほしい。
それと
アクション定義画面をさらに上下に分けて、上をアクション定義　3分の2の大きさ、　下を定型入力　3分の1の大きさ
としてほしい。定型入力は、一行表示で内容を表示して、下に右矢印、左矢印、→ボタン　と並んでいて、左右で内容を選び、→ボタンで、アクション定義の→ボタンと
同じくメインループに入力する、とする。
内容は、 :,RANDOM,R=,GOTO,GOTO MIAIN,=,<,> とする。

MOVEの後のアクションがおかしい。決められた秒数、移動するが、画面外まで走って行って、戻される、途中まで走っていって半分くらいの距離をもどる
というような感じ。止まったときに、きめられた座標にいないのは、何か計算ミスしている。

いいね。これでだいたいの問題はなくなった。あと、メインループ画面のGOTOボタンは要らないので、消したい。小さい変更なので、修正点だけ、掲示してほしい。

あと、ほんとにちいさいところだが、アクション定義のボタン　ゴミ箱と？と→　は右によっているが、定型入力のボタン　右、左、→は中央だ。なのでアクション定義のボタン　ゴミ箱と？と→　を中央にしたい。これも修正点だけおねがいしたい

あと、説明文だが、タッチのついての説明を追加したい。　タッチはすぐには反応せず、フラグがたち、処理後にTCでフラグがリセットされる　事の説明をいれないといけない。これも修正箇所だけ頼む

Q
一度、アクション編集画面　になって、そのあと閉じるでもどると、何もしていないともんだいなく戻る。でも、一度でも文字入力の編集をしていると、閉じるで戻った時、タスクの下まで表示されて、タスクが多かった時に上の動作や完了といったボタンが押せない、または押しずらくなる。これはいちどタスク入力の入力欄をタップして入力モードにすると、全体が表示されて戻る感じ。これはなおせるか？

A
これはモバイルブラウザ特有の現象で、テキストエリアを編集してキーボードが出た後、エディタを閉じても「キーボードが表示されていた分のスクロール位置」や「フォーカス」が残ってしまい、画面全体が上にズレたままになってしまうことが原因です。
これを直すには、エディタを閉じるボタンを押した瞬間に、「強制的にフォーカスを外す（キーボードを確実にしまう）」処理と「画面位置をトップに戻す」処理を追加する必要があります。

ERROR !