Ajaxは取り扱い注意

Ajax（エイジャックス）とは、簡単に言うと、画面遷移（ページの切り替え）を伴わずに、ページの情報内容を変更させることができる技術です（詳しくは、Wikipediaの解説などをご参照ください）。

ユーザーの操作（クリックなど）のたびにサーバー側からのレスポンスを待つ（新しくページを切り替えて表示する）必要がないことから、使い勝手の向上が期待できます。また最近では、気軽にAjaxを実装できる「ライブラリー」と呼ばれるプログラムモジュールが多数出回っており、これを使うことでクールな（かっこいい）ユーザーインターフェースをWebサイト（ホームページ）に容易に実装できることも、Ajaxの特長と言えるでしょう。

ちなみにAjaxという概念は、「Asynchronous JavaScript + XML」の略ですが、Adaptive PathというアメリカのWebコンサル会社のIA（Information Architect：インフォメーションアーキテクト）のJesse James Garrett（ジェシー・ジェームス・ギャレット）氏が「Ajax: A New Approach to Web Applications」という2005年2月18日のエッセイの中で触れたのが発端と言われています。Ajaxを使ったエポックメイキングなWebアプリケーションの例としては、Googleマップなどが有名ですね。

ところで、皆さんが普段制作/運営されているWebサイト（ホームページ）に、各種ライブラリーを用いてAjaxを採り入れるケースを考えてみると、以下のような例（主にユーザーインターフェースの改善や革新）が挙げられます（実際には他にも色々ありますが...）。

  • 画像の拡大表示
  • フォームの入力チェック
  • データ入力支援（カレンダーやスライダーなどによる感覚的な入力）
  • ナビゲーションメニュー
  • コンテンツ表示スペースのフレキシブルな制御（アコーディオンメニューやタブメニューによるコンテンツ表示/非表示の切り替えなど）

こうしたUI（ユーザーインターフェース）をAjaxで実装することによって、操作に対するリアクション/フィードバックが軽快になったり魅力的になったりして、その結果ユーザーは、質の高いユーザーエクスペリエンスを得られることが期待できるのです。

このように有用なAjaxではありますが、その取り扱いについては、いくつか留意しておきたいこともあります。以下、挙げてみました。

JavaScriptの利用

AjaxはJavaScriptを利用しているので、（当サイトのコラム記事「ユーザビリティ/アクセシビリティとJavaScript」でも触れていますが）JavaScriptが使えない環境のユーザーは、Ajaxの利便性を享受することができません。意図的にJavaScriptをオフ（無効化）にしているユーザーもいるので、JavaScriptが使えない環境下においても、ユーザーが袋小路にはまって目的達成が阻害されることのないように、配慮することが大切です。つまり、Ajaxは、ユーザーの目的達成のための唯一の手段として使うべきものではないということです。その意味では：

  • Ajaxは（JavaScriptが使えるユーザーに対しては）より良いユーザーエクスペリエンスを提供するもの。
  • Ajaxによるユーザーインターフェースは、「無くても困らないけどあれば便利」なもの。

という程度の位置づけとして実装するのがよいと思います。

ユーザー行動分析の阻害

Ajaxの利点として、ページの切り替えがなくても、ユーザー操作に対するフィードバックがスムーズに発生し、使い勝手の面でメリットが期待できる（ユーザーが目的を達成するまでの道のりを短縮できる可能性がある）ことが挙げられます。しかしながら、ページが切り替わらないということは、サイトを運営する側にとっては、皮肉なことにユーザー行動（動線）が見えにくくなることも、留意しておく必要があります。

ビーコン型やサーバーログ型のアクセスログ解析ツールを使っている場合、Ajaxで実装された機能を操作した結果はPV（ページビュー）としてカウントされないので、たとえば「この画像をユーザーが興味を持って拡大して閲覧したかどうか」が、わからない（つまり効果測定ができない）のです。

Ajaxを採り入れたサイトと言えども、効果測定をしてPDCAサイクルを回し、サイトを継続的に改善してゆくことは重要です。Ajaxを使う場合は、どのような表示結果/インタラクションをサイトの成功指標として効果測定するのか、（ある割り切りが必要になるかもしれませんが）事前によく検討して定義しておく必要があると思います。

ページの表示：「重さ」や「競合」

Ajaxを導入するには、一般的には「ライブラリー」と呼ばれるJavaScriptやCSSなどのプログラムモジュールを読み込む必要があります。Ajaxはサイト制作者にとって刺激的で楽しいものなので、気をつけていないと、つい色々なライブラリーを読み込んでしまいがちです。結果、ページ全体の読み込みに時間がかかり、以下のような問題が生じる恐れがあります。

  • 正常にページ全体が表示されているように見えても、裏のスクリプトのローディング（読み込み）が未完了な場合があり、この状態でユーザーが何らかの操作をすることで、不具合が起きる（期待していたAjaxの挙動にならない）。
  • 複数のAjaxライブラリーを同時に読み込むことで、スクリプト間のコンフリクト（競合）が起きてしまい、不具合が起きる（期待していたAjaxの挙動にならない）。

上記のような問題を避けるためには、最低限必要なライブラリーのみを読み込むように意識しましょう。CMSツールによっては条件分岐ができるので、それを利用する手もあります（Movable Typeを使っている当サイトでは、<MTEntryIfTagged>を使って、Ajaxライブラリーを使いたい記事のタグに都度「@xxx」（xxxはライブラリ名）を入れることで、最低限のライブラリーを必要なときだけ使用するようにしています）。

ユーザーのメンタルモデルとの乖離

Ajaxを使うことによって、斬新なUI（ユーザーインターフェース）を実装することが可能になりますが、場合によっては、あまりに斬新すぎて、ユーザーのメンタルモデル（ユーザーが何らかのアクションをとったときに予想するリアクションの想定）との乖離が生じてしまい、結果的にユーザビリティを阻害してしまうケースがあります。特に画像の拡大表示機能では、この現象がしばしば見受けられます（詳しくは改めて、別のコラム記事で触れてみたいと思います）。

Ajaxは、便利で効果的な技術である一方で、上記のように、気に留めておきたい点がいくつかあります。良質なユーザビリティやアクセシビリティをきちんとユーザーに提供するためにも、Ajaxは気をつけて使いたいものです。