AJAX とは ?
AJAX とは、Asynchronous JavaScript And XML の頭文字をとったものです。XML はデータ交換フォーマットであり、UX はユーザー・エクスペリエンスを意味するソフトウェア開発者の略語です。Ajax とは、インターネット通信技術のひとつで、ユーザーのブラウザーに表示された Web ページがサーバーに特定の情報を要求し、ページ全体を再読み込みすることなく、同じページに新しい情報を表示することを可能にするものです。これによってユーザー体験がどのように向上するか、すでに想像がつくことでしょう。
XML は伝統的なデータ交換フォーマットを使用していますが、実際には便利なフォーマットであれば何でもかまいません。PHP のコードで作業する場合、多くの開発者は JSON を好みます。なぜなら、送信されたデータストリームから作成される内部データ構造は、取り扱うことが簡単だからです。
AJAX の動作を確認するには、WordPress の管理エリアに行き、カテゴリーやタグを追加します。新規追加ボタンをクリックすると、ページが変わりますが、実際にはリロードされないことに注意してください。納得いかないですか ? ブラウザーの履歴を確認すると、ページがリロードされた際、そのページに対して2つのエントリーが表示されているはずです。
AJAX は、ユーザーの操作を必要としません。Google ドキュメントは、AJAX を使って数分ごとに自動的にドキュメントを保存し、保存のためのアクションを起こす必要はありません。
なぜ AJAX を使うのですか ?
明らかに、ユーザー体験が向上します。退屈な静的ページを表示する代わりに、AJAX を使えば、ダイナミックで、レスポンシブで、ユーザーフレンドリーな体験を提供できます。ユーザーは、自分が取った操作が正しかったか間違っていたかのフィードバックを、即座に得ることができます。1つのフィールドに間違いがあることに気付く前に、フォーム全体を送信する必要はありません。重要なフィールドは、データが入力されるとすぐに検証できます。あるいは、ユーザーが入力する際に提案もできます。
AJAX は、前後に流れるデータ量を劇的に減らすことができます。すべてのページ・コンテンツを交換するのではなく、適切なデータだけを交換する必要があります。ページがリロードされると、そのようなことが起こります。
WordPress プラグインに特に関連することですが、AJAX は WordPress のコンテンツとは無関係に処理を開始する方法として圧倒的に優れています。PHP をプログラミングしたことがある人なら、新しい PHP ページにリンクするだけで、このようなことができるでしょう。ユーザーがリンクをたどると、処理が開始されます。この場合の問題は、新しい外部 PHP ページにリンクしたときに WordPress の関数にアクセスできないことです。以前は、開発者は新しい PHP ページにコアファイル wp-load.php を含めることで、WordPress の関数にアクセスしていました。そうすることの問題点は、このファイルへの正しいパスを知ることができなくなったことです。WordPress のアーキテクチャーは柔軟になり、/wp-content/ やプラグインファイルはインストールルートから1階層下に移動できるようになりました。プラグインファイルからの相対パスで wp-load.php の場所を知ることはできませんし、インストールフォルダーへの絶対パスもわかりません。
AJAX リクエストを送信する場所は、JavaScript のグローバル変数に定義されているため、知ることができます。PHP の AJAX ハンドラスクリプトは、実際にはアクションフックですので、外部の PHP ファイルとは異なり、WordPress のすべての機能が自動的に利用できます。
AJAX はどのように使うのですか ?
WordPress は初めてですが、他の環境で AJAX を使用した経験がある場合、いくつかのことを学び直す必要があります。WordPress が AJAX を実装する方法は、ほとんどの場合、あなたが慣れているものとは異なります。すべてが初めての人は、問題ありません。ここで基本を学びましょう。一度基本的な AJAX 交換を開発すれば、そのベースを拡張して、すばらしいユーザーインターフェイスを持つキラーアプリを開発することは簡単ですよ !
WordPress での AJAX 交換には、2つの主要なコンポーネントがあります。クライアントサイドの JavaScript または jQuery と、サーバーサイドの PHP です。すべての AJAX 交換は、以下のイベントのシーケンスに従って行われます。
- ある何らかのページ・イベントが、JavaScript または jQuery 関数を起動させます。その関数は、ページからデータを収集し、HTTP リクエストでサーバーに送信します。JavaScript で HTTP リクエストを処理するのはやっかいですし、jQuery は WordPress にバンドルされているので、ここから先は、jQuery のコードだけに集中することにします。JavaScript をそのまま使った AJAX も可能ですが、jQuery が使えるのに使用する価値はありません。
- サーバーは、リクエストを受信し、そのデータで何かをします。関連するデータを組み立て、HTTP レスポンスの形でクライアント・ブラウザーに送り返すかもしれません。これは必須条件ではありませんが、何が起こっているかをユーザーに知らせ続けることは望ましいことですので、何らかのレスポンスを送らないことは非常にまれです。
- 最初の AJAX リクエストを送信した jQuery 関数は、サーバーレスポンスを受信し、それを使って何かします。ページ上の何かを更新したり、何らかの方法でユーザーにメッセージを表示したりします。
jQuery で AJAX を使用する
ここで、jQuery の記事のスニペットにある「do stuff」部分を定義します。ここでは、$.post() メソッドを使用し、そのパラメータは、POST リクエストを送信する URL、送信するデータ、そしてサーバーのレスポンスを処理するコールバック関数、の3つになります。でも、その前に、ちょっとした下準備があります。後でコールバック関数で使うために、次のように割り当てします。目的はコールバックのセクションで詳しく説明します。
URL
WordPress の AJAX リクエストはすべて wp-admin/admin-ajax.php に送られなければなりません。正しい完全な URL は PHP から取得する必要があります。jQuery は、この値を独自に決定できませんし、jQuery のコードに URL をハードコーディングして他の人がそのプラグインを自分のサイトで使えるようにもできません。ページが管理エリアのものであれば、WordPress は、グローバル JavaScript 変数 ajaxurl に正しい URL を設定します。公開エリアのページの場合は、正しい URL を自分で設定し、wp_localize_script() を使って jQuery に渡す必要があります。これについては PHP のセクション で詳しく説明します。今のところ、フロントエンドとバックエンドの両方で動作する URL は、PHP セグメントで定義するグローバルオブジェクトのプロパティとして利用可能であることだけ知っておいてください。jQuery では、このように参照します:
my_ajax_obj.ajax_url
データ
サーバーに送信する必要のあるデータは、すべてデータ配列に含まれます。アプリが必要とするデータのほかに、アクションパラメータを送信する必要があります。データベースの変更になり得るリクエストに対しては、リクエストが正当なソースからのものであることをサーバーに知らせるため、nonce を送る必要があります。.post() メソッドに渡すデータ配列の例は次のようになります:
{
_ajax_nonce: my_ajax_obj.nonce, // nonce
action: "my_tag_count", // action
title: this.value // data
}
各コンポーネントの説明は、以下の通りです。
Nonce
Nonce は、「Number used ONCE」の造語です。基本的には、提供されるフォームの各インスタンスに割り当てられる、一意のシリアル番号です。nonce は、PHP スクリプトで確立され、URL と同じようにグローバルオブジェクトのプロパティとして、jQuery に渡されます。このケースでは、my_ajax_obj.nonce として参照されます。
もしあなたのアプリが強固なセキュリティを必要とするのであれば、サーバーが Ajax リクエストに応答して新しい nonce を送信し、スクリプトが次のリクエストを検証するために使用する、真の nonce システムを実装してください。
一番簡単なのは、この nonce の値を _ajax_nonce にキー設定することです。nonce を検証する PHP のコードと調整すれば、別のキーを使うこともできますが、デフォルト値を使用するほうが簡単で、調整の心配をする必要はありません。以下は、このキー・値ペアの宣言の表示方法です:
_ajax_nonce: my_ajax_obj.nonce
アクション
WordPress のすべての AJAX リクエストは、データに action 引数を含める必要があります。この値は任意の文字列で、AJAX ハンドラコードをフックするために使用する、アクションタグの構築に使用されます。この値は、AJAX コールの目的を非常に簡潔に記述するのに便利です。当然、この値のキーは ‘action’ です。この例では、my_tag_count をアクションの値として使います。このキー・値ペアの宣言は、次のようになります:
action: "my_tag_count"
サーバーがタスクを実行するために必要なその他のデータも、この配列に含まれます。送信するフィールドの数が多い場合は、データフィールドをひとつの文字列にまとめて、送信しやすくするためのフォーマットとして、XML および JSON の2つが一般的です。これらのフォーマットを使用するかどうかは任意ですが、使用する場合はサーバーサイドの PHP スクリプトと調整する必要があります。これらのフォーマットについての詳細は、以降のコールバックのセクションを参照ください。このフォーマットでデータを送信するよりも受信するほうが一般的ですが、どちらでも使用できます。
この例では、サーバーは1つの値、つまり選択された本のタイトルを表す1つの文字列だけが必要ですので、キー ‘title’ を使います。jQuery では、イベントを発生させたオブジェクトは、常に変数 this に含まれます。よって、選択された要素の値は this.value となります。このキー・値ペアの宣言は次のようになります:
title: this.value
コールバック
コールバックハンドラは、リクエスト後にサーバーからレスポンスが返ってきたときに実行する関数です。繰り返しますが、通常はここで無名関数を使用します。この関数には1つのパラメータ、サーバーレスポンスが渡されます。レスポンスは、YES か NO かといったものから、巨大な XML データベースまで何でもあり得ます。JSON フォーマットのデータも、データのフォーマットとしては便利です。レスポンスは必須ではありません。もし何もなければ、コールバックを指定する必要はありません。UX の観点からは、どのようなリクエストに対しても、何が起こったかをユーザーに知らせることは常に良いことですので、常にレスポンスを返し、何かが起こったことを示す何らかの表示をすることを推奨します。
この例では、ラジオボタン横の現在のテキストを、本のタイトルでタグ付けされた投稿の数を含むサーバーレスポンスで置き換えています。これが無名コールバック関数です:
function( data ) {
this2.nextSibling.remove();
$( this2 ).after( data );
}
data は、サーバーのレスポンス全体を含みます。先程、行 var this2 = this; で、変更イベントをトリガーしたオブジェクト (this として参照) を this2 に代入しました。なぜなら、クロージャの変数スコープは、一段階しか拡張されないからです。イベント・ハンドラ (最初は /* do stuff */ が入っていた部分) に this2 を割り当てることで、これがスコープ外になるコールバックで使うことができます。
サーバーのレスポンスは、どのような形でもかまいません。大量のデータは、扱いやすいようにデータストリームにエンコードすべきです。XML と JSON が一般的なエンコード方式です。
XML
XML は、AJAX のための古いデータ交換フォーマットです。つまり、AJAX の「X」です。PHP のネイティブ関数で使うのは難しいかもしれませんが、JSON は今でも有効な交換フォーマットです。そのため、多くの PHP プログラマーは JSON 交換フォーマットを好んでいます。XML を使用する場合、パース方法は使用するブラウザーに依存します。Internet Explorer には Microsoft.XMLDOM ActiveX を使い、それ以外には DOMParser を使います。5.8リリース以降、Internet Explorer は WordPress ではサポートされなくなったことに注意してください。
JSON
JSON は軽量で使いやすいため、よく好まれています。eval() を使って JSON をパースもできるが、それはやめておきましょう ! eval() の使用は重大なセキュリティリスクを伴います。代わりに、より高速な専用のパーサーを使用しましょう。パーサーオブジェクトのグローバルインスタンス JSON を使用します。AJAX コールには、JSON フォーマットでレスポンスを返す簡単な方法を提供する、特定の関数があります。
その他
データフォーマットが PHP ハンドラで調整されている限り、カンマ区切りやタブ区切りなど、どのようなフォーマットでもかまいません。
クライアントサイドの概要
$.post() 関数の最後のパラメータにコールバックを追加して、jQuery Ajax スクリプトのサンプルは完成です。すべてのピースをまとめると、このようになります:
jQuery(document).ready(function($) { //wrapper
$(".pref").change(function() { //event
var this2 = this; //use in callback
$.post(my_ajax_obj.ajax_url, { //POST request
_ajax_nonce: my_ajax_obj.nonce, //nonce
action: "my_tag_count", //action
title: this.value //data
}, function(data) { //callback
this2.nextSibling.remove(); //remove current title
$(this2).after(data); //insert server response
}
);
} );
} );
このスクリプトは、Web ページの block に出力するか、独自のファイルに含めることができます。このファイルは、インターネット上のどこにでも置くことができますが、ほとんどのプラグイン開発者はプラグインのメインフォルダーのサブフォルダー /js/ に置きます。そうしなければならない理由がない限り、慣例に従ったほうがよいでしょう。この例では、ファイル名 myjquery.js とします。