jQueryで学ぶ簡単で効果的なAjaxの使い方
連載インデックスへ
 jQueryで学ぶ簡単で効果的なAjaxの使い方（1）

Aptanaで始めるJavaScriptライブラリ「jQuery」超入門


ヤスダネットワーク
石黒 祐輔
関川 晶子
2009/3/2
いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！

JavaScriptライブラリ「jQuery」とは？


- PR -

　最近、Flashの代わりにJavaScriptを利用してリッチなデザインのWebサイトを構築する事例が増えてきました。特にグーグルのサービスは、JavaScriptをうまく取り入れている例として誰もがご存じでしょう。

　例えばGoogleマップは、Webブラウザ上でマウスをドラッグ＆ドロップするだけで、地図を自由に操作できます。このような操作感は、まるでWebサイトであることを意識させない作りになっています。

図1　Googleマップ
図1　Googleマップ

　本来、JavaScript自体はインターネットが広まり始めたころから存在していて、決して目新しい技術ではないのですが、Webブラウザの種類やバージョンによって挙動が異なることから、JavaScriptを使って大掛かりな仕組みを作ることは不可能だと考えられてきました。

　しかし、最近ではWebブラウザは自動的にバージョンアップされるようになり、いままで高かった壁が少し低くなってきました。そこへ、Webブラウザ間の挙動の違いを吸収したJavaScriptのライブラリが登場してきました。

　本連載で紹介する「jQuery」もその1つです。jQueryは、ほかのライブラリと比較するととってもコンパクトで、機能を拡張するプラグインも豊富にそろっています。

図2　jQueryはいろいろなプラグインでいろいろな機能が使えます
図2　jQueryはいろいろなプラグインでいろいろな機能が使えます

コラム　「Ajaxは甘くない！」
何かと注目されている「Ajax」という言葉はAsynchronous JavaScript and XMLの頭文字を取ったもので、JavaScriptとXMLを使ってインタラクティブなサイトを作る技術の総称という意味です。

Ajaxを使いこなすには、最低限JavaScriptとHTML、CSS、XML、HTTP通信の知識が必要で、決して簡単なものではありません。本連載では、理解しやすい部分からAjaxを使っていき、少しずつ理解を深めていけるような構成を心掛けて進めていきます。

Ajaxそのものについて詳しく知りたい読者は以下の記事を参考にしてください。

　「百聞は一見にしかず」ということで、前置きはこの程度にして早速jQueryを使ってみましょう。

jQueryのダウンロードと使い方

　jQueryは、以下のサイトからダウンロードできます。

http://jquery.com/

jQuery: The Write Less, Do More, JavaScript Library via kwout

　画面右下の「Download(jQuery);」を選択します。遷移先のページで、ファイル名「jquery-x.x.x.min.js」をクリックして、デスクトップに保存してください。本連載では、2008年3月現在で最新版の1.3.2を使います。

　jQueryの使い方は簡単で、実際のページでHTMLの<head>タグの中に、以下の<script>タグを記述するだけです。x.x.xの部分はバージョンによって変えてください。

<script type="text/javascript" src="jquery-x.x.x.min.js"></script>


Ajax/JavaScript開発にはAptanaが便利

　このままメモ帳で開発してもいいのですが、JavaScriptはデバッグが大変なので開発環境を整えましょう。本連載では、Aptanaを使います。

http://www.aptana.com/studio

Aptana Studio -- The Web 2.0 IDE for Ajax, PHP, Ruby on Rails, Jaxer and more via kwout

　正式名称は「Aptana Studio」で、EclipseベースのオープンソースのWebオーサリングツールです。JavaScriptやAjaxを用いて開発するうえで役立つ強力なツールとなります。Aptanaについての詳細は、少し古いですが以下の記事も参照しておいてください。

■ Aptanaを使うにはJREが必要

　Aptanaを使うにはJavaの実行環境（JRE）がインストールされている必要があります。インストールされていないPCを使う場合は、＠ITの「バージョン別セットアップマニュアル一覧」などを参照に最新版のJREをインストールしておいてください。

　次ページではAptanaをダウンロードしインストールして、AptanaでjQueryを使ったWebアプリケーションの作り方を説明します。

  1-2-3

　INDEX
jQueryで学ぶ簡単で効果的なAjaxの使い方（1）
Aptanaで始めるJavaScriptライブラリ「jQuery」超入門
Page1
JavaScriptライブラリ「jQuery」とは？
コラム　「Ajaxは甘くない！」
jQueryのダウンロードと使い方
Ajax/JavaScript開発にはAptanaが便利
  Page2
AptanaでjQueryを使うには？
jQueryのサンプルを作成して体験してみよう
jQueryのコードはちょっと特殊
  Page3
jQueryにはプラグインがある！
Ajaxを使うのは、プログラマだけではない

jQueryで学ぶ簡単で効果的なAjaxの使い方 バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • コンテンツ政策ヲ転換セヨ！ （2012/2/10）
    mixiにしろTwitterにしろニコ動にしろ、ソーシャルサービスは伸びている。シロウトの個人が作るコンテンツで成り立つサービスだ
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH