Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。History)AJAXのUI問題に注目し、AJAXベースのアプリケーションでブラウザのデフォルト動作を維持するための取り組みを行っているフレームワークがいくつかあります。History)フレームワークです。このフレームワークは、DhtmlHistoryとHistoryStorageという2つのオープンソースJavaScriptクラスから成っています。この2つのクラスを使用することにより、AJAXアプリケーションでブックマークと[戻る]/[進む]ボタンをサポートすることが可能になります。DhtmlHistoryクラスはAJAXアプリケーションの履歴の抽象化を実現します。ブラウザに履歴イベントを追加するには、AJAXページでadd()メソッドを呼び出して新しい位置と関連履歴データを指定します。DhtmlHistoryクラスは、#new-locationなどのアンカーハッシュを使ってブラウザの現在のURLを更新し、この新しいURLに履歴データを関連付けます。AJAXアプリケーションは自分自身を履歴リスナとして登録します。ユーザーが[戻る]ボタンと[進む]ボタンで移動を行うと、ブラウザはadd()呼び出しで保存されたブラウザの新しい位置と履歴データを提供する履歴イベントを作動させます。HistoryStorageクラスを使用すると、任意の量の履歴データを保存することができます。通常のWebページでは、ユーザーが新しいWebサイトに移動すると、ブラウザは元のWebページのアプリケーションとJavaScriptの状態をアンロードして消し去ります。ユーザーが後から[戻る]ボタンでそのページに戻った場合、そのデータはすっかり失われています。HistoryStorageクラスはこの問題を解決するために、put()、get()、hasKey()といった単純なハッシュテーブルメソッドを含むAPIを公開しています。開発者はこれらのメソッドを使用して、ユーザーがWebページから去った後も任意の量のデータを保存することができます。ユーザーが後から[戻る]ボタンで戻った場合、ページ内のコードはHistoryStorageクラスを通じて保存されたデータにアクセスできます。内部的な話になりますが、このデータストレージは隠されたフォームフィールドによって実現されており、ユーザーがページから去った後もブラウザがフォームフィールド値を自動的に保存するという点を利用しています。DojoAJAXのナビゲーション問題のもう1つの解決策となるのがDojoです。DojoはWebアプリケーションが[戻る]ボタンと[進む]ボタンのクリックを捕捉し、ブラウザのロケーションフィールドにブックマーク用の一意のURLを設定できるようにします。DojoはJavaScriptで書かれたオープンソースのDHTMLツールキットで、Webページ(またはJavaScriptをサポートする他の環境)に動的な機能を組み込むのに役立ちます。Dojoのコンポーネントを使用すると、Webサイトの使いやすさと応答性と機能性を高めることができます。Dojoでは、複雑なユーザーインターフェイスを容易に構築したり、対話的なウィジェットをすばやくプロトタイプ化したり、トランジションをアニメーション化したりできます。Dojoの低レベルのAPIと互換性レイヤは、移植可能なJavaScriptの記述やスクリプトの単純化に貢献します。そのイベントシステムや入出力API、汎用言語拡張は、強力なプログラミング環境の基盤となります。dojo.undo.browserモジュールはブラウザの履歴へのアクセスを提供し、ユーザーがAJAXアプリケーションから出なくても[戻る]ボタンと[進む]ボタンをクリックできるようにします。このツールキットは[戻る]イベントと[進む]イベントが発生したときにコールバックメッセージを発行して、開発者にWebアプリケーションを適切に更新する機会を与えます。Dojoは隠されたIFRAMEを使ったり、ページURLのハッシュ部分に一意の値を追加したりすることで、ブラウザの履歴を生成します。URLハッシュ形式に含まれるアプリケーション状態識別子を変更してもページの更新は行われないので、アプリケーションの状態を保持するにはURLハッシュを使用するのが理想的です。Dojoが生成する一意のハッシュ値はもともとブックマークをサポートしていますが、アプリケーション状態識別子としてもっと意味のある値を指定すれば、ブックマークの可読性を高めることができます。Dojoの状態オブジェクトはページの状態を表します。この状態オブジェクトは、ユーザーが[戻る]ボタンと[進む]ボタンをクリックしたときにコールバックを取得します。状態オブジェクトはdojo.undo.browserに直接登録するだけでなく、イベントをバインドするdojo.io.bind()に渡すこともできます。Dojoの設定dojo.undo.browserを使用するには次のようにします。djConfig内でpreventBackButtonFixプロパティをfalseとして定義します。このプロパティにより、Dojoが隠されたIFRAMEをdocument.write()コマンドで現在のページに追加できるようになります。これを行わないと、dojo.undo.browserは正しく機能しません。適切なrequireステートメント(dojo.require("dojo.undo.browser");)を追加します。dojo.undo.browser.setInitialState(state);を呼び出すことにより、ページの初期状態を登録します。stateの部分には、ユーザーが[戻る]ボタンをクリックしたときに通知される状態オブジェクトを指定します。これでWebアプリケーションの開始まで戻ります(ユーザーが[戻る]ボタンをもう一度クリックすると、ブラウザはアプリケーションに先行するページ(もしあれば)に移動します)。状態オブジェクトでは次の機能を定義する必要があります。forward()、forwardButton()、またはhandle(type)(typeには文字列"forward"を指定)以下は非常に単純な状態オブジェクトの例です。}};ユーザーアクションの結果を表す状態オブジェクトを登録するには、次の呼び出しを使用します。dojo.undo.browser.addToHistory(state);あるいは、dojo.io.bind()を使用する場合で、かつ状態オブジェクトにback()関数、backButton()関数、またはchangeUrlプロパティが含まれているときは、dojo.io.bind()がdojo.undo.browserの呼び出しを処理します(これはXMLHTTPTransportとScriptSrcTransportのみを処理します)。ブラウザのアドレスバー内のURLを変更するには、状態オブジェクトにchangeUrlプロパティを含めます。このプロパティをtrueに設定すると、dojo.undo.browserはフラグメント識別子に対して一意の値を生成します。それ以外の値(未定義、null、ゼロ、空の文字列を除く)に設定すると、その値がフラグメント識別子として使われます。開発者はDojoにハッシュ値を選択させるか、カスタムハッシュ値を設定することができます。どちらにしても、この機能によって、コードが現在のページ状態を再構築できるようなやり方で、ユーザーがページにブックマークを付けることが可能になります。1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。Singh)大企業のWebアプリケーション開発に携わって4年以上の経験を持つソフトウェアエンジニア。Indiaの主任エンジニアとして勤務。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。12:00法務担当者、6割超が今後業務で「生成AIを使用したい」と回答。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。