【ティラノスクリプト備忘録】過去のやらかし(gifとdialogタグの二本立て)
gifについてはジフ派。
1.gifの画像間隔指定を失敗した話
gifの画像作る時って大体切り替わり時間の指定ができます。
私が使ってるツールはGiamくんなので、10ミリ秒単位(時間の1指定で10ミリ秒に当たる)で指定可。これはたぶんツール次第なはず。
さて、当然、ここの時間指定の数値が小さければより早く切り替わる設定ができるわけですが。
私、以前、50ミリ秒とかの単位でgifを作ったことがあります。
↓のDead Endの演出gifの当初版がそれ
ただ、それがやらかし。
普通にデフォルトの画像表示ソフトだと想定した通りの速さで動作するんだけど、ティラノのデバッグだとそんな速さじゃない。
というわけで、調べた結果、「gif画像の再生において、指定時間の通りに動かない(大体遅くなる)のは、再生アプリケーションの許容するフレームレート未満になっちまってるせい」となりました。
つまり、そのgif画像を再生するアプリケーションによって、gifの切り替え時間を反映できる最低値が異なるということです。
というわけで、200ミリ秒単位にしたら一応解決はしたし、その後に作ったgifの挙動見てると100ミリ秒単位ならいけそう……けど、アプリケーション由来だと他ブラウザはわかんないわね、な気持ちはある(まあティラノデバッグでOKならChrome、現行Edgeは大丈夫なはず)
2.dialog連続使用時の注意
セーブデータ消去を用意しといて、
①最初に確認ダイアログ
↓
②もっかい確認ダイアログ
↓
③セーブデータ削除
↓
④完了お知らせダイアログ
↓
⑤タイトル画面
という風に動かしたかったんですわな。
ところがどっこい、①と②の間でなんかアレな挙動というかフリーズいたしました。
ちょいと調べてみると「ティラノのdialogタグの連続使用時はwait挟まんとフリーズする時がある」なる情報が出てきた。
で、最初は500のwaitタグを挟んだんですね。
ところが、これでうまくいく時といかぬ時がある。
なので、このダイアログ表示の設定まで見に行きました。
場所はココ↓

で、tyranoフォルダのlibsに入ってるから、「ティラノスクリプトを構成するためのライブラリの中の一つ」なわけですね。
で、wait挟む必要性の理由となるのが、この↑の二つのCSSの内、「remodal-default-theme.css」内に記述されてて……


この黄色くなってるdurationがキーワードで、この場合、animation-durationで、「0.3s」=「300ミリ秒」で指定されております。
そもそもこの「animation-duration」なるプロパティはCSSでアニメーションつける時の、「設定したアニメーションをどれだけの時間をかけて実行するか」ってな内容になります。
で、28、29、67、68行のそれぞれに記載されてるセレクタ(CSSの適用範囲設定)の名称見ると、どうにも、このアニメーションの設定はダイアログを開く時(opening)と閉じる時(closing)に使用される模様なのですな。
あ、remodal、というのはそもそもこのライブラリの名称で、ティラノのダイアログみたいな、画面全体を覆う形で出てくるウィンドウのことをモーダル画面とか言うんですが、それを簡単に実装できるライブラリくんです。
そういうのあったんだ、いいなあ(お仕事で自力でモーダル画面を組んだことn回)
で、300ミリ秒かけて開いて、300ミリ秒かけて閉じるってのが、このプラグインのCSSで規定されてる表示時の動作なわけですな。
ちなみに、dialogタグで出てくるあの部分、ってティラノの画面上では非表示なだけで常にいます。
で、気づいた方は気づいたかもしれない、waitを入れなきゃいけない意味。
そうです。連続使用の場合、waitをまったく挟まないと、「300ミリ秒かけて閉じる」間に「もっかい300ミリ秒かけて開く」みたいな挙動になっちゃうんです。
で、どうもそうなると、閉じる方が優先されるらしく、非表示になったまま、いつまでも出てこなくてフリーズするっぽいんですね~、この設定と挙動的に。
とはいえ、その表示・非表示の片道300ミリ秒を超えた500ミリ秒をwaitで指定をしているのに、フリーズすんのかよ、なんですが。
これね、問題はその表示の片道300ミリ秒の間でも、HTMLとJavaScript的にはユーザが視認できて操作することは可能ってポイントっすね。
連打とかしてたら、表示の300ミリ秒の途中でも、「設定した処理実行条件」を満たして、非表示の300ミリ秒に途中から入るわけ。
と、考えると、この表示・非表示の300ミリ秒×2=600ミリ秒以上のwaitを間に挟むべきである、という計算になります。
とはいえ、私は保険をかけて+100して700ミリ秒のwaitをかけるようにしている……実際ミリ秒単位だから700でもそこまで待つって感じはないし、実際の画面上はダイアログ側のアニメーションが実行されてるしね。
というわけで、[dialog]タグ連続使用時にwait挟んだ方がいいぞ情報は出てくるけど、なんでそうなのかの解説がなかった&具体的なwaitの設定指標がなかったので調査してみましたって話でした。