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

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

Lecutures on PHP

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

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

Ajaxを使っている実例

説明だけではなかなかどんなものかわからないかもしれませんので、実際にAjaxを使っているアプリケーションやサービスをいくつか見ていくことにしましょう。

Google

http://www.google.co.jp

Ajaxが世の中に広まったのはGoogleのおかげといっても過言ではありません。Google Suggest、Gmail、Google マップ等々、Googleが公開しているサービスでは当たり前のようにAjaxが用いられています。



Google Suggest

http://www.google.co.jp/webhp?complete=1&hl=ja

Google Suggest。簡単にいえば検索サービスですが、ユーザが検索したい語句を入力中にその候補をリアルタイムで表示していくといった機能を持っています。たとえば p と入力すると p で始まる候補が何件かリストで表示され、次に h を入力すると ph で始まるリストが表示されます。

絞り込み検索といってもよいかもしれません。入力している語句を取得しその候補と共にそれがあるページがGoogleの検索エンジンに何件あるかという情報と共に表示していく、その通信部分でAjaxが使われています。

■ 図3 google suggest

Google Suggest

Gmail

https://mail.google.com/mail/

言わずと知れた2GB以上の容量を持った無料のWebメールサービスです。Webメールサービスではあるのですが、その操作性はまるでWindowsなどのOS上で動作するネイティブなメーラーのような快適さを備えています。この操作性を実現するためにユーザインタフェースの部分でAjaxが多く使われています。

■ 図4 gmail

Gmail

Google マップ

http://maps.google.co.jp/

指定した地域のお店やサービスを検索することができる地図検索サービスです。このサービスの一番の特徴は、何と言っても地図をマウスでグリグリと動かすだけで、日本はもちろんのこと世界中あちらこちらを見渡すことができます。また地図だけではなく、目的地付近の様子といったものを衛星写真で確認することもできます。この操作性を実現できるのは、も ちろんAjaxを使っているからこそです。

■ 図5 google マップ

Google マップ

Google カレンダー

http://www.google.com/calendar/

その名のとおりAjaxを用いたオンラインカレンダーサービスです。最近まで英語版しかありませんでしたが、つい先日待ちに待った日本語版が登場しました。自分自身のスケジュールはもちろんのこと、友達や公開されている他人のスケジュールといったものを共有することができ、自分のカレンダー上にそれら共有したカレンダーを重ね合わせることができます。ユーザインターフェース部分にAjaxを用いているということもあり、Webサービスとは思えないシームレスな動きをします。

たとえば使い方は簡単で予定のある日や時間帯の場所をクリックし予定を入力するだけ。また日や週、月といったカレンダーの切り替えもスムーズ。これらはAjaxを使って行っているおかげで、画面の遷移は全くありません。使い勝手がとてもすばらしく良いものになっています。

■ 図6 google カレンダー

Google カレンダー

livedoor Reader

http://reader.livedoor.com/

ライブドアが公開しているAjaxを使ったオンラインのRSSリーダーです。Ajaxにより画面遷移を全くすることなく、登録したRSSをすばやい操作で快適に読むことができます。またRSSリーダーということで定期的にRSSを取得しています。クライアント側への更新作業もAjaxを使って非同期で通信しているので、リロードは発生しません。ユーザにとっては快適な状態で記事を集中して読むことができます。

■ 図7 livedoor Reader

livedoor Reader

AJAX PICS

http://www.ajaxpics.com/

最近話題になっているオンラインで画像の編集を行うWebアプリケーションです。AdobeのPhotoshopやFireworks等々レタッチソフトのような操作性をAjaxを使ってオンライン上で実現しています。

■ 図8 AJAX PICS

AJAX PICS

Ajaxを使った手書き文字認識

http://chasen.org/~taku/software/ajax/hwr/

サイト名になっている通り、Ajaxを使った手書き文字認識のWebアプリケーションです。キャンパス部分にマウス等で文字を描くことによりそれを認識して、書いた文字の候補をいくつか表示します。文字を描くと同時にサーバにその情報を送信しサーバにあるデータベースにある情報と照らし合わせていくつか文字をピックアップして、それをクライアントに返しています。その処理でAjaxが使われています。

■ 図9 Ajaxを使った手書き文字認識

Ajaxを使った手書き文字認識

Ajax IME

http://ajaxime.chasen.org/

Ajaxを使った日本語入力サービス、いわゆるIMEのAjax版です。日本語入力ができないパソコンを使用していてもブラウザがあるだけで日本語を入力することができます。

テキストボックスにローマ字を入力しスペースで変換、すると日本語に変換することができます。この変換部分でAjaxが使われています。入力されたローマ字を取得しスペースを押すことによりサーバにそのローマ字を送信します。そしてその情報を元に日本語に変換しいくつかの候補と共にクライアントに返しています。

この他にも、Windowsに標準添付されているトランプの一人用ゲームであるソリティアをオンライン上で実現した「Solitaire Craving」など、たくさんあります。

■ 図10 Ajax IME

Ajax IME



Pick Up Q&A

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

>>続きを読む

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

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