Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。MB)AJAXの欠点として、戻る、進む、ブックマークといった標準的なブラウザ機能が無効になり、ユーザの直感的な操作を妨げることが挙げられます。本稿では、URLハッシュを利用して解決する手法を紹介し、JavaScriptライブラリのDojoで、実際に履歴機能を実装する方法を解説します。3検索アプリケーションはじめにAJAXは、デスクトップアプリケーションと同じくらい対話性と応答性のよいリッチなWebアプリケーションを開発する手段として、多くの開発者に採用されてきました。AJAXでは、WebのUIを異なるセグメントに分割します。ユーザーはあるセグメントで操作を実行し、その操作が終わらないうちに他のセグメントで作業を開始することができます。AJAXには大きな欠点があります。戻る、進む、ブックマークといった標準的なブラウザ機能が無効になるのです。AJAXアプリケーションの開発者は、ユーザーをAJAXの欠点に無理やり順応させるのではなく、アプリケーションを従来のWebインタラクションスタイルに合わせ、次の機能を提供するようにしなければなりません。[戻る]/[進む]ボタンが機能するようにして、エンドユーザーが直観的なやり方で履歴ページ間を移動できるようにする。ユーザーがブックマークを作成できるようにする。[更新]ボタンが予想どおりに機能するようにして、現在の状態が更新されるようにする(アプリケーションを再初期化したり、予想外のページや状態に再設定したりしない)。エンドユーザーがブラウザの標準の検索機能でページを検索できるようにする。検索エンジンがAJAXアプリケーション内のページをインデックス化して、検索語までのディープリンクを作成できるようにする。典型的なAJAXアプリケーションは最初の3つの機能を実現していません。XMLHttpRequestオブジェクトやDOM更新などのAJAXテクノロジを使用する動的なWebアプリケーションは、ブラウザの履歴を正しく更新しません。バックグラウンドリクエストを使ってデータを取得すると、ページURLが変更されないからです。そのため、ユーザーが[戻る]ボタンをクリックすると、おそらくWebアプリケーションから彼方にジャンプして、保存された状態が失われることになるでしょう。[更新]ボタンをクリックすると、AJAXアプリケーションが再初期化され、現在のページの初期状態に戻ります(実際、アプリケーションが再起動されることが多いでしょう)。同じ理由で、ブックマークも機能しません。ブックマークを使ってAJAXのURLに戻っても、ユーザーがブックマークを付けた時点のページ状態にならないかもしれません。ユーザーの立場からすると、標準的なナビゲーション動作はとても重要です。ユーザーはWebアプリケーションで一定のインタラクションが当然起こるものと期待しますが、典型的なAJAXアプリケーションでは必ずしもそうならないのです。ユーザーがブラウザのURLを使ってページにブックマークを付けた場合、そのページを作成するためにAJAXアプリケーションが作成した中間ステップ(バックグラウンドリクエスト)についての情報は失われます。ユーザーがブラウザの[戻る]ボタンをクリックすると、前のページが表示されますが、これは一般に前のページ状態ではありません。AJAXアプリケーションでは「ページ」と「ページ状態」の違いが重要になります。この2つはユーザーにとっては同じことでも、ブラウザにとってはまったく別物だからです。例として、AJAXベースの検索アプリケーションを考えてみましょう。最初のページには、ユーザーが検索条件を入力する検索フォームが含まれています。これをPage1とします。ユーザーが入力したフォームを送信すると、最初の数個の検索結果が含まれたページ(Page2)が表示されます。このページには、次の検索結果セットを含むページ(Page3)を見るためのリンクが表示されます(さらに後続のページがある場合は、同様に続きます)。アプリケーションがPage3のための次の検索結果セットを取得するためには、非同期呼び出しを送信し、取得したデータをPage2のDOM構造に入れるという処理を行います。このとき、ページ状態は変化しますが、ページのURLは変化せずPage2のままです。ユーザーは新しいページ(Page3)を見ているつもりでも、ブラウザ上ではこのアプリケーションの履歴スタックは次のようになっているのです。Page2Page1そのため、ユーザーはPage3で[戻る]ボタンをクリックしたときに、当然、最初の検索結果セット(元のPage2)が表示されるものと期待しますが、ブラウザは実直にPage1に戻ります。同様に、ユーザーがPage3を見ているときにページの更新を行うと、代わりにPage2が表示されます。このような直観に反した動作により、ユーザーが混乱し、アプリケーションが使いにくくなります。解決策AJAXアプリケーションで作成される各ドキュメントをそれ自身のURLでアドレスできれば、[戻る]ボタンとブックマークの問題を解決できるでしょう。この検索アプリケーションが最初の結果ページと2番目のページを別々のURLで参照していることに注目してください。2つのURLがそれぞれ異なるリソースドキュメントを指しているわけです。実際にAJAXドキュメントを構成している要素は、開始時点のドキュメントと、ドキュメントのノードを追加、削除、変更する不定の数のDOM操作です。したがって、ある時点のAJAXドキュメントを再作成するには、まず開始時点のドキュメントのURLを取得したうえで、目的の時点までに行われたDOM変更を適用する必要があります。各AJAXリクエストが一意のURLを持っていれば、ずっと簡単にできるでしょう。URLハッシュの入力URLハッシュとは、シャープ記号(#)の後に続くURL部分です。通常、URLハッシュは他のページではなく、同じページ内の特定の位置を指すので、長いページ内の特定の位置にジャンプするためのリンクで使われます。いう使い方をする必要はありません。URLハッシュを使って、DOM操作に関する情報をAJAXアプリケーション内に格納する、つまり各AJAXリクエストに一意のURLを与えることもできます。URLハッシュには、AJAX履歴を作成するうえで非常に有利な点が2つあります。その1つは、現在のURL内のハッシュを変更してもページの再ロードが起こらないことです。そのため、ページを変更せずに一意のURLを作成することができます。1つの利点は、ブラウザがもともとURLハッシュをページ履歴の一部として扱っていることです。URLハッシュに移動すると、ブラウザの履歴リストにエントリが追加されます。現在のURLのハッシュマークの後ろに明確なエントリを追加すれば、AJAXアプリケーションで標準的な前進/後退動作とブックマーク機能を再現するのに役立つ履歴トレールを作成できます。次のようなURLハッシュを使って、検索アプリケーションの2つの結果ページを指すことができます。http://searchserver/search.jsp?searchText=television#page=1http://searchserver/search.jsp?searchText=television#page=2これらのURLハッシュ(page=1とpage=2)は、ユーザーが現在見ている検索ページを指しています。1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。Singh)大企業のWebアプリケーション開発に携わって4年以上の経験を持つソフトウェアエンジニア。Indiaの主任エンジニアとして勤務。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。