popPage,pushPageメッソッドの利用について

Question

現在、アンケート回答アプリケーションをmonaca上に作成中の初心者です。

公式ガイドを参考に、12問の設問に対し1問1ページのHTMLを作り、各ページをpushPage、popPageで遷移できるようにしています。

回答を進めていくと、読み込みが徐々に遅くなり、12問目修了後に、inputタグで入力欄を作ったところ、表示が壊れてしまいます。

pushPage、popPageは複数ページの遷移には不適切なのでしょうか？

ページを複数持つ場合には、HTMLを直接読み込んだほうが良いのでしょうか？

よろしくお願い致します。

Answer 1

pushPage、popPageは、画面遷移を行うための機能とは厳密には異なります。
実際の動作としては、pushPageは「画面を重ねる」、popPageは「積まれた現在の画面を取り除く」という動作を行います。

こちらが参考になるかと思います。

よって、pushPageを利用して12ページもの画面を上に積み上げ続けると、実際には、その下に1～11ページ分の画面が動作したままの状態になっています。そのためスマートフォンの処理能力を圧迫し、動作が重くなっていると予想されます。
ページを複数持つ場合でもpushPageやpopPageは十分有用ですが、このケースでは処理能力を超えてしまったということでしょう。

このような場合、１ページ毎の回答量を増やす（例えば１ページに３問ずつの回答欄を作る）、pushPageではなくreplacePage（現在の画面を入れ替える）を利用する（ただしその場合、画面が積み重なっていませんのでpopPageは利用できなくなります）などの対策を考える必要がありますね。

Comments

[satosatope]

ご丁寧にありがとうございます。
replacePageで画面を切り替えていく場合、前のページで入力された状態を保ったまま、popPageのようにbackすることは、難しいでしょうか？

[akabee]

難しいというか、不可能です。replacePageは今いるページを削除して新しいページに入れ替えますので、backする対象のページはそのときに既にないためです。

それでもそのような動作を実施したい場合どうするかということですが、「前のページで入力された状態を保ったまま、popPageのようにbackする」のではなく、画面遷移は常にreplacePageで行って常に新しくページを生成するが、前の回答内容はどこかに全て保持しておいて、画面に合わせてそれを呼び出すことでページを戻っているように見せるということを行うことになります。この場合は、多少難易度が上がります。
その実装方法についてもレクチャーできなくはありませんが、初心者であるということですし、利用しているフレームワーク（JavaScriptなのかAngularJSなのかvueなのかreactなのか）等についてもヒアリングした上で回答する必要がありますので、そこにこだわるよりは、一旦「１ページ毎の回答量を増やす」や「そもそも戻ることができないようにする」等の方法で回避をしておいて、時間があれば理想の処理の実現に取り組む方針で進めることをお勧めします。

[satosatope]

ありがとうございます。
現状、むずかいいことがよくわかりました。
すべてをスタックしていくことを回避するために、一つ前のページにbackすることは出来ても、それより前にはもどれないという仕様にしようかと思っています。
https://ja.onsen.io/v2/api/js/ons-navigator.html#method-removePage
このremovePageのindexとはどのように確認したらいいのでしょうか？

[akabee]

なるほど。ということは、常に現状のページよりも２つ前のページを削除しながら次のページに遷移しつづけるということですね。
ご質問のremovePageのindexは、私も試したことがないのでわかりません、すみません。時間があれば調べてみますが、私の回答を待つよりご自分で試したほうが早いでしょう。もしくは、こういった仕様レベルの問い合わせであれば、WEB上のドキュメントに記載されていないように見受けられますので開発元に問い合わせを行っても良いかもしれません。

確認方法としては、試行錯誤するしかないと思うのですが、
https://ja.onsen.io/v2/api/js/ons-navigator.html#properties
↑のpagesというプロパティが怪しいですね。おそらくこのpagesがarray（配列）で、初期画面がpages[0]、pushPageされたらpages[1]、page[2]・・というように増えていくのではないかと予想します。
この仮説が正しければ、ひとまず最初にページを削除するページ２の段階ではindex「0」のページを削除することになりますので、removePage(0)を実行すればよいのではないかと思います。
次が問題で、removePageされた後にpagesがどうなるかです。pages[0]～[2]がある状態で[0]を削除したときに、pages[0]～[1]のようにindexを前に詰めてくれるのか、pages[1]～[2]と、一度入ったindexは変更がないのか。
それによって次に削除するindexが変わりますね。前者であれば常にindex「0」を削除すれば良いですが、後者であれば0,1,2～と削除対象のindexも増えることになります。

勿論上記仮説が合っているかどうかは不明です。

[satosatope]

ありがとうございました。無事解決することができました。