search

roratorio-hub / ratorio

ラグナロクオンラインのダメージ計算機「ROラトリオHub」です
https://roratorio-hub.github.io/ratorio/
Other
6 stars 7 forks source link

android環境で操作不能になる問題 #558

Closed usachoco closed 1 month ago

usachoco commented 2 months ago

Googleフォームより

Androidのグーグルクロームで計算機下部のアイテム食品を使用中にしてセーブ、その後開き直しロードするとアイテム使用中以降のチェックボックスがタップ出来ず暴走魔力などの可変状態の設定が出来ない。

根本的な対処方法は見いだせていませんが回避策がありますので ひとまずこちらをご案内しようと思います

回避策１（オススメ）

この問題は PC Chrome や iPhone Safari では発生しない Android Chrome 特有の問題なので ラトリオHubをPC 版として読み込めば回避することが出来ます

  1. ブラウザの右上にあるハンバーガーメニュー（︙のマーク）を開く
  2. ハンバーガーメニューの下の方にある「PC 版サイト」をチェックする
  3. 以降、普通に操作する

画面の右端に生じる謎のスペースが気になる場合は 左側メニューを閉じることで操作しやすくなると思います

pc_mode-1

回避策２

回避策２は無駄にテクニカルですしすぐに問題が再発しますのでオススメ出来ませんが 何かの理由でラトリオHubをPC 版として読み込めない場合の選択肢としてご説明しておきます

  1. ラトリオHubの画面の最下部が見えるまで画面スクロールする これ以上スクロール出来ない行き止まりまでスクロールして下さい

  2. 画面を上にスクロールして操作したいメニューの場所まで戻る このときGoogle Chromeのアドレスバーが自動的に再表示されると思います アドレスバーが再表示されることで押せなかったチェックボックスが有効化されます

  3. Google Chromeのアドレスバーが自動的に隠れない様に注意しながら操作する 画面をスクロールしてアドレスバーが隠れるとまたチェックが出来なくなります その場合はまた一番下までスクロールする手順を行って下さい

senario_2-1

今後の対応

Android の Google Chrome ブラウザをスマートフォンモードで使用するときに 特定の装備をセットした状態で 画面スクロールによりアドレスバーが消えると発生する事象 であることを確認出来ました

発生条件が限られており回避策も確認出来たことから 一旦、対応優先度を下げますが 根本的な問題の修正に向けて引き続き調査を進めたいと思います たぶんレスポンシブデザインを勉強する必要があるのだと思っています

usachoco commented 2 months ago

Androidと念の為iPhoneを試しましたが わたしの手元では再現させることが出来ていません

真のトリガーが「アイテム食品を使用中にしてセーブ、その後開き直しロードする」ではなくて その他の設定のどれかがエラーを起こしている可能性もあります たとえば8/27までに実装したセーブデータの拡張にともなって それ以前にセーブされていたセーブデータのロードに失敗しているなどです

まずは再現性を確認したいのでQ&Aで追加情報を募ろうと思います

わたしのテスト環境

わたしのテスト手順

  1. ブラウザを起動してラトリオHubにアクセスする
  2. アクセス直後に何も変更していない状態で「アイテム（食品/他）」を開く
  3. 火・水・風・地レジストポーションを４つともチェックする
  4. 画面上部の「セーブ/ロード」を開く
  5. 「セーブ」をクリックしてスロット1に名前なしでセーブする
  6. ブラウザを終了する
  7. ブラウザを起動すると、前回開いていたタブがラトリオHubを自動的に表示する
  8. 画面上部の「セーブ/ロード」を開く
  9. 「ロード」をクリックしてスロット1のデータを読み込む
  10. ロード直後に何も変更していない状態で「アイテム時限効果」を開く
  11. 時限効果を変更することができる（再現に失敗）
usachoco commented 2 months ago

Google フォームから再現データを頂きました 開発者 Discord の方には共有済みです セーブデータを PC で読み込むと問題無いのですが Android で読み込むと問題が再現されます おかげさまで状況が前に進みましたのでこれから原因調査していきたいと思います

検証環境

Chrome で再現することを確認したあと 細かい検証では developer tool を見たかったのでブラウザを変更しました

なお以下の iPhone でも同様の操作を試しましたが再現しませんでした この問題は Android 版 Google Chrome に特有の事象と見受けられます

再現手順

  1. 問題のURLをアドレスバーに貼り付けてページを開く セーブデータ無しのプレーンなURLを開いた場合には以下の事象は再現出来ない

  2. 画面をページ最下部までスクロールして指を離す このときブラウザのアドレスバーは自動的に隠れたはず

  3. 「アイテム(食品/他) 使用中」をクリックしやすいよう拡大する このときブラウザのアドレスバーは隠れたままの状態 拡大したことによって画面の下部にさらにスクロールする余地が生まれたはず 追加検証のためにスクロールの余地が必要になります

  4. 「アイテム(食品/他) 使用中」のチェックボックスを触れても反応が無いことを確認する

追加検証手順（反応が無い事を確認した後）

  1. そのまま画面拡大した状態で、再びページ最下部までスクロールしてから指を離す

  2. そのまま画面拡大した状態で、再び「アイテム(食品/他) 使用中」が見える位置まで画面スクロールする このときブラウザのアドレスバーが自動的に再表示されたはず

  3. 「アイテム(食品/他) 使用中」のチェックボックスが反応する様になっていることを確認する

追加検証手順（反応が復活した事を確認した後）

  1. 次の検証の邪魔にならないように「アイテム(食品/他) 使用中」のチェックボックスを押して閉じておく

  2. そのまま画面拡大した状態で、画面下側の表示領域範囲外に隠れてる部分が見えるように画面スクロールして指を離す スクロールによってアドレスバーが自動的に隠れる事がトリガーになっているので スクロール量は1cmぐらいで構わない

  3. 「アイテム(食品/他) 使用中」のチェックボックスを触れても反応が無くなったことを確認する スクロールの方向が逆向きの場合はアドレスバーが自動的に隠れないのでこの問題は発生しない この状態で 5 番以降の手順を行うと、再びチェックボックスが反応するようになる

その他

usachoco commented 2 months ago

ミニマムの再現条件は恐らく以下の通りです

※アインヘリヤルの鎧 では再現しない ※ドッペルゲンガーカードでは再現しない

アイテムの組み合わせによって発生状況が変化するので プログラム側に問題があることは否定出来ません

しかし Android 版 Chrome のアドレスバーが隠れると発生し その後アドレスバーが再表示されると問題が抑制される という状況からは単純なプログラムの問題ではない様にも思えます

usachoco commented 2 months ago

開発者 discord より

SHARP aquos sense8 Android14 画面サイズ1080x2432 縦表示で再現します。 横表示だと再現しません。 画面左上のメニューを畳むと再現しません。 他のディスコード鯖に貼られているらとりおhubの適当なデータでも再現します。 「PC版サイトで見る」とした場合、 計算機のメイン部分そのものが、見切られる現象に遭遇しました。 ウィンドウのレイアウトに問題ないでしょうか？ ... CSSは全く分からないですが、div=contentの高さが本来の高さになっていないように見えます

分割された左側メニューの周辺を見直していくのが良いかもしれません

usachoco commented 1 month ago

開閉メニューの廃止により本事象は発現しなくなったと思われますので 9月いっぱい様子を見てからクローズする予定です

問題を抑制しつつ開閉メニューを復帰させられたら嬉しいね の件はまた別のIssueを起こそうと思います