| AJAX講座 | ||
|---|---|---|
 AJAXとは |
||
| サーバとの通信 | prototype.jsの利用 | |
AJAXとは
- AJAXとは
- 「Asynchronous JavaScript + XML」の略語
- JavaScriptのHTTP通信機能を利用して非同期通信を行ない、読み込み時にWebページ全体をリロードせずに 画面遷移を減少させたWebサイトを開発できる技術である
- JavaScriptやHTTP通信機能は以前から存在していたのだが、これらの機能は使われることは少なかった。それが近年Google Map などのWebサービスに使用されることによって、その効果が世の中に現れ、JavaScriptの技術が使用されることとなった
通信規約
- 通信規約
- 同一ドメイン上のサーバ
- 異なるドメイン上のサーバで使用する場合はCGIを経由して他サーバのデータを取得する必要がある
AJAX vs Flex
FlexとAjaxの比較
| ＼ | Flex | Ajax |
|---|---|---|
| UIコンポーネント量 | ○ | × |
| デザイン性 | ○ | △ |
| 開発環境 | ○ | △ |
| デプロイ | ○ | ○ |
| 効率 | ○ | △ |
| クライアント &通信 | ○ | △ |
| 信頼性 | ○ | △ |
| 移植性 | ○ | ○ |
| 価格 | × | ○ |
| サポート | ○ | △ |
| ドキュメント | × | △ |
※個人的な主観で判断しております。
Ajaxが流行した理由
近年AjaxはGoogle Mapなどを中心にWeb業界で加速的に流行しました。その理由は、
- Ajaxの利点
- ■コンピュータの処理能力がアップして操作性が向上した
- 通信速度の高速化
- プラグイン不要のため容易にWebブラウザから利用できる
- Googleが「Google Map」等のAjaxを利用した便利なWebサービスを開発した
- ページ遷移の少ないサイトの作成が実現可能
AJAXライブラリ一覧
■Prototype
公式サイト：http://prototype.conio.net
ライセンス
・MITライセンス
JavaScriptライブラリ代表作
Ajaxの基本的な機能を網羅している
エフェクトなどのUIや派手な機能は持っていない・・・
お勧め度：★★★★★
ライセンス
・MITライセンス
JavaScriptライブラリ代表作
Ajaxの基本的な機能を網羅している
エフェクトなどのUIや派手な機能は持っていない・・・
お勧め度：★★★★★
■jQuery
公式サイト：http://jquery.com
ライセンス
・デュアルライセンス
・MITライセンス
・General Public License
エフェクト系の処理が充実している
CSSに似た書き方でJavaScriptを記述できるため、デザイナ向けのライブラリ
お勧め度：★★★
ライセンス
・デュアルライセンス
・MITライセンス
・General Public License
エフェクト系の処理が充実している
CSSに似た書き方でJavaScriptを記述できるため、デザイナ向けのライブラリ
お勧め度：★★★
■MochiKit
公式サイト：http://www.mochikit.com
moo.fxというエフェクトライブラリから誕生した
軽量・高速
prototype.jsとの互換性があり、移行が容易である
オブジェクト指向
比較的デモが多いため手を出しやすいライブラリ
お勧め度：★★★
moo.fxというエフェクトライブラリから誕生した
軽量・高速
prototype.jsとの互換性があり、移行が容易である
オブジェクト指向
比較的デモが多いため手を出しやすいライブラリ
お勧め度：★★★
■YUI(Yahoo! User Interface Library)
■Dojo
公式サイト：http://dojotoolkit.org
ライセンス
・デュアルライセンス
・Academic Free License
・BSDライセンス
JavaScriptでGUIアプリみたいな感じのものを作るためのライブラリ
Ajaxライブラリの中でも1、2位を争う高機能ライブラリである
↓アップルオンラインストアでも使用されている
http://store.apple.com/jp
お勧め度：★★★★
ライセンス
・デュアルライセンス
・Academic Free License
・BSDライセンス
JavaScriptでGUIアプリみたいな感じのものを作るためのライブラリ
Ajaxライブラリの中でも1、2位を争う高機能ライブラリである
↓アップルオンラインストアでも使用されている
http://store.apple.com/jp
お勧め度：★★★★
■Adobe Spry
Webデザインソフト「Dreamweaver」などを開発する米Adobe Systemsによって開発された、Ajaxプログラミングのためのフレームワーク
2006年5月にプレリリース版が公開
JavaScriptを利用してHTMLで記述されたWebページ内にXML言語を埋め込むことができる
プログラマーではなくWebデザイナーが使用することを想定しており、基本的にはHTMLを加工するだけで、動的な表示の更新やインタラクティブな機能を実現できる
最低限の記述だけでAjaxが実現できるように設計されており、プログラマーだけでなくWebデザイナーもAjaxを使用できるように配慮されている
お勧め度：★★★★
2006年5月にプレリリース版が公開
JavaScriptを利用してHTMLで記述されたWebページ内にXML言語を埋め込むことができる
プログラマーではなくWebデザイナーが使用することを想定しており、基本的にはHTMLを加工するだけで、動的な表示の更新やインタラクティブな機能を実現できる
最低限の記述だけでAjaxが実現できるように設計されており、プログラマーだけでなくWebデザイナーもAjaxを使用できるように配慮されている
お勧め度：★★★★
■MochiKit
ライセンス
・デュアルライセンス
・Academic Free License
・BSDライセンス
Pythonネットワーキングフレームワーク
非同期型の遅延実行のコンセプトを使用
JSONエンコードデータセットと動的ページコンポーネントを容易ｊに生成する関数の集合MochiKit.DOMをロードして操作する
お勧め度：★★
・デュアルライセンス
・Academic Free License
・BSDライセンス
Pythonネットワーキングフレームワーク
非同期型の遅延実行のコンセプトを使用
JSONエンコードデータセットと動的ページコンポーネントを容易ｊに生成する関数の集合MochiKit.DOMをロードして操作する
お勧め度：★★
■script.aculo.us
公式サイト：http://script.aculo.us
ライセンス
・MITライセンス
スライダー操作、ドラッグ&ドロップ、フェードイン、フェードアウト、拡大、縮小などのエフェクトの開発を助ける
開発が比較的容易
お勧め度：★★
ライセンス
・MITライセンス
スライダー操作、ドラッグ&ドロップ、フェードイン、フェードアウト、拡大、縮小などのエフェクトの開発を助ける
開発が比較的容易
お勧め度：★★
■Rialto(Rich Internet Application TOolkit) javascript API
公式サイト：http://rialto.application-servers.com
ライセンス
・Academic Free License
複数のWebブラウザで立地クライアントの実現をするためのJavaScriptウィジェットライブラリ
フォーム、ドラッグ&ドロップ、ツリー、カレンダー、テーブル、ポップアップ、巣プリッ他などが実装可能である
Apache License Version 2.0のもとオープンソースソフトウェアとして公開されている
感想
・重い・・・
お勧め度：★★★
ライセンス
・Academic Free License
複数のWebブラウザで立地クライアントの実現をするためのJavaScriptウィジェットライブラリ
フォーム、ドラッグ&ドロップ、ツリー、カレンダー、テーブル、ポップアップ、巣プリッ他などが実装可能である
Apache License Version 2.0のもとオープンソースソフトウェアとして公開されている
感想
・重い・・・
お勧め度：★★★
■JavaScript使用ランキング
http://journal.mycom.co.jp/articles/2007/10/16/ajaxian/index.html
より引用
使ったことがあるまたは使おうと考えているフレームワーク
1 Prototype - 68%
2 Scriptaculous - 59%
3 jQuery - 48%
4 Yahoo UI - 40%
5 Dojo - 38%
6 Ext JS - 34%
7 Google Gears - 22%
8 GWT - 17%
9 DWR - 13%
10 Symfony - 5%
11 Qooxdoo - 3%
12 Tibco GI - 3%
13 jMaki - 2%
14 ICEfaces - 2%
15 そのほか - 22%
より引用
使ったことがあるまたは使おうと考えているフレームワーク
1 Prototype - 68%
2 Scriptaculous - 59%
3 jQuery - 48%
4 Yahoo UI - 40%
5 Dojo - 38%
6 Ext JS - 34%
7 Google Gears - 22%
8 GWT - 17%
9 DWR - 13%
10 Symfony - 5%
11 Qooxdoo - 3%
12 Tibco GI - 3%
13 jMaki - 2%
14 ICEfaces - 2%
15 そのほか - 22%
■人気のあるAJAX言語ライブラリ
http://journal.mycom.co.jp/news/2006/09/26/340.html
より引用
Prototype - 43%
Script.aculo.us - 33%
Dojo - 19%
DWR - 12%
Moo.fx - 11%
iQuery - 7%
Yahoo! UI - 5%
Rico - 5%
Atlas - 4%
MochiKit - 4%
XAJAX - 4%
Google Web Toolkit - 3%
より引用
Prototype - 43%
Script.aculo.us - 33%
Dojo - 19%
DWR - 12%
Moo.fx - 11%
iQuery - 7%
Yahoo! UI - 5%
Rico - 5%
Atlas - 4%
MochiKit - 4%
XAJAX - 4%
Google Web Toolkit - 3%
