Netscape Communicationsと米Googleを例に挙げて説明している。Netscape社はWeb 1.0の旗手,Google社はWEB2.0の旗手。Netscapeの戦略は、コンテンツのプロバイダに高価なWebサーバー製品を買ってもらうというのが同社の目的だった。Googleの場合、ユーザーは自分のマシンでWebブラウザを介してGoogle社のサービスを使うだけ。
WEB2.0に対応するブラウザ「Flock」が登場
Flockはブログエディタを搭載し、ソーシャルブックマークdel.icio.usやオンライン写真共有サービスFlickrと連係する「ソーシャルブラウザ」だ。
このブラウザはまた、WordPress、Movable Type、Typepadと連係するブログエディタを搭載している。ブログの題材にしたい文章を反転表示して右クリックし、「Blog This」を選択するとブログエディタが開き、選んだ文章が引用形式で挿入される。
・オンライン・ブックマーク:
従来のWebブラウザはブックマークをローカル環境で管理する。それに対しFlockは,ブックマークのオンライン管理/共有サービス「del.icio.us」を利用する
・RSSリーダー:
RSSフィードを読み込む機能を内蔵
・ブログ編集:
Wordpress,Six Apart,Bloggerといったブログ・サービスと連携し,記事を編集/投稿できる
・写真共有:
米Yahoo!の写真共有オンライン・サービス「Flickr」と連携した写真管理/共有機能を搭載
■
http://www.flock.com/
Aajaxとは「Asynchronous JavaScript + XML」の略である。JavaScriptはいわずと知れたクライアント(通常ウェブブラウザ)サイドの技術であり、そこからXMLHttpRequestというものを利用し、ページ推移をせずにサーバ/クライアント間でどんどんデータ交換をしていく技術である。これとDHTMLを併用することでいわゆるAjaxになる。
Ajaxとは「Asynchronous JavaScript and XML」の略で、Webブラウザでの表示部分を含めたWebアプリケーションの作り方を指す名前だ。具体的にはXML形式のデータをJavaScriptで処理することで、ブラウザのHTTPによるページ遷移とは非同期にサーバとやりとりして「動的に」ページ内容を変更する仕組みを指す。
Ajaxを実現する詳細なコード例は後述するとして、まずはAjaxが実現するWebアプリケーションがどのような動作をするのか、既存のWebアプリケーションとどう違うのか、そしてどのようなメリットがあるのかを見てみよう。
AjaxではないWebアプリケーションの動き
Ajaxを理解するために、まずAjaxではない通常のWebアプリケーションの動作を見てみよう。既存のWebアプリケーションは、ページ上にHTMLフォームやリンクを配置して、GETやPOSTによるHTTPリクエストをサーバに投げ、リクエストに応じてサーバから返されるHTMLをブラウザに表示するという流れを取るのが一般的だろう。
例として、ブラウザから利用できるオンライン地図サービスのYahoo!地図情報を見てみよう。地図を表示した状態で、少し右の部分を表示したい場合や縮尺を変えて見たい場合でも、何か動作をするたびにサーバから新しいHTMLページが送られてきて画面全体が書き換えられる
Yahoo!地図情報、Ajax採用でスクロール可能な航空写真を表示
「Yahoo!地図情報」において航空写真対応のスクロール地図機能(ベータ版)の提供を開始した。Ajax技術を採用したことにより、スムーズに地図をスクロールできるようになった。
スクロール地図機能ではAjaxを採用しており、キーボードやマウス操作の動きに反応して、次に表示する地図データをスムーズに読み込める。AjaxとはAsynchronous JavaScript + XMLの略称で、JavaScriptのXMLHttpRequestを使った非同期通信を用いて実現するインターフェイスの総称。非同期通信によりXML形式のデータを送受信し、Webページをリロードすることなく描き換えていくなどのインターフェイスを実現する。Google MapsなどがAjaxを用いた例として挙げられる。
航空写真については、Yahoo!地図情報が通常の地図データとして提供する全縮尺に対応。一部で衛星画像を利用しているが、日本全国の航空写真を利用できる。スクロール地図の左側には、縮尺サイズの異なる地図データ(航空写真ではない)をサブマップとして表示する。航空写真はデジタル・アース・テクノロジー、衛星画像はジオサイエンス、地図データはアルプス社が提供する。
また、地図の中心点カーソルの位置から周辺の最寄り駅への徒歩による移動時間を表示。「Yahoo!路線情報」「Yahoo!地図情報」「Yahoo!天気情報」と連動しており、路線検索や地域の情報、天気予報などを確認できる。そのほか、「飲食店」「宿泊施設」「映画館」などの地図アイコンのチェックボックスにチェックを入れることで、各施設のアイコンを表示。アイコンをクリックすると、店舗の詳細情報ページにジャンプする。
ただし、正式版で提供しているキーワード検索や地図登録機能は利用できない。そのため、ユーザーが指定した住所でスクロール地図を利用する場合は、正式版でいったん地図を表示させてから、表示形式で「航空写真」を選択する必要がある。ヤフーではベータ版提供中に寄せられる意見を参考にして、2006年夏頃の正式サービス化を目指す。
Ajax: A New Approach to Web Applications
http://www.adaptivepath.com/publications/essays/archives/000385.php
エントリーの日本語訳(antipopのけんたろ氏による)
http://antipop.gs/docs/translations/ajax.html
Ajaxを使ったウェブアプリケーションの例
Ajaxを使用したウェブアプリケーションはすでにいくつかあり、多くのサイトで紹介されているものですがが、以下記述していおきます。
●WEB2.0 script DEMO : http://script.aculo.us/demos/ajax/autocompleter
Web2.0と呼ばれるようなAjaxを多様したデモスクリプトを多種多様に紹介している。このサイトのスクリプトを参考に、Web2.0Ajaxで何ができるか探るのもいいかもしれない。
●gmail : http://gmail.google.com/
おそらくAjaxのはしりになるウェブアプリケーションで、Googleが開発したものだ。いままではクリックするたびに画面の切り替えがあったウェブメールがほぼそのままの状態でどんどん内容が切り替わっていく斬新なものだった。
●Google マップ : http://maps.google.co.jp/
これもAjaxの可能性を示したウェブアプリケーションの1つであろう。gmailと同じくGoogleが開発したものだ。
●Yahoo!地図情報 : http://map.yahoo.co.jp/beta/index.html
「Yahoo!地図情報」において航空写真対応のスクロール地図機能(ベータ版)の提供を開始した。Ajax技術を採用したことにより、スムーズに地図をスクロールできるようになった。
●Ajax ssh : http://ajaxssh.bz2.jp/ : http://ajaxssh.bz2.jp/demo
若干強引だがAjaxを用いてssh環境を構築する。HTTPは通常1リクエストごとに処理を終了するが、sshはsshとしてセッションを切断するまで永続的に接続しているため、その問題解決などにテクニックが使われている。