Task9の記事でも書いたように,結局unity側のwebviewの戻る・進むボタンはあまりうまく改善できなかったので,表示するページに商品一覧のページに戻る機能を実装しようと思います.
戻る・進むボタンがgoogle chromeで機能して,IOSだと機能しなかった原因としてiframe内の操作については履歴として残らずに以下のjavascriptの関数が使えなかった.
iframe.contentWindow.history.back()
iframe.contentWindow.history.forward()
window.history.back()
window.history.forward()
ただ,ネットで探してもあまりそういった記事は見当たらない...
WebGLを使っていることが何か関係しているのだろうか?
原因は分からないままだけど,できないものをずっと悩んでいても仕方がない.ということで今回は履歴に頼らない,戻るボタンの作成を試してみる.
(進むボタンは作成しているサイトではあまり必要性がないので作ってない)
ではどうしたら,「商品一覧ページ」から「商品詳細ページ」に遷移した後,再びもとの「商品一覧ページ」に戻る仕様にできるのか?
それを実現するために今回はGET通信を活用して,もとにいた商品一覧ページのURLをデータとして「遷移先である「詳細ページ」に送ることにした.
作ったコードは以下のような感じ.

一番上の<a>タブで詳細ページに遷移する際に遷移先の商品idとともに「app.request.uri」で現在のURLもそのままデータとして格納しています.
こうすることで遷移した時の「詳細ページ」のURLは次のようになる

urlの中にさらにurlが入っている感じで少し奇妙に見えるかもだけど,基本的にiframeを使ってこのページは閲覧されるのでこのurlは目に入ることはないだろう.
遷移先のページのコードではまず先に,back_urlの情報を取ってあげる.twigファイルでは以下のような記述で取得する.

そしてあとは「商品一覧に戻る」ボタンを作ってあげるだけ.

既に遷移前のページが一つだけに限られるなら,もうそのページのURLを直接書き込めばいいんだけど,今回は遷移前のページとして考えられるURLは複数ある.履歴を参照できるなら簡単に元の参照元に戻れるんだけど.今回は履歴を使う事ができなかったので,こんな風にちょっといろいろ回りくどいやり方になっています.
最終的にできた様子は以下のような感じ.
IOSでもチェックして機能することを確認.
しばらくこれで行こうかなと思います.
ただ,これ少し問題があるんです.ログインしてない状態でお気に入りボタンを押すとログイン画面に遷移する仕組みになっていて,ログイン完了後に元の「詳細ページ」に戻る仕組みになっているのですが,この時元の「詳細ページ」に戻った時はback_urlのデータは失われてしまうのです.
この部分はまた要検討ですね...
もしくは,必ずサイト訪問した最初のタイミングでログインしてもらう仕組みが必要になってきそう.ただ,これだと会員登録してない人は登録しないと体験できないことになってしまい,面倒くさいと思ってサイトを離れる人も多くなりそう...