話題のナレッジベース | Knowledge Base Weblogs space
HOMEBlogs index Web2.0/Ajax >> space
space space
space
space
space
space
November 13, 2005 space
   space
space

WEB2.0 Ajax 「エイジャックス」とは?

space

WEB2.0とも呼ばれる Ajax 「エイジャックス」とは?Asynchronous JavaScript + XML古くて新しい「JavaScriptとダイナミックHTMLを使って非同期にサーバと通信するアプリケーション」とされています。
 
 このAjaxは今年非常にホットな話題の技術で、2005年2月半ばから、「Ajax」という言葉がアルファギークたちの間で一気に広まった。「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう。

 

space

 
 Netscape Communicationsと米Googleを例に挙げて説明している。Netscape社はWeb 1.0の旗手,Google社はWEB2.0の旗手。Netscapeの戦略は、コンテンツのプロバイダに高価なWebサーバー製品を買ってもらうというのが同社の目的だった。Googleの場合、ユーザーは自分のマシンでWebブラウザを介してGoogle社のサービスを使うだけ。
 
 
 WEB2.0に対応するブラウザ「Flock」が登場
 
 

flock01.jpg

 
 Flockはブログエディタを搭載し、ソーシャルブックマークdel.icio.usやオンライン写真共有サービスFlickrと連係する「ソーシャルブラウザ」だ。
 
 このブラウザはまた、WordPress、Movable Type、Typepadと連係するブログエディタを搭載している。ブログの題材にしたい文章を反転表示して右クリックし、「Blog This」を選択するとブログエディタが開き、選んだ文章が引用形式で挿入される。
 
・オンライン・ブックマーク:
 従来のWebブラウザはブックマークをローカル環境で管理する。それに対しFlockは,ブックマークのオンライン管理/共有サービス「del.icio.us」を利用する

・RSSリーダー:
 RSSフィードを読み込む機能を内蔵

・ブログ編集:
 Wordpress,Six Apart,Bloggerといったブログ・サービスと連携し,記事を編集/投稿できる

・写真共有:
 米Yahoo!の写真共有オンライン・サービス「Flickr」と連携した写真管理/共有機能を搭載


 
 
 flock03.jpg
 
 ■ 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としてセッションを切断するまで永続的に接続しているため、その問題解決などにテクニックが使われている。

space
HOMENews BlogsWeb2.0/Ajax | November 13, 2005 |  twitter Livedoor Buzzurl はてな Yahoo!ブックマーク人が登録
space


space Entries of this Category
space

  Next >> Web ARENA Suite PRO VPSで最強のブログサイト構築ノウハウをメモを公開! >> 

Web ARENA Suite PRO は、VPSサーバーでHDD6GBのディスク領域を活用できるのです。(でもOSやアプリケーションがあるので、実際には4GB程度でしょうか・...»この話題を見る…


  Previous << 矢田亜希子が押尾学と結婚!妊娠?矢田ちゃん嘘だよ〜ん!と言って。。。 << 

矢田亜希子と押尾学が手つなぎハワイへ!左手薬指にペアリングから1年、度々破局も伝えられてきたふたり、俳優の押尾学(28)と女優の矢田亜希子(27)が13日に入籍していたことが発... »この話題を見る…


space
space
Welcome to knowledgeBase  Blogs  ▲TOP