jQueryではじめるAjax

第1回 まずは実装してみよう

この記事を読むのに必要な時間:およそ 4 分

はじめに

この連載では,Javascriptは知っているけどAjaxは実装したことがないという方に向け,YouTube APIを利用したWebアプリケーションを題材に,実装の方法を解説します。

JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装,基本的な使い方,また,UIへの応用実装も合わせて解説します。

Ajaxってなに?

Ajaxとは,Asynchronous Javascript+XMLの略称です。Javascriptを使い,Webページとは非同期(Asynchronous)にXML形式(もしくはテキスト形式)のデータ通信を行う手法を指します。

Ajaxを使うと特別なプラグインなどを必要とせず,Webページの必要な部分だけ必要に応じて書き換えることができるため,ユーザビリティの高いWebアプリケーションを作ることができます。また,異なるWebサービスをまとめたりすることもできるため,既存のWebサービスから別の価値を生み出すWebアプリケーションを作ることができます。

ただ,Ajaxは技術であり,より良いWebアプリケーションを作るのは「使い方次第」です。使い所やポイントについては,連載の最後に書きたいと思います。

Ajaxを効果的に使ったWebアプリケーションの例として,Google Mapsがあります。皆さんも一度は目にしたことがあると思います。

図1 Google Maps

図1 Google Maps

Webページ全体を再読み込みすることなく,地図をドラッグしたり,ズームしたりすることができます。 これまでの地図は,上下左右をクリックして地図を「切り替えて」いましたが,Google Mapsではドラッグして地図を「ずらす」ことができます。

よって,頭の中で図面のつながりを保ったまま,地図を移動させることができます。 Ajaxがとても効果的に使われています。

Ajaxは難しい?

Ajaxは既存の技術の組み合わせなので,それぞれはそう難しくありませんが,1から実装すると,複数のブラウザの対応,クロスドメインアクセス,セキュリティの問題など,いろいろと頭を悩ますことになります。

しかし最近では,Ajaxを簡単に使うためのライブラリ,また,開発ツールにもAjaxを使う仕組みが標準で組み込まれ,Ajaxを扱うための環境が揃いつつあります。

本連載では,jQueryというJavascriptライブラリを使い,簡単にAjaxを実装する方法を解説します。

解説の進め方

本連載は,Ajaxの実装をしたことがない人に向けたものですので,完成されたアプリケーションを解説するのではなく,少しずつ実装を加えながら解説するというように進めます。

基礎的な知識

YouTube APIってなに?

YouTube APIとは,YouTubeが提供しているWebサービスを,プログラムから利用できるように公開されたAPIです。YouTubeの様々な機能を利用したり,他のWebサービスや自作のプログラムと組み合わせることができます。

2007年8月28日に新しいYouTube APIがリリースされました。Google Data APIs(GData)に準拠して新しく実装されています。また,2007年1月現在では認証は不要です。Youtubeのアカウントを取得する必要はありません(現段階では読み取り専用のため)。

本連載ではこの新しいバージョンで実装します。詳細は,Reference Guide-YouTube Data APIを参照してください。本連載でも実装に必要なところは随時解説します。

ビデオを検索するAPI

YouTubeの検索結果はfeedとして返されます。ビデオを検索するためのvideo feed,評価の高いものや最も表示されたものなど,主要なリストを返すstandard feeds,ユーザのプレイリストを返すplaylist feedなどいくつかの種類が用意されています。

まずはビデオを検索するためのvideo feedを使ってみましょう。呼び出し方は以下のようになります。

http://gdata.youtube.com/feeds/api/videos

上記にYoutube APIで使用できるパラメータを付与して問い合わせます。詳細はYouTube query parameters referenceを参照ください。

例えば,catというキーワードで,最大件数を10件として検索するには以下のようにリクエストします。

http://gdata.youtube.com/feeds/api/videos?vq=cat&max-results=10

データフォーマット

altパラメータに,応答データのフォーマットを指定することができます。何も指定しないとatom(Atomフォーマット)になります。その他,rss,JSON,json-in-script(JSONP)を指定することができます。今回は,JSON-in-script(JSONP)を使用します。JSON,JSONPおよびクロスドメインアクセスに伴う問題については次回説明します。

文字エンコーディング

応答データの文字エンコーディングはUTF-8です。ソースコードはUTF-8で作成してください。

著者プロフィール

池田正一(いけだまさかず)

仕事ではもっぱらJavaを使い,たまにC/C++を書かされ,WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。

コメント

コメントの記入