製品ごとのキャラクターページ（/product/chara）のブラウザバックの挙動が変

Hiroshiba commented 1 year ago

不具合の内容

普通のサイトだと、history.pushStateを使った後にpopstateイベントをlistenすると、ブラウザが持つブラウザバックをしてもページが更新されないはず。でもなぜか更新されてしまう。 gatsbyが原因だと思うけどわからない･･･。

https://github.com/VOICEVOX/voicevox_blog/pull/121

絡み。

再現手順

npm run developで起動中に/product/zundamonなどに移動して、キャラ移動を２回行ったあと、ブラウザバックするとなぞの404ページに飛ばされる。リロードすると正しく表示される。

期待動作

少なくとも404ページにならない。

その他

原因が全くわからずにいます。たぶんhistory.pushStateを使うべきではないという思想なのかもしれないけど、ページのフラッシュが入っちゃうので使わざるをえない･･･。そもそもページのフラッシュが入る方の原因を探るべきかも。

Hiroshiba commented 1 year ago

@k-chop さんはモーダル周りでこのあたりに遭遇されたりとか、もしくは原因をご存知だったされませんか。。

（諦めるつもりですが、なぜダメなのかわからずにもやもやしています 😇 ）

k-chop commented 1 year ago

最初pushStateでどうにかしようとしていたときに遭遇した覚えがあります！！

Gatsby（で使ってるreach/router）がpushState/popStateを使って遷移を実現しているので、それらと競合するから用意されてるnavigateを使わないとだめなんだろうな、という理解でした。

k-chop commented 1 year ago

手元でコメントアウト部分有効にしたりして試してみましたが、 navigate使ってもヘッダーがフラッシュしないようになっていればよさそう？なのでそっちを見てみます

EDIT: ヘッダーフラッシュは抑制できました https://github.com/VOICEVOX/voicevox_blog/issues/125#issuecomment-1399166413 でもアニメーションがほぼ死んでしまう・・・

Hiroshiba commented 1 year ago

色々お試しありがとうございます！！コメント先のリンクの通り、たしかにgatsby-plugin-transition-linkでできそうな雰囲気がありますね！！（もうメンテされてなさそうですが。。。）

ちょっとやる気になったらやってみようかなと思います！（もし興味があったら挑戦してみて頂いてももちろんOKです！自分でやるときは自分をassingしてお知らせする感じで！）

k-chop commented 1 year ago

https://user-images.githubusercontent.com/241973/213908147-73da3aca-1fec-4c68-8bc2-605918f5ac35.mp4

今日framer motionを使って実現できるか試していたんですが、こんな感じ↑になりました。 →参考情報

元のアニメーションと結構感じが違う
- ページ遷移挟む関係で同時にアニメーションを展開できなかった
- よって前と次の立ち絵が両方 opacity: 0 になる瞬間があり、ちょっとフラッシュ感がある
ブラウザバック時のキャラが流れて行く方向が制御しきれなかった
- 左に消えて左から出てきたりする
onMouseOverで方向の切り替えしておりスマホだとたぶん一方向にしか流れない
- div.motion のexit propsを書き換えたあとにページ遷移を発生させる必要があり雑に実装した

という問題があるのですが、もし同じライブラリを使うなら参考にでもなれば...ということでコード差分を置いておきます 🙏 コード差分：https://github.com/VOICEVOX/voicevox_blog/compare/master...k-chop:voicevox_blog:issue124/use-page-transition?expand=1

Hiroshiba commented 1 year ago

おーー！！！面白いですね！！！

向きに関しては、やはりページ遷移する関係でreactのstateを持つことができず、left/rightをhistoryのstateに入れるしかないという感じでしょうか。（以前はどのキャラが表示されるかをhistory stateに持たせて、そこからアニメーションの方向を決めていました。）

となると…contextや親コンポーネントに持たせれば良い…？いやidからkeyを求める処理を初回アクセス時だけにする…？いつコンポーネントやcontextが破棄・再作成されるかわからないので、試してみてって感じになりそうですね😇

ありがとうございます、勉強になります！！！

k-chop commented 1 year ago

向きに関しては、やはりページ遷移する関係でreactのstateを持つことができず、left/rightをhistoryのstateに入れるしかないという感じ

ですです！ページ全体が再renderされてしまうので、history stateで渡すのが楽でした。contextも使えると思います！

context使う場合は一番外側で定義する必要がありそうです https://developers.altura.co.jp/posts/gatsby-global-context/

Hiroshiba commented 1 year ago

おおー、なるほどです。 Layout等でやると意図が伝わらないかもなので、GlobalComponentみたいなの噛ませてそこでuseContextすると良いかもですね！！そちらのサイトの方にはBrowserAPIのことも紹介されていました。VOICEVOX blogはSSRではないはずなので不要かもですが、導入しても良いかもですね！

k-chop commented 1 year ago

現状デプロイされてるの見たのですが、特に問題なくブラウザバックできてますね！開発環境のみの謎挙動なんでしょうか・・・

https://voicevox.hiroshiba.jp/product/zundamon/

Hiroshiba commented 1 year ago

@k-chop 確認してみた感じ、１回だけ進んで戻ると駄目な感じでした･･･ 😇

https://user-images.githubusercontent.com/4987327/218291025-fa48d9da-8a50-4376-a68a-1e20960cb8e3.mp4

k-chop commented 1 year ago

oh... ほんとですね... 404にはならないけど挙動が変だ

優先度低で急ぎではなさそうなので https://github.com/VOICEVOX/voicevox_blog/issues/124#issuecomment-1399446087 ＆ https://github.com/VOICEVOX/voicevox_blog/issues/124#issuecomment-1399504327 の方向性でこちらで着手してみようと思います。問題なさそうならassignしていただければ 🙏 （self-assignできなかった）

Hiroshiba commented 1 year ago

おおお！！とても助かります、ぜひお願いしたいです！！！ assignさせて頂きます！！

VOICEVOX / voicevox_blog