Ajax ~ 入門記事、解説記事などのまとめ
JavaScriptの非同期通信機能などによってアプリケーションを開発するための技術。その情報源やプログラミング入門など
Ajaxは、JavaScriptの非同期通信機能を使い、アプリケーションのバックグラウンドでサーバと通信を行うなどの方法を用いて、ユーザーに使いやすい対話型のユーザーインターフェイスなどを実現する技術のことです。
こうした技術を実現する仕組みは以前からJavaScriptに備わっていましたが、Google Mapsが画期的に使いやすいユーザーインターフェイスで話題になったことや、Jesse James Garrett氏が2005年にこうした一連の技術を"Ajax"(Asynchronous JavaScript + XML)と命名したことで、一連の技術に対する認知が一気に高まりました。
主なWebサイト
まずは"Ajax"という名称を提唱したJesse James Garrett氏のブログのエントリと、その日本語訳を紹介します。
- adaptive path » ajax: a new approach to web applications
最初にAjaxという名前が使われたブログのエントリ - Ajax: Web アプリケーション開発の新しいアプローチ
上記の日本語訳
MozillaのAjaxコーナーは、日本語で読めるAjax関係の情報源の1つです。
- AJAX - Mozilla Developer Center
Ajaxの解説。基本的なツールの紹介、メーリングリスト、サンプルなど
米Yahoo!、米Sun Microsystemz、米MicrosoftのAjax関連のコーナーも参考になります。
- JavaScript Developer Center - Yahoo! Developer Network (英語)
- Ajax Technology Center from Sun Microsystems, Inc (英語)
- AJAX : The Official Microsoft ASP.NET Site (英語)
Ajaxianは、Ajax関連情報サイトとしてもっともよく知られたサイトの1つです。
- Ajaxian (英語)
Ajax関連のトピック紹介、技術解説などを毎日ブログ形式で掲載
OpenAjax Allianceは、Ajaxの相互運用性やセキュリティ、開発環境などに関する標準化団体です。例えば、複数のAjaxライブラリをアプリケーション内で衝突させずに問題なく使えるようにしたり、開発環境で容易にAjaxライブラリをサポートするための標準化などを推進しています。
- OpenAjax Alliance (英語)
Ajaxの概要と基本
ネット上でAjaxを学べる記事をリストアップしました。まずはAjaxの概要、仕組みなどを解説した記事は以下です。
- 第3回:Ajaxの価値を再考する:ITpro
Ajaxの歴史的経緯、Webアプリとしての利点、アーキテクチャ - Ajaxを読み解く:ITpro
Ajaxが非同期で動作する仕組みを図とリストで解説 - @IT:古くて新しいAjaxの真実を見極める
簡単なJavaScriptとPHPのサンプルプログラムでAjaxの仕組みの説明 - JavaプログラマはAjaxに乗るべきか - @IT
約10種類のAjax統合開発ツールの紹介
プログラミングを中心としたAjax入門記事、解説記事
- Getting Started - Mozilla Developer Center
HTTPリクエストの送り方、サーバ応答の扱い方、XMLレスポンスの扱い方など、ゼロからAjaxアプリを開発する際のプログラミング方法を解説 - リッチクライアントの中心技術「Ajax」を学ぶ:ITpro
XMLHttpRequestオブジェクトを使った通信処理の流れ、アプリとサーバ間でのデータのやりとりの手法など - Ajaxのキソのキソまとめ - builder by ZDNet Japan
XMLHttpRequestオブジェクトによるJavaScriptで非同期リクエストを発行する方法 - Ajax入門 - ajaxtower
XMLHttpRequestオブジェクトのプログラミング方法とクロスブラウザで動作させる方法
Ajaxアプリケーションのパフォーマンスを計測する5つのツールが下記の記事で紹介されています。
Ajaxプログラミングのチュートリアル
Ajaxライブラリなどを使った実践的なプログラミングの解説記事を紹介しましょう。
- [Think IT] 【これならわかる!JavaScript/Ajax】Ajaxライブラリ入門
prototype.jsやjQueryといったAjaxライブラリの概要を紹介し、ExtJSとGoogle Ajax APIを使ってRSSリーダーのプログラミングを行う - [JavaScript]All About
Google Mapsの応用、jQueryによる視覚効果の実現方法など総合的なAjax記事を掲載 - Ajaxでデバッグしよう - @IT
ログが取りにくいなどデバッグの面倒なAjaxアプリ開発を、リモートログによって動作状況を把握し、効率よくデバッグを行う方法の紹介 - 連載インデックス「パターンとライブラリで作るAjaxおいしいレシピ」 - @IT
jQuery、prototype.js、Ext Js、Ruby on Railsなどさまざまなライブラリなどを用いたAjaxプログラミングを紹介する連載 - アドビのAjaxフレームワーク「Spry」を使ってみよう - @IT
デザイナ向けのライブラリSpryで、リッチナユーザーインターフェイスを備えたリンク集を作ってみる - 連載:Microsoft AJAX Library&JavaScriptプログラミング - @IT
MS Ajaxライブラリの導入、二重クリック防止などの基本から、ページの部分更新、対応コントロールの開発など応用までをカバー - ASP.NETプログラマーのためのjQuery入門 - @IT
Visual Studioで正式にサポートされたjQueryの基本、導入、プログラミングを手順と画面で解説 - 特集:jQueryではじめるAjax|gihyo.jp ... 技術評論社
jQueryによるJSONPの利用、YouTubeとのマッシュアップ、Suggest機能の実装など
マッシュアップ
Ajaxアプリケーションの発展の一形態としてマッシュアップがあります。マッシュアップは既存のWebアプリケーションをさらに加工したり、Webアプリケーションを組み合わせて新たなアプリケーションを開発する手法です。既存のWebアプリケーションを再利用するため、手軽に高度なWebアプリケーションが構築できるのが特徴です。
- いまさら聞けない「マッシュアップ」超入門(1/3)- @IT
マッシュアップの意味、基本的な技術、サンプルなど - Web APIという巨人の力を使っちゃえ! - @IT
マッシュアップの土台となるWebAPIとはどんなものか、どうやって使えるのか? - Google/Amazon/Yahoo! Webサービス徹底活用:ITpro
WebAPIの紹介、Google Maps、Google Web API、Amazon、YahooのWeb APIを用いたマッシュアップのプログラミング入門 - マッシュアップ・ラボ---目次:ITpro
Flickr画像検索、ライブドアブログパーツ、じゃらんホテル検索、楽天商品検索、Facebookアプリなど、さまざまなマッシュアップアプリケーションの開発
マッシュアップに使える主なWeb APIも紹介しておきましょう。
- Home Page - Google AJAX APIs - Google Code
- JavaScript Developer Center - Yahoo! Developer Network
- Yahoo!デベロッパーネットワーク
- はてなウェブサービス
- 【楽天ウェブサービス】RAKUTEN WEBSERVICE
- Amazon Web Services
- Flickr Services
- リクルートWEBサービス
- じゃらんWebサービス
- テクノラティ ディベロッパー センター
- 顔ラボ - WebAPI
セキュリティ
AjaxはWebアプリケーションを開発する技術の1つであり、その開発には当然ながらセキュリティについて最新の注意を払っておく必要があります。
- Ajaxのセキュリティ、特殊なものだと思ってました - @IT
HTTPの流れを把握しつつAjaxアプリケーションの脆弱性の全体像を会話形式で解説 - ここが危ない!Web2.0のセキュリティ:第1回 Ajaxとクロスサイトスクリプティング|gihyo.jp
全12回連載の第一回。脆弱性とそれを引き起こすコードを具体的に紹介し、どのような対策を取るべきかまで丁寧に解説 - Ajaxの特徴に潜むリスクをサンプルアプリで確認しよう - @IT
Ajaxの特徴に潜むセキュリティホールとなりそうなリスクを具体的にリストアップし、サンプルで確認する - Ajax アプリケーションに対するセキュリティーの脅威を克服する - developerWorks
Ajaxアプリケーションに対する攻撃例や攻撃シナリオを理解し、推奨される対策のベストプラクティスを紹介 - Ajax のセキュリティー・ツール - developerWorks
Ajax アプリケーションに伴うセキュリティー問題を軽減、解決するためのツールを紹介
以下の2つはWebアプリケーションをはじめとする一般的なセキュアなプログラミングの知識を把握するために押さえておくべき記事でしょう。
Ajaxおすすめ書籍
XMLHttpRequestやJSONを使ってAjaxアプリを実装するためのテクニックが前半、後半ではGoogle Mapsのマッシュアップやprototype.js、rico、script.aculo.usなどのライブラリのテクニックを解説(目次)
ページ要素を動的に変更するには、サーバからデータを読み取る粒度は、ユーザー操作への応答方法、処理の先読み、戻るボタンへの対応など、Ajaxで考えられる課題にどう解決すべきか、さまざまなパターンを紹介していく(目次)
Javaとのデータ型やオブジェクトの違いなどJava経験者を対象に説明される部分はあるが、Javaプログラムの経験がなくとも分かりやすく書かれている。Firebug、Eclipse、JBoss、Ajax4jsfなど周辺ツールの解説も充実(目次)
REST、XML-RPC、JSONなどWebAPIの一般知識から、商品検索、ブックマーク操作、天気予報、路線情報、相性占いなど目的別にWebAPIを紹介。こんなAPIがあるのか! と多くの発見があるはず(目次)
セキュリティの観点からAjaxを分析。より複雑で大規模化、サーバのメソッドが外部に解放されているというAjaxの特徴により、Ajaxは脆弱性の嵐を巻き起こす、としている。想定される脆弱性ごとに各賞で解説。最後はテストにも触れている(目次)