質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

1587閲覧

検索一覧から詳細画面へ遷移した後の、戻るボタンを押した後の挙動について

olaf

総合スコア17

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/01/12 09:21

編集2022/01/12 10:55

Ruby on Rails、jQueryで検索画面を作成しようと考えています。
ユーザーは以下流れで利用することが多いと思います。

①検索一覧で画面を下へスクロール
②①の後、興味のある内容Aを見つけたのでクリックし検索一覧から詳細画面へ遷移
③戻るボタンを押し、検索一覧へ戻る

③後の検索一覧において、内容Aがファーストビューになる状態にしたいのですが、
やり方が分かりません。ご教示いただければ幸いです。

〜1/20追記〜
ちなみに、新規タブ追加で実装したくない理由は、レスポンシブ対応を求められており、
スマホではユーザビリティがよくないためです。

また、いろいろなWEBサービスを調べた結果、メルカリが私の求めるUIでした。
https://www.mercari.com/jp/search/?keyword=javascript

メルカリの検索は、商品の詳細画面から検索一覧画面へ戻ると、元の位置に戻ります。

この実装の仕方が分からないため、お手数ですがご回答のほどよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

RubyOnRails等に限らずですがとりあえず別ウィンドウ(別タブ)で表示されるようにするのではダメですか?
そうするとそもそも同じ画面は残ったままですので要望は果たせる気がします。

あくまで同じ画面(ウィンドウというかタブと言うか)で処理したい場合はクリックされたときの状態を記憶しておくことが肝心となります。
結局は質問者さんの作り次第なので間違いなくこれで戻せるかは質問文だけだと全く分からないのですが、「戻る」クリックした際のURL、もしくはパラメータをGETなりで渡して詳細画面の戻るにリンクさせるのが大筋の基本だと思います。
ようするに「戻る」のURLをクリックした際に表示されているURLと同一にすると言うことです。
これはURLにパラメータ(クエリ)としてページ数などを含んでいる場合なので、もし別のパラメータで現在のページ数などを持っているのであればいずれにしてもそれを戻す作業をしてあげれば良いと言うことになると思います。

ページ内の位置としても細かくやるなら現在のトップからのピクセルをクリック時に記録してページが表示された際にその位置へスクロールさせる様な事をjQueryで行えば良いと思います。
雑にやるなら例えばページ当たり50件の検索結果であれば全ての検索結果にアンカーを付けておいて「戻る」リンクで飛ばすのもアリでしょうかね。

個人的にはたまに自分のお客さんでも質問者さんと同じ要望をされることがあるのですが、なぜ別タブではダメなのか聞いても個人的に納得できる答えをもらったことが未だに無いんですが・・まあ仕事だからやりますが・・ 苦笑

投稿2018/01/12 19:01

landy77

総合スコア1614

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

olaf

2018/01/13 02:28

ご回答ありがとうございます!説明不足で申し訳ございません。 別ウィンドウを避けたい理由は、レスポンシブ対応で実装する必要があり、 スマホで別ウィンドウを開かせるのは、使い勝手がよくないためです。 やりたいことはページ内の位置を指定してあげることですので、やはりjQueryでスクロールしたり、各検索結果にアンカーをつけるやり方しかないですよね・・・。
guest

0

疑似ダイアログにする手がありますね。
Ajaxで処理するため、実際には遷移しません。
Twitterのような感じです。

投稿2018/01/15 03:20

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問