skillup

技術ブログ

UI

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

投稿日:

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

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

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

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

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

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

よくある実装

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

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

-UI
-,

執筆者:


comment

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

関連記事

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

ソフトウェアデザインの目的

本日からのお勉強のお題は、UIの設計などについて。 参考図書:デザイニングインターフェイス Contents1 ソフトウェアとは目的達成の手段である2 ユーザー調査の基礎3 ユーザーの学習意欲・リテラ …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

CSSで背景画像の出力 ~透過編~

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。 一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単な …