第1回 PHPで簡単なAjaxプログラムを作ろう - Ajax+RIA講座

くまちゃん先生のAjax+Flex講座

Lecutures on PHP

第1回 PHPで簡単なAjaxプログラムを作ろう (その1)

 このエントリーをはてなブックマークに追加

Ajaxとは

くまちゃん先生皆さんはAjaxという言葉を聞いたことがありますか?最近のWebアプリケーション開発には欠かすことのできない手法の一つになっており、名前を知っている方も多いでしょう。ただ、欠かすことのできない手法といわれても、あまりピンとはこないと思います。

AjaxはAsynchronous JavaScript + XMLの略称です。Asynchronousとは非同期という意味で、JavaScriptとXML、これらの技術を用いて非同期で通信を行うという事を意味します。

多くのブラウザに実装されているJavaScriptには、XMLHttpRequestと呼ばれるオブジェクトが組み込まれています。これを利用すると、サーバとブラウザ間で非同期に通信を行うことができます。
このとき使うデータ形式がXMLになります。ちなみにデータ形式としては、最近はXMLだけではなく、テキストやJSONといった形式も使われるようになっています。そのため、近頃ではAjaxのxはそれら様々な形式を指すという意味でも捉えられています。

また、ここで挙げた言葉はサーバとクライアントで通信する部分の技術ですが、これ以外にも受信したデータを表示するためにDOMと呼ばれる技術を用いたり、それらの表示を変化させるためにDHTML(DynamicHTML)と呼ばれる技術やスタイルシート(CSS:Cascading Style Sheet)といった技術も必要になってきます。

勘のいい人なら既に気がついたかもしれませんが、Ajaxと呼ばれるものの中に目新しい技術は存在していません。XMLHttpRequestオブジェクト自体は目新しく感じられますが、どちらかというとAjaxは概念的なもので、既存の技術を組み合わせて行う開発手法の総称です。これらを用いて、画面遷移をすることなくインタラクティブなユーザインターフェースを作成することを可能にする、それがAjaxです。

Ajax の歴史

くまちゃん先生Ajaxという言葉が登場してきたのは2005年頃になります。その当時、GoogleがGoogle SuggestやGmailといった、今までとは違ったユーザインターフェースを持ったサービスを出してきました。その快適な動作や、画面が遷移することなく次々と情報が現れる様子にGeek達は驚き、その仕組みに注目が集まりました。ブログ等ではどんな技術が使われているのかが盛んに議論され、その仕組みが解明されていったわけです。

それと同時に、Webアプリケーションの構築やデザインといったWebコンサルタント業務を手がけるAdaptive Path社のJesse James Garrett氏が自社のブログ内で、この新たに登場した仕組みに関する「Ajax:A New Approach to Web Applications」というエントリーを公開しました。

このとき初めてAjaxという言葉が世に登場しました。このエントリーが瞬く間に世界中に伝わり、Ajaxという言葉が世界に広がったのです。

そして今日。AjaxはWebアプリケーションには必要不可欠なものといっても過言ではないほど、Webに浸透してきています。日々登場している新しいサービスには、どこかしらAjaxが用いられていると言ってもいい程です。

大手企業からも注目を浴びているAjaxは、これからのWebアプリケーションにとって特別なものではなく、ごくごく当たり前のもの、当然のものとして捉えられていくのではないでしょうか。この時期にAjaxの基礎知識を身につけ、ステップアップするにはちょうど良い機会かもしれません。

やりとりのためのデータ形式

くまちゃん先生Ajaxで使われるデータ形式には、主にXMLとテキスト、JSONがあります。XMLはHTMLと同じくデータの意味や構造等を記述するためのマークアップ言語のひとつです。ただHTMLと違いユーザが独自にタグを作成することが可能なため、サーバとの通信で用いるのに適しています。

テキストとは、汎用的なプレーンテキスト形式で、サーバと情報のやり取りを行う方法です。プレーンテキストは自由度があるため、たとえば出力されるHTMLをサーバ側で生成し、それをそのまま送信すれば、クライアント側であるJavaScriptやHTMLでは特にいじる必要なくそのまま出力することができます。

JSONについては、次のセクションで説明したいと思います。ここ最近のAjaxを用いたWebアプリケーションの開発、またJavaScriptを用いた開発でよく使われているデータ形式です。

JSONって何?

先にも述べましたが、以前はXMLで行われていたAjaxでの通信は、現在はJSONで行われることが多くなっています。では、なぜXMLよりもJSONが多く使われるようになってきているのでしょうか。

JSONの正式名称はJavaScript Object Notationで、その頭文字をとってJSONと呼んでいます。名称にあるようにJavaScriptのオブジェクト表記法を使ったデータ形式です。JSON自体は言語とは関係ないテキストのデータ形式ですが、その表記法ゆえにJavaScriptととても親和性の高いものになっています。たとえば、以下の文字列はJSON形式です。

{"year":2008,"month":3}

これは、PHP的に言うと連想配列を定義したもので、2つの要素を持っています。yearキーに2008を、monthキーに3を定義しています。JavaScriptでこのデータを使う場合、eval関数を活用します。eval関数は、引数に渡された文字列をJavaScriptのコードとして実行するため、以下のようにJSON形式のデータを解釈します。

json = eval('(' + JSON形式のデータ + ')');

先ほどのJSON形式のデータを使った場合には、JavaScript上でjson.yearという記述で「2008」を取得することができます。

XMLの場合、そのデータをJavaScriptで使用するためには少なからず複雑な作業が必要になります。しかし、上記のようにJSONを用いるとeval関数を使うだけで簡単にオブジェクトに変換することができます。しかも、JSONのデータ形式を見てわかったと思いますが、人にとっても読み書きが簡単で、またコンピュータにとっても簡単にパースや生成を行うことができます。



Pick Up Q&A

Q
ログファイルの中の空のデータ行を削除したい
 このエントリーをはてなブックマークに追加 
A
ログのデータ個数(列数)が固定で、空のログが"<><><>"だと既知であれば if ($line === "<><><>") { continue; } で読み飛ばしてもいいのでは? ...

>>続きを読む

まずは配列や文字列の扱いから、じっくり勉強して行きましょう。

▲解説者:岡本(アシアル株式会社 教育コーディネーター兼 システムエンジニア)