実用的なAJAX：ブラウザの[戻る]ボタンをどうするか

注：この記事では、AJAXメソッドを使用してページのコンテンツをサーバーからクライアントに転送する際のブラウザーの壊れた戻るボタンの問題の概要を説明します。 この記事では、AJAXの基本原則と、記載されている問題の可能な解決策について説明します。 イタリック体は私のコメントを与えられます。



この記事は、AJAXが現在取り組んでいる批判の一部を排除することを目的とした一連の資料の最初の記事です（ 2番目の記事はブックマークの操作に専念します ）。

問題の本質

当初から、Webは、あるページから別のページにハイパーリンクを配置する機能に基づいていました。 ページ間のリンクは主に双方向でした。つまり、ページAからページBへのリンクをたどると、リンクがページAに戻ったり、ブラウザの戻るボタンを使用したりするのを防ぐことができません。 このようなページのチェーンは、ブラウザーでの閲覧履歴を表し、各ページには一意のURLがあります。 これを技術的な側面から想像すると、そのようなチェーンはスタックとして実装されます。 将来、「水平」リンクという用語を使用して、このようなスタックの要素間の関係を参照します。







図1.水平リンク



水平リンク上に構築され、AJAXを使用するページについて説明するために、「垂直」リンクという用語を紹介します。 垂直リンクは現在のページに表示される追加情報へのリンクですが、同時にそれらへのアクセスはAJAXメソッドを使用してのみ実行されます（ 注：元のXMLHttpRequestでは、特にiframe



を使用して情報を取得できるため、紹介しますより一般的な用語 ）。 つまり、画面上のページの新しいコンテンツを取得しますが、このページ自体のURLはブラウザーで変更されません。 垂直リンクはページURLを変更しないため、ブラウザー履歴スタックに新しい要素も追加されません。 その結果、ユーザーがブラウザーの「戻る」ボタンをクリックすると、前の水平ページに移動します。これには、画面上にあったページに表示されたすべての変更が含まれていない場合があります。







図2. 2番目のURLとサーバー間の垂直リンク

WebサイトおよびWebアプリケーション

この問題を解決するために使用すべきアプローチは、開発しているもの（WebサイトまたはWebアプリケーション）に直接依存します。 これらの2つの概念を分離するのは難しい場合がありますが、通常、Webアプリケーションは次のプロパティで区別できます。

• 使用前に承認が必要
• ユーザーセッションでの真剣な仕事
• ユーザーがアプリケーションと対話するプロセスには、非常に明確な始まりと終わりがあります

Webサイトの例はYahoo!です。 FinanceおよびE * TRADE -Webアプリケーションとして。 ユーザーの観点からは、これら2つのタイプの間に明確な線を引くことは常に可能とは限りません。 ただし、Web開発者は、Webサイトとアプリケーションのどちらを開発するかを最初から決定する必要がありますか？ これを理解したら、簡単な質問をすることができます。インターネットがない場合、開発の最も良い説明は何ですか。それはWord'ovyhドキュメントのセットですか、デスクトップアプリケーションですか。 デスクトップアプリケーションと同等のWebアプリケーションを検討してください。唯一の違いは、最初のアプリケーションが通常の操作のためにブラウザーを必要とすることです。 自問できるもう1つの質問は、「情報を提供するか、機能を提供することが主な目標ですか？」です。

最初の解決策：垂直リンクを乱用しないでください

パブリックアクセス用のWebサイトを作成する場合は、緊急の場合にのみAJAXを使用することをお勧めします（悪用​​しないでください）。 ページ全体を更新するためにページのURLを変更する必要があるかもしれませんが、同時に、ブラウザでバックログボタンが正しく機能すると信じています。 すべてのAJAX呼び出しが垂直リンクに強く関連しているわけではないことを覚えておいてください（ 注：私が理解しているように、著者は主にページの小さな部分をメインコンテンツを変更せずに変更することを意味しています） 。



最も簡単な方法は、ブラウザーの戻るボタンの操作性を考慮しないことですが、これを完全に無視するべきではありません。 多数の垂直リンクを使用し、単一のURLに結び付けられた完全なアプリケーションを作成する代わりに、本当に必要な場所に特定の数の水平リンクを作成します。 つまり、水平リンクを使用して、アプリケーションの各部分を分離します。たとえば、紙の文献で行われているように（本は部分と章に分かれています）。 従来の水平リンクと垂直リンクの合理的な組み合わせを使用して、AJAXのパワーとブラウザー履歴のナビゲーション機能を使用する機能のバランスを取ることができます。



注：例として、おそらく、いくつかの追加機能を提供するためだけにAJAXが使用されている多くの最新サイトを引用できます。特に、これはHabrahabrとコメントの投票/追加のメカニズムです。

2番目の解決策：特別なAJAXライブラリを使用する

現在、この問題を解決する目的を含め、十分な数のオープンソースライブラリが作成されています。 それらのほとんどは、何らかの方法でアンカーを使用します（リンクの '＃'（ ハッシュ ）の後に指定されます）。 結果は、新しい水平リンクをエミュレートするようにページURLを変更する垂直リンクです（ 注：垂直リンクをクリックすると 、現在のページをオーバーロードすることなく、 疑似水平リンクもクリックします ）。 これらの各ライブラリは、Webページにもう1つのレベルの処理（複雑さ、 複雑さ ）を追加しますが、それでも開発に簡単に統合できます。



注：疑似水平リンクを作成するための基本的な方法を以下にグループ化します。元の記事のリストを展開して、私が知っている例でそれらを補足しようとしました。

1. 注：ソリューションの本質：AJAXが呼び出されるたびに、「履歴」スタックの現在のアイテム番号がアンカーとしてページURLに追加されます。実際には、単に数字が増えます。 ブラウザの戻るボタンをクリックすると、ページのURLが以前のものに変わります。 100（200、400、1000）ミリ秒ごとに、ページはURLにアンカーがあるかどうかを確認し、アンカーが変更された場合、現在のアンカーに対応するデータがロードされます（=「履歴」スタックの要素）。
   
   
   
   マイク・ステンハウスのアプローチ。 デモ版は非常にシンプルで、ほとんどすべてのブラウザーで動作します。 このソリューションのデモ版はこのリンクで表示でき、リンクをクリックするとページのURLがどうなるかを追跡できます。 常にエラーメッセージが表示されますが、ソリューションの本質を理解できます
   
   
   
   Brad Neubergのアプローチであるこのライブラリは、コードを不必要に複雑にすることなく、できる限りクロスブラウザにしようとします。 BSDオープンソースライセンスの下で利用できるのは良いことです。 Bradは、このライブラリを作成するための段階的な手順とオンラインデモを公開しています 。
   
   
   
   jQueryライブラリーを使用したMikageのアプローチについては、 こちらをご覧ください 。
   
   
2. 注：ソリューションの本質：ページ自体のURLを変更する代わりに、URLが読み込まれる非表示のiframe
   
   
   
   要素が作成され、アンカーが変更されます（この場合、「＃」の直後にいくつかのパラメーターを設定できるため、このアプローチはより柔軟です（URLなど） AJAXリクエストまたは追加のパラメータの場合、これはヘッドページのアドレスを変更しません。つまり、ユーザーの場合、実際には何も変更されませんが、閲覧履歴は更新されます）。 この考えに基づいて、いくつかのフレームワークが作成されました。
   
   
   
   Plexは、ブラウザの[戻る]ボタンのエミュレーションなど、多くの機能をサポートするオープンソースのAJAXフレームワークです。
   
   
   
   Dojoは、いくつかのAJAX機能を提供し、ブラウザーの戻るボタンをエミュレートする別のオープンソースAJAXフレームワークです。
   
   
   
   Streampadブログでこのアプローチの別のバリエーションを発見しました 。著者はSafariでのパフォーマンスを保証しています。
   
   
3. 注：次のメソッドは前のメソッドとほとんど異なりませんが、「ネイティブ」AJAXメソッドの代わりに、非表示のiframe
   
   
   
   送信されるデータを使用するだけなので、追加のアクションは必要ありません。ブラウザの閲覧履歴は、このiframe
   
   
   
   に1つまたは別のURLをロードし、それに応じてメインページを既に更新します。
   
   
   
   アプローチとデモバージョンの 説明 。
   
   
4. また、特にdocument.save()
   
   
   
   またはdocument.body.onbeforeunload()
   
   
   
   を使用する他のアプローチもいくつかありますが、これらはクロスブラウザーではありません。
   
   

上記のソリューションのいくつかについて説明しているVladimira Kelmanaによる優れたレビュー記事に言及せざるを得ません。

解決策3：ユーザーに戻るボタンの便利な代替手段を提供する

従来、戻るボタンは、「元の場所に戻る」という概念を実装するのに役立ちました。ただし、クリックすると、多くのユーザーは実際に「今したことをキャンセルする」ことを意味します。 他の目的で「戻る」ボタンを使用する誘惑からそれらを保存するために、AJAXを使用してWebアプリケーションで「キャンセル」または「ステップバック」機能を持つボタンを作成できます。 たとえば、Web上で高度なテキストエディタを開発している場合、ブラウザの[戻る]ボタンが誤って押されたときにユーザーがドキュメント全体を失うのを防ぐ「キャンセル」ボタンを作成します。



しかし、私が今まで見た中で最悪の解決策は、AJAXメソッドを使用してWebページ自体に代替の戻るボタンを作成することです。 多くのユーザーは、ブラウザーとWebページの間の境界にほとんど慣れることができず、ブラウザーが終了し、ページ自体が実際に開始する場所を理解できました。 彼らの不便さを悪化させる必要はありません。 結局のところ、これに簡単に対処したユーザーが別の「革新」に慣れ、サイトのために習慣を変更できることを保証することはできません。 ユーザーに別のナビゲーションと機能を提供すれば十分ですが、このボタンを再度作成することはありません。



結論として、Webアプリケーションを作成するときにブラウザーの標準履歴の機能を引き続き制限する場合は、何らかの方法でユーザーに通知してください。 AJAXは、この機能を制限する最初の方法ではありません。また、おそらく、ユーザーもあなたからそれを知ることはないでしょう。 （ブラウザの戻るボタンをクリックすると、クレジットカードから金額を再び引き出すことができるアプレット、Flash、およびeコマースアプリケーションもあります。）サイトでの彼のアクションに対して最終的にユーザーに課す責任の重みはあなたの企業文化に依存しますが、それを少し簡単にしてみませんか？



読んでくれて、読んでくれて、私の翻訳と記事を読んでくれてありがとう。 記事に事実に誤りや誤りがあることを示しているか、または追加情報へのリンクを提供している可能性があるすべての人々に事前に感謝したいと思います。



Web Optimizator：サイトの読み込み速度の確認