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

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

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

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

JavaScript

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

jQuery

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

Q&A

1回答

1843閲覧

ブラウザバックしたときに直前に生じた状態変化がリロードなしで戻り先のページに反映されるようにしたい

tofuonfire

総合スコア9

Ruby on Rails 5

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

JavaScript

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

jQuery

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

0グッド

3クリップ

投稿2019/08/17 06:00

編集2022/01/12 10:55

前提

プログラミング初学者です。知識に曖昧なところがあるため、分かりづらかったり間抜けな質問になっているかもしれませんが宜しくお願い致します。

現在RailsでSNSサイトを作っています。先日Railsチュートリアルを参考に、Ajaxを使ったフォロー機能の実装をしました。今はユーザー関連のページは次のような構成になっています。

まずユーザーの一覧ページがあり、一人一人のユーザーはカードとして並んでいます。
カードにはユーザーの名前(ユーザー詳細ページへのリンク)とフォローボタン(クリックで「未フォロー」か「フォロー中」に変化)があります。そしてユーザーの詳細ページにもフォローボタンがあります。

問題点

そして問題と感じているのは以下の流れです。

  1. ユーザー一覧ページから一人のユーザーの名前をクリックして、詳細ページに飛ぶ
  2. 詳細ページ内のフォローボタンをクリックで「未フォロー」から「フォロー中」にする
  3. そのまま先ほどの一覧ページにブラウザバック
  4. 当然キャッシュが表示されるので、一覧ページにおけるそのユーザーのボタン表示は「未フォロー」のまま
  5. リロードするとフォロー中表示に変わる

以上のような状況なので、キャッシュが表示されていると気づかずに4の段階で「未フォロー」状態のボタンをクリックしてしまうと上手く動作しないことになります。

試したこと・質問したいこと

そこで、ブラウザバックで一覧ページに戻ると自動的にリロードされるようJSを書いてみたのですが、リロードするたびに表示がチラついたり一瞬ずれたり時間がかかってしまうのがスマートではないなと感じていて、できればキャッシュを無効化・リロードする以外で、ブラウザバックしても直前のフォローボタンやフォローカウントなどの状態変化が戻り先のページに反映されるようにしたいのですが、どういった方法があるでしょうか?

また、Twitterなどの大手SNSサイトでは、ブラウザバックを挟んでもフォロー状態を含む様々な変化が前のページにもリロードなしで反映されるようになっていますが、あれはどういった技術を用いているのでしょうか?

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

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

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

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

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

guest

回答1

0

より良い方法があるかもしれませんが、こんなのはどうでしょうか

詳細ページ内のフォローボタンをクリック時にユーザIDとフォロー状況等、一覧ページで必要な情報ををCookieに保存。

一覧ページにonpageshowイベントを追加し、Cookieに値があれば該当のユーザのフォロー状況などを
変更してCookieを削除する。

投稿2019/08/19 01:59

yxt003

総合スコア184

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

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

tofuonfire

2019/08/19 08:33

回答ありがとうございます! >Cookieに値があれば該当のユーザのフォロー状況などを変更して 変更というのは「DBとの通信なしで、クッキーの値に応じてそのままフォロー状態を反転させたり、フォロー関係のカウントをプラスする」みたいなことになるでしょうか? その方法も考えたのですが、さらに古い履歴にユーザーの情報が表示されるページが存在した場合、それらのページにまで平等に影響を与えることができないのと、整合性がとれなくなるかもしれないと思い立って断念しました。 ブラウザバックを検知すると、クッキーで保存した全てのユーザーの状態をDBからの情報を元に部分的に更新するみたいな事ができれば理想なのですが…
yxt003

2019/08/19 08:44

>クッキーで保存した全てのユーザーの状態をDBからの情報を元に部分的に更新する この処理をするとなるとajaxでDB接続して部分的に更新となるので工数が増えそうですね。 そこまでするくらいならリロードのちらつきくらいは許容したいと個人的には思います。
tofuonfire

2019/08/19 08:56

そうですよね…自分的にも長い事調べてダメだったので、リロードさせる方向で気持ちが固まりつつあります汗 回答ありがとうございました????‍♂️
yxt003

2019/08/19 23:44

技術的なことではなく、仕様やUX的な話になるので申し訳ありませんが、 なぜページの表示とDBとの整合性を取る必要があるのかを考える必要があると思います。 極端な話、ブラウザバック時だけではなく、ユーザーが複数タブや異なるブラウザでページを見ているケースでも整合性を合わせたいとなるとPush通知等を実装する必要がでてきて、さらに工数が上がります。 今回の整合性を取りたい理由が「フォローしたはずがされてない!」とユーザーに思わせないためでしたら >キャッシュが表示されていると気づかずに4の段階で「未フォロー」状態のボタンをクリックしてしまう この時に「すでにフォロー済みです。ページを最新の状態にするため再読み込みをしてください」 の様なアラートを出すだけでもいいと思います。 もちろん時間をかけて部分更新を実装するのもいいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問