skillup

技術ブログ

UI

検索ページの遷移に関して

投稿日:

検索ページの遷移に関してメモ。

基礎だが実際全部完全に網羅できているかというと不安な部分が多い。

基本仕様: 以下のようなページ構成を想定

  • 1ページ目は検索エリアと一覧が同時にでる
  • 一覧情報からはリンクで詳細画面に移動できる
  • ページャ―は1ページあたりいくつのリンク形式(インフィニティスクロールではない)

想定しないといけない遷移状態

  • 詳細ページから戻った時の検索状態の検索&ページャーの保存
  • 戻るのは戻るボタン&history.back
  • ページャーで1ページ目に移ったときに検索情報が保存されているか
  • パンや別リンクなどでうつったときにセッションやページャーがクリアされているか

よくある実装

  • 検索情報はGETで送り、セッションに保存する
  • 2ページ目以降はページ番号をGETで送り、検索情報はセッションで引き回す ※検索も含めてhiddenなどにいれて全てGETで回すということをすることもあり
  • 再検索された場合や、パンくずやリンクなどの場合、セッションを消す(ココが忘れやすいので注意)
  • リクエスト句(この場合GET)はセッションに常に優先する
  • 会員サイトなどだとPOSTで送信する分、historyback対策がやや大変。すべてsessionからデータを引っ張ってくる

特にhistoryback対策が大変です・・・

-UI
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Seleniumの値基本動作まとめ

以前、「Seleniumでの画面テスト」というエントリーでのテストフレームワークとして、Seleniumを紹介しました。 上記のエントリーですが、単なるインストールと基本的な起動、簡単な文字入力ぐらい …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

cakePHPのSSL設定+jQueryのError Loading Page

cakeで作ったアプリの認証画面でhttps環境だとError Loading Pageというエラーメッセージがでてしまい、ログインできないという事象が発生。 最初はSSLが原因かとおもっていたんです …

no image

アプリケーションの画面構成に関して

アプリケーションの画面の設計スタイルに関してよく使われるものを。 Contents1 2パネルのセレクタ2 カンバスとパレット3 1ウィンドウでのドリルダウン4 代替表示5 ウィザード6 オンデマンド …

no image

ユーザーの行動パターン

ソフトウェアデザインにおいて必要な要素の列挙 Contents1 安全な探求2 即座の喜び3 最小限での充足4 途中での方針変更5 回答の先送り6 少しずつの組み立て7 習慣化8 空間的な記憶9 展望 …