TNC Ajax Site Module
■ サイト内の全ての内部リンクを自動的に Ajax 化する
■ 全てのコンテンツをページ遷移無しで迅速に表示し、その際にリッチなＵＸを提供する
■ 全てのコンテンツをページ遷移無しで迅速に表示し、その際にリッチなＵＸを提供する
モジュールの概要
TNC Ajax Site Module は、その名称の通り、サイト全体を Ajax 化するためのモジュールです。このモジュールを利用することにより、サイト内の全ての内部リンクを自動的に Ajax 化することができます。それにより、内部リンクのクリックに対して、リクエストされたコンテンツのページ遷移無しでのより迅速な表示と、その際のよりリッチなエフェクトを提供します。そして、この２つの効果により、ユーザーの方のサイト閲覧時における利便性の向上を図ると共に、Web サイトや Web アプリケーションにおいて、ユーザーの方の「画面を更新する」というユーザー・エクスペリエンス（ＵＸ）を、ネイティブ・アプリケーションのそれのように、より快適なものに、より魅力的なものにすることを目指しています。そのような目的が達成できた場合には、それらは結果として、（１）量的側面として、ユーザーの方一人当たりの内部リンクのクリック数の増大、すなわち、コンテンツ接触機会の増大、（２）質的側面として、サイトに対する印象・評価・価値の向上、に繋がるものと考えています。※Drupal 7 にのみ対応しています。
開発履歴
■2014年01月15日 UPDATE｜ブラウザの back ボタンと forward ボタンがダブルクリックされた場合などに対応しました。
■2012年05月02日 UPDATE｜Ajax でのリクエストの際に、iOS4 上の Safari 独自の挙動に対応しました。
■2011年08月08日 UPDATE｜Google Chrome 13 において、想定通り稼働することを確認しました。
■2011年08月04日 UPDATE｜ページ切替時のエフェクトの稼働時間を「一定とする」か「可変とする」か、選択できるようにしました。
■2011年06月11日 UPDATE｜一旦表示されたページのデータを保存・再利用するように変更しました。
■2011年06月11日 UPDATE｜Safari 5 に対応しました。
■2011年06月10日 UPDATE｜Safari 5、Google Chrome 11・12 への対応を一旦停止しました。
■2011年06月09日 UPDATE｜HTML 5 の機能を利用して、ブラウザの Back ボタン・Forward ボタンが有効に働くようにしました。
■2011年04月20日 UPDATE｜多言語化に対応しました。
■2011年03月08日 LAUNCH｜当サイトにて、実運用を開始しました。｜Information No.0022
（アップデート内容の詳細につきましては、このページの最下部にてインフォメーションしております。）
■2012年05月02日 UPDATE｜Ajax でのリクエストの際に、iOS4 上の Safari 独自の挙動に対応しました。
■2011年08月08日 UPDATE｜Google Chrome 13 において、想定通り稼働することを確認しました。
■2011年08月04日 UPDATE｜ページ切替時のエフェクトの稼働時間を「一定とする」か「可変とする」か、選択できるようにしました。
■2011年06月11日 UPDATE｜一旦表示されたページのデータを保存・再利用するように変更しました。
■2011年06月11日 UPDATE｜Safari 5 に対応しました。
■2011年06月10日 UPDATE｜Safari 5、Google Chrome 11・12 への対応を一旦停止しました。
■2011年06月09日 UPDATE｜HTML 5 の機能を利用して、ブラウザの Back ボタン・Forward ボタンが有効に働くようにしました。
■2011年04月20日 UPDATE｜多言語化に対応しました。
■2011年03月08日 LAUNCH｜当サイトにて、実運用を開始しました。｜Information No.0022
（アップデート内容の詳細につきましては、このページの最下部にてインフォメーションしております。）
特徴１：様々な種類のリンクに対応
TNC Ajax Site Module は、様々なタイプの内部リンクに対応しています。現在のところ、リンクタグのターゲットＵＲＬの指定として、
「http://www.example.com/?q=blog/20081101」
「http://www.example.com/blog/20081101」
「/?q=blog/20081101」
「/blog/20081101」
「./?q=blog/20081101」
「./20081101」「../blog」
などの形式に対応しています。リンクがこれらの形式であれば、作り込み等一切無しに、それらを自動的に Ajax 対応化します。
「http://www.example.com/?q=blog/20081101」
「http://www.example.com/blog/20081101」
「/?q=blog/20081101」
「/blog/20081101」
「./?q=blog/20081101」
「./20081101」「../blog」
などの形式に対応しています。リンクがこれらの形式であれば、作り込み等一切無しに、それらを自動的に Ajax 対応化します。
特徴２：Ajax 化の対象を細かく選定可能
TNC Ajax Site Module は、body タグ内の全てのリンクを Ajax 化の対象にすることもできますし、ある特定のエリア（複数指定可）のみに限定することもできます。例えば、ヘッダ領域やフッタ領域は除外しコンテンツ領域のみを Ajax 化の対象とする、といったことが可能です。対象エリアの指定は、HTML の class や id によって行いますので、Drupal の Region 単位よりも細かい指定が可能です。また、特定の class や id をもつリンク（複数指定可）を、Ajax 化の対象から除外することも可能です。これにより、例えば、それ自身で既に Ajax 化されているブロックコンテンツなどを、当モジュールによる Ajax 化の対象から除外することができます。
特徴３：通常リクエストと全く同じコンテンツ
Ajax リクエストは、一旦は当モジュール内での処理を経由することになりますが、マークアップの構築としては、Drupal の通常のリクエスト処理と同じプロセスを経るようにしているため、通常のリクエストと全く同じコンテンツを表示することができます。また、マークアップの結果をブラウザに返す際には、リクエストされたページを想定通りに表示・機能させるために追加的に必要となるスタイルシート、スクリプトファイルのみを読み込ませるようにしています。それにより、Ajax 化による通信の簡略化に加えて、ブラウザとサーバ間の通信を更に最小化することで、ブラウザにおけるレンダリングの高速化を図っています。
特徴４：オリジナルのエフェクトも実行可能
当モジュールは、直接的には、内部リンクを Ajax 化するという機能を提供するわけですが、その真の目的は、ユーザーの方の「画面を更新する」という体験（ＵＸ）を、より快適に、より魅力的にすることです。そして、その部分に大きな影響を与えるのが、Ajax リクエストの際に提供するエフェクトのクオリティです。デフォルトでは、画面を半透明のブラックでオーバーレイして、画面中央にメッセージを表示した上で、時間の経過と共にスカイブルーのブロックが増えていくように描画（JavaScript による）していますが、この部分については、オリジナルのエフェクト（＝JavaScrip コード）に差し替えることができるようにしています。そのため、サイト独自のＵＸを提供することも可能です。
その他の特徴
（１）「Back」ボタンの実装：画面右下角に「Back」ボタンを表示して、ユーザーの方はこれを使って Ajax での閲覧履歴を遡ることができるようになっています。（２）ブラウザのタイトルを更新：Ajax リクエストにより表示されるページのタイトルは新しいものへの更新されるようになっています。また、現実的にはあまり意味はありませんが、Ajax リクエストによる HTML をできるだけ通常リクエストの場合と同様にしたいという意図から、HTML の head タグ内のキーワードとディスクリプションも更新しています。（３）リクエストされたパスを表示：Ajax リクエストされたパスは、ハッシュタグを付けて、ブラウザのＵＲＬ欄に表示し、ユーザーの方が確認できるようにしています。
実例
当サイトは、Drupal 7 へのバージョンアップに際して、新規に開発したこのモジュールを導入し、全面的に Ajax 化しています。もし可能であれば、ブルーのリンクをいくつかクリックしていただき、体感してみていただけましたらと思います。当サイトの場合、サーバー・ネットワーク環境としては決して強力ではないため、通常のリクエストの場合にはレンダリングにそれなりの時間が必要となっていますが、当モジュールによりそれをかなり短縮化できているようです。
開発履歴（詳細）
■2014年01月15日 UPDATE｜ブラウザの back ボタンと forward ボタンがダブルクリックされた場合などに対応しました。
当モジュールはサイト上の全ての内部リンクを自動的に Ajax 対応にするものであり（特定リンクを除外することも可能）、ブラウザの back ボタンや forward ボタンに対しても一旦読み込んだデータを再利用することで迅速にページを表示するようになっています。それに対して、今回の更新では、ブラウザの back ボタンや forward ボタンが瞬間的に複数回クリックされた場合においても、当モジュールが提供するＵＩを保ちつつ処理を継続できるように対応しました。画面上のリンクやボタンに対してはボタンがダブルクリックされた場合などにおいては余計な処理を行わないようになっていますが、ブラウザの back ボタンや forward ボタンに対しては、各種ブラウザの仕様・挙動との兼ね合いから複数回のクリックに対応して順次画面を更新するようにしています。概ね（ブラウザ・ＯＳ・ハードウエアなどの仕様・挙動・処理能力により異なりますが）、ダブルクリックやトリプルクリックなどの通常想定される程度のクリックミスに対しては正常な処理を継続できるようになっています。
■2012年05月02日 UPDATE｜Ajax でのリクエストの際に、iOS4 上の Safari 独自の挙動に対応しました。
当モジュールは、いわゆる「モダン・ブラウザ」においては、Ajax でのリクエストの際に、JavaScript の History API（具体的には、「window.history」オブジェクトの「pushState」「replaceState」というメソッド、及び、「popstate」というイベント）を利用して、当モジュールが制御している閲覧履歴データをブラウザのそれと連動するようにしています。ただ、iOS4 上の Safari においては、それらのメソッドの挙動が他のモダン・ブラウザとは若干異なるために、ブラウザのアドレス欄に表示される URL が１つ前に閲覧したページのものになってしまうという不具合がありました。今回、別のモジュール の開発過程で得たノウハウからその問題を解決したことで、iOS4 上の Safari においても、Ajax でのリクエストの際にブラウザのアドレス欄に正しい URL が表示されるようになっています。
■2011年08月08日 UPDATE｜Google Chrome 13 において、想定通り稼働することを確認しました。
ということで、現在のところ（2011年08月08日〜）、Firefox 4 、Safari 5 、Chrome 13 以降において有効となっています。
■2011年08月04日 UPDATE｜ページ切替時のエフェクトの稼働時間を「一定とする」か「可変とする」か、選択できるようにしました。
ページ切替時のエフェクトは、今までは、常に、サイト管理者が設定した秒数だけ稼働するようにしていました（＝「稼働時間を一定とする」）。こうすることにより、サイト管理者は、ユーザーに対して、意図したエフェクトの全てを提示することができるためです。それに対して、今回の修正により、「リクエストされたページのコンテンツがブラウザにロードされた時点で即座にエフェクトを中止し、新しいコンテンツを表示する」という方式も選択できるようにしました（＝「稼働時間を可変とする」）。後者を選択した場合には、ユーザーに対して、できるだけ迅速にリクエストされたコンテンツを提示することができることになります。
■2011年06月11日 UPDATE｜一旦表示されたページのデータを保存・再利用するように変更しました。
これにより、モダンブラウザか否かや履歴の有無を問わず、一度表示されたページを再表示する場合には、サーバへのリクエストを伴うことなく迅速に表示されるようになっています。
■2011年06月11日 UPDATE｜Safari 5 に対応しました。
ということで、現在のところ（2011年06月11日〜）、Firefox 4 と Safari 5 において有効となっています。しかし、この対応により通常同じ結果になるはずの Google Chrome では、今回は何故か問題解決しませんでした。両者は共にレンダリングエンジンとして WebKit をベースにしつつも、HTML 5 などの開発の最前線は別々ということなのかもしれません。
■2011年06月10日 UPDATE｜Safari 5、Google Chrome 11・12 への対応を一旦停止しました。
Safari 5、Google Chrome 11・12 においては一部の操作の挙動が不安定であることが判明したため、現在のところ（2011年06月10日〜）、Firefox 4 のみ有効としています。
■2011年06月09日 UPDATE｜HTML 5 の機能を利用して、ブラウザの Back ボタン・Forward ボタンが有効に働くようにしました。
当モジュールは、サイト内の全ての内部リンク（Internal Links）を Ajax 対応させるものですが、これまでは１つ前のページに戻る場合には、ウインドウの右下に表示される独自実装による Back ボタンを使用していただく必要がありました。また、この際には、一度表示されたコンテンツであるにもかかわらず、再度サーバからコンテンツ・データを取得する必要がありました。すなわち、ブラウザの Back ボタン・Forward ボタンは有効に機能しない状態でした。そこで、今回、最新のモダンブラウザ（Firefox 4、Safari 5、Google Chrome 11・12 など）においては、当モジュールによる Ajax 経由でのコンテンツの表示の際にも、ブラウザの Back ボタン・Forward ボタンが有効に機能するように対応しました（最新のモダンブラウザ以外の場合には、これまで通り、ウインドウの右下に表示される独自実装による Back ボタンを使用していただく必要があります）。そしてこの時には、ブラウザに蓄積されたデータを使用するため、一度表示されたページであればサーバに再アクセスすることなくリクエストされたコンテンツを表示できるようになっています。さらに、最新のモダンブラザにおいては、ブラウザの URL ボックスに、リクエストされた内部リンクの URL を表示するようにしています。例えば、リンク先が「http://www.transnetcreation.com/information」というリンクをクリックした際には、古いブラウザにおいては（また、これまでは）、「http://www.transnetcreation.com/#requested_via_ajax=information」のように表示されますが、最新のモダンブラウザにおいてはリンク先の正しい URL である「http://www.transnetcreation.com/information」と表示されるようになっています。なお、これらの修正には、HTML 5 において拡張された JavaScript の新機能を用いています。
■2011年04月20日 UPDATE｜多言語化に対応しました。
Drupal 7 において言語選択は、URL 設定、クエリ文字設定、ユーザー設定、ブラウザ設定、デフォルト言語設定などによって行われますが、当モジュールが想定通りに機能するためには、このうち URL 設定による言語選択に対応する必要がありました。URL 設定による言語選択には、例えば「http://www.example.com/ja」「http://www.example.com/en」のようにパスの最初に言語選択のための文字列を指定する方法と、「http://ja.example.com」「http://en.example.com」のようにドメインに言語選択のための文字列を指定する方法の、２つの方法が用意されています。今回のバージョンアップにより、当モジュールは、パスの最初に言語選択のための文字列を指定する方法に対応しています。なお、ドメインに言語選択のための文字列を指定する方法ヘの対応に関しては今後の課題ということになりますが、（１）現状では、この方法による言語選択のニーズは少ないように思われる、（２）この方法に対応するためにはやや大掛かりな修正が必要となる、という２点の理由により、バージョンアップ作業の優先順位は低いものと考えています。
当モジュールはサイト上の全ての内部リンクを自動的に Ajax 対応にするものであり（特定リンクを除外することも可能）、ブラウザの back ボタンや forward ボタンに対しても一旦読み込んだデータを再利用することで迅速にページを表示するようになっています。それに対して、今回の更新では、ブラウザの back ボタンや forward ボタンが瞬間的に複数回クリックされた場合においても、当モジュールが提供するＵＩを保ちつつ処理を継続できるように対応しました。画面上のリンクやボタンに対してはボタンがダブルクリックされた場合などにおいては余計な処理を行わないようになっていますが、ブラウザの back ボタンや forward ボタンに対しては、各種ブラウザの仕様・挙動との兼ね合いから複数回のクリックに対応して順次画面を更新するようにしています。概ね（ブラウザ・ＯＳ・ハードウエアなどの仕様・挙動・処理能力により異なりますが）、ダブルクリックやトリプルクリックなどの通常想定される程度のクリックミスに対しては正常な処理を継続できるようになっています。
■2012年05月02日 UPDATE｜Ajax でのリクエストの際に、iOS4 上の Safari 独自の挙動に対応しました。
当モジュールは、いわゆる「モダン・ブラウザ」においては、Ajax でのリクエストの際に、JavaScript の History API（具体的には、「window.history」オブジェクトの「pushState」「replaceState」というメソッド、及び、「popstate」というイベント）を利用して、当モジュールが制御している閲覧履歴データをブラウザのそれと連動するようにしています。ただ、iOS4 上の Safari においては、それらのメソッドの挙動が他のモダン・ブラウザとは若干異なるために、ブラウザのアドレス欄に表示される URL が１つ前に閲覧したページのものになってしまうという不具合がありました。今回、別のモジュール の開発過程で得たノウハウからその問題を解決したことで、iOS4 上の Safari においても、Ajax でのリクエストの際にブラウザのアドレス欄に正しい URL が表示されるようになっています。
■2011年08月08日 UPDATE｜Google Chrome 13 において、想定通り稼働することを確認しました。
ということで、現在のところ（2011年08月08日〜）、Firefox 4 、Safari 5 、Chrome 13 以降において有効となっています。
■2011年08月04日 UPDATE｜ページ切替時のエフェクトの稼働時間を「一定とする」か「可変とする」か、選択できるようにしました。
ページ切替時のエフェクトは、今までは、常に、サイト管理者が設定した秒数だけ稼働するようにしていました（＝「稼働時間を一定とする」）。こうすることにより、サイト管理者は、ユーザーに対して、意図したエフェクトの全てを提示することができるためです。それに対して、今回の修正により、「リクエストされたページのコンテンツがブラウザにロードされた時点で即座にエフェクトを中止し、新しいコンテンツを表示する」という方式も選択できるようにしました（＝「稼働時間を可変とする」）。後者を選択した場合には、ユーザーに対して、できるだけ迅速にリクエストされたコンテンツを提示することができることになります。
■2011年06月11日 UPDATE｜一旦表示されたページのデータを保存・再利用するように変更しました。
これにより、モダンブラウザか否かや履歴の有無を問わず、一度表示されたページを再表示する場合には、サーバへのリクエストを伴うことなく迅速に表示されるようになっています。
■2011年06月11日 UPDATE｜Safari 5 に対応しました。
ということで、現在のところ（2011年06月11日〜）、Firefox 4 と Safari 5 において有効となっています。しかし、この対応により通常同じ結果になるはずの Google Chrome では、今回は何故か問題解決しませんでした。両者は共にレンダリングエンジンとして WebKit をベースにしつつも、HTML 5 などの開発の最前線は別々ということなのかもしれません。
■2011年06月10日 UPDATE｜Safari 5、Google Chrome 11・12 への対応を一旦停止しました。
Safari 5、Google Chrome 11・12 においては一部の操作の挙動が不安定であることが判明したため、現在のところ（2011年06月10日〜）、Firefox 4 のみ有効としています。
■2011年06月09日 UPDATE｜HTML 5 の機能を利用して、ブラウザの Back ボタン・Forward ボタンが有効に働くようにしました。
当モジュールは、サイト内の全ての内部リンク（Internal Links）を Ajax 対応させるものですが、これまでは１つ前のページに戻る場合には、ウインドウの右下に表示される独自実装による Back ボタンを使用していただく必要がありました。また、この際には、一度表示されたコンテンツであるにもかかわらず、再度サーバからコンテンツ・データを取得する必要がありました。すなわち、ブラウザの Back ボタン・Forward ボタンは有効に機能しない状態でした。そこで、今回、最新のモダンブラウザ（Firefox 4、Safari 5、Google Chrome 11・12 など）においては、当モジュールによる Ajax 経由でのコンテンツの表示の際にも、ブラウザの Back ボタン・Forward ボタンが有効に機能するように対応しました（最新のモダンブラウザ以外の場合には、これまで通り、ウインドウの右下に表示される独自実装による Back ボタンを使用していただく必要があります）。そしてこの時には、ブラウザに蓄積されたデータを使用するため、一度表示されたページであればサーバに再アクセスすることなくリクエストされたコンテンツを表示できるようになっています。さらに、最新のモダンブラザにおいては、ブラウザの URL ボックスに、リクエストされた内部リンクの URL を表示するようにしています。例えば、リンク先が「http://www.transnetcreation.com/information」というリンクをクリックした際には、古いブラウザにおいては（また、これまでは）、「http://www.transnetcreation.com/#requested_via_ajax=information」のように表示されますが、最新のモダンブラウザにおいてはリンク先の正しい URL である「http://www.transnetcreation.com/information」と表示されるようになっています。なお、これらの修正には、HTML 5 において拡張された JavaScript の新機能を用いています。
■2011年04月20日 UPDATE｜多言語化に対応しました。
Drupal 7 において言語選択は、URL 設定、クエリ文字設定、ユーザー設定、ブラウザ設定、デフォルト言語設定などによって行われますが、当モジュールが想定通りに機能するためには、このうち URL 設定による言語選択に対応する必要がありました。URL 設定による言語選択には、例えば「http://www.example.com/ja」「http://www.example.com/en」のようにパスの最初に言語選択のための文字列を指定する方法と、「http://ja.example.com」「http://en.example.com」のようにドメインに言語選択のための文字列を指定する方法の、２つの方法が用意されています。今回のバージョンアップにより、当モジュールは、パスの最初に言語選択のための文字列を指定する方法に対応しています。なお、ドメインに言語選択のための文字列を指定する方法ヘの対応に関しては今後の課題ということになりますが、（１）現状では、この方法による言語選択のニーズは少ないように思われる、（２）この方法に対応するためにはやや大掛かりな修正が必要となる、という２点の理由により、バージョンアップ作業の優先順位は低いものと考えています。
D7 Modules developed by TransNetCreation
- TNC Ajax Site Module