AJAX Webアプリケーション アイデア ブック

AJAX Webアプリケーション アイデア ブック

本書のお求めはこちらから

JavaScript を見直そう！アイデア次第でここまでできる！

JavaScript に眠る財宝＝Ajax を掘り起こせ！

  • Google Suggest 風テキストボックス
  • Google Maps 風パノラマ画像表示
  • このほか RSS リーダーなど Ajax 体験サンプルを紹介

　futomi の 2 冊目の著書が完成しました！Perl/CGI 本に続き、今度は Ajax （JavaScript） がテーマです。Webアプリケーション開発には欠かすことができない JavaScript を、Ajax という切り口で、実践的なサンプルを通して詳しく解説しました。サーバサイドのアプリケーション開発者だけではなく、ウェブデザイナーまでを巻き込むAjax手法は、ウェブに携わるすべての方に必須のテクニックとなっていくことでしょう。本書は、ある程度 JavaScript を使ったことがある方であれば理解できるよう、ステップバイステップで解説しています。ぜひ、あなたも Ajax を自分のものにしてください。

本書で解説しているサンプルスクリプトを、本コーナーにて公開しています。下の目次欄の [Sample Script] をクリックしてご覧下さい。

著者
羽田野 太巳
判型
A5判
本文
2色刷／288ページ／並製
ISBN
4-7980-1196-7 C3055
本体価格
2,000円（税込み2,100円）
発売開始日
以降順次
出版
株式会社 秀和システム（本書紹介ページ）

「はじめに」より抜粋

無限の可能性を秘めたAjaxという畑に、「新しいWebアプリケーション」という花を咲かせる「アイデアの種」を蒔くこと
――それが本書の仕事です。

Webページでも、ふつうのアプリケーションのような操作性を実現できたら便利になるのになぁ

と感じたこと、ありませんか？　Webマスター、Webデザイナー、開発者など、Webページ作成に関わる人であれば、誰でも一度は感じたことがある疑問。

そう、われわれは、ブラウザの機能という制約に、知らず知らずのうちに縛られていたのです。

しかし近年、メジャーなブラウザーも進化を遂げ、さまざまな機能が実装されるようになりました。使い勝手の部分だけにとどまらず、開発者向けには、JavaScriptエンジンの強化が図られてきました。

そして、これまであまり使われてこなかった機能が、俄然注目を集めるようになりました。こうした機能の一つにXMLHttpRequestがあります。XMLHttpRequestを使えば、「JavaScriptから非同期にHTTP通信を行ない、WWWサーバと連携することで、ページ遷移をすることなく、部分的にダイナミックに表示を変化させ、ふつうのアプリケーションのような操作性を実現することができる」のです。

本書では、Ajaxの核となるXMLHttpRequestオブジェクトをはじめ、それに付随する DOM (Document Object Model) 、イベントハンドリングの解説から、実践的な Ajax Web アプリケーション作成までを網羅した Ajax 解説書の決定版です。本書は、Webアプリケーション開発技術者のみならず、Webデザイナー、ネットビジネスをプロデュースしているマネージャー、Webマスターを対象としています。JavaScriptやCSSの基礎をある程度学んだことがあれば、応用が効く数多くのサンプルを通して、ステップ倍ステップで、無理なく Ajax が理解できるように構成されています。

Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.
- Albert Einstein

想像力は知識よりも大切だ。知識には限界がある。想像力は世界を包み込むのだ。
- アルバート・アインシュタイン

こうして蒔かれた種が、あなたの想像力によって芽吹き、一つでも多くの、そして画期的なWebアプリケーションが誕生してくれることを願って。

AJAX Webアプリケーション アイデア ブック目次

Chapter1 AJAX の概要

1.1 Ajax とは
1.1.1 Ajax の定義
1.2 Ajax の導入事例
1.2.1 Google Suggest
1.2.2 Google Maps
1.3 アプリケーションモデル
1.3.1 これまでのアプリケーションモデル
1.3.2 Ajax のアプリケーションモデル

Chapter2 AJAX の基礎知識 [Sample Script]

2.1 HTTP 通信
2.1.1 HTTP 通信処理の流れ
2.1.2 ブラウザーの互換性
2.1.3 通信タイムアウト処理
2.1.4 サーバエラー
2.2 XHTML
2.2.1 セマンティックで妥当なHTML
2.2.2 XHTML の記述ルール
2.3 DHTML
2.3.1 DHML とは
2.3.2 スタイルの操作
2.3.3 タグ要素の操作
2.4 DOM
2.4.1 DOM とは
2.4.2 DOM の活用方法
2.5 イベント
2.5.1 これまでのイベントハンドリング手法
2.5.2 DOM イベントハンドリング手法へ
2.5.3 マウスイベント
コラム： DOM Walk-Through

Chapter3 はじめの一歩 [Sample Script]

3.1 Hello AJAX!
コラム： イベントハンドリングでリスナーかハンドラー、どっちが良い？
3.2 HTML を画面内部に組み込む
3.2.1 ラジオボタンで切り替える
3.2.2 テキストリンクで切り替える
3.3 子ウィンドウに組み込む
3.3.1 半透明の子ウィンドウを開く
3.3.2 子ウィンドウをフェードアウトで消す
3.3.3 ドラッグして移動させる
コラム： 便利なBasic 認証、されどAjax では...

Chapter4 インタラクティブなフォーム [Sample Script]

4.1 テキストボックスの入力支援
4.1.1 テキストボックスへの自動挿入
4.1.2 Google Suggest 風のテキストボックス
4.2 セレクトメニューの項目操作
4.2.1 ラジオボタンでセレクトメニューの内容を切り替える
4.2.2 セレクトメニューの簡易ショッピングカート
4.3 サーバにデータを送信する
4.3.1 POST メソッドによるデータ送信の基本
4.3.2 Ajax 的なフォーム入力値のチェック

Chapter5 ダイナミックな画像表示 [Sample Script]

5.1 画像表示の基本
5.1.1 サムネイルをスケールエフェクトで拡大表示する
5.1.2 画像を枠内でドラッグ移動する
5.2 Google Maps 風パノラマ画像表示
5.2.1 設計アウトライン
5.2.2 JavaScript コード詳説
5.3 マウスホイールによるアクション処理
5.3.1 マウスホイールイベント
5.3.2 画像を拡大・縮小表示する

Chapter6 XML データの活用 [Sample Script]

6.1 XML 活用テクニック
6.1.1 XML 概要
6.1.2 XML データを画面に組み込む
6.2 RSS リーダーを作ろう
6.2.1 RSS 概要
6.2.2 RSS の内容を整形してHTML 内に組み込み表示する
6.3 Amazon Web サービス
6.3.1 Amazon Web サービス概要
6.3.2 カテゴリーごとに新着書籍を表示する

サンプルコードダウンロード

本書で紹介しているすべてのサンプルコードは、こちらからダウンロードしてください。

ダウンロードしたら zip ファイルを解凍してください。source というフォルダーがございますので、このフォルダーをそのままご利用のウェブサーバにアップロードしてください。ウェブサーバにアップロードしたものでないと、正しく動作いたしませんので、ご注意下さい。source フォルダー内に index.html がございますので、ブラウザーでアクセスすると、各章で紹介したサンプルへのリンクページが表示されます。

改訂履歴

5.3.2 画像を拡大・縮小表示する(P226) - 2008/12/09公開

function resizeImage(e) {...} の中

改訂前
	} else if(e.wheelDalta) {
改訂後
	} else if(e.wheelDelta) {

5.3.2 画像を拡大・縮小表示する(P226, P231) - 2008/12/09公開

改訂前
    if(e.clientX && e.clientY) {
        mouse_x = e.clientX;
        mouse_y = e.clientY;
    } else {
        mouse_x = outframe_pos.x + Math.round( outframe.offsetWidth / 2 );
        mouse_y = outframe_pos.y + Math.round( outframe.offsetHeight / 2 );
    }
改訂後
    if(e.wheelDelta && e.clientX && e.clientY) {
        mouse_x = e.clientX;
        mouse_y = e.clientY;
    } else {
        mouse_x = outframe_pos.x + Math.round( outframe.offsetWidth / 2 );
        mouse_y = outframe_pos.y + Math.round( outframe.offsetHeight / 2 );
    }
説明

本書発売時点（2005年12月）では、マウスホイールイベントから取得できるclientX, clientYプロパティーは、FireFox1.5の場合、0がセットされておりました。そのため、改訂前のスクリプトでも問題なく動作しておりましたが、2006年6月現在のFireFox1.5の最新版では、これらプロパティーに値がセットされるようになりました。しかし、実際のマウスポインターの座標ではない値がセットされてしまい、本サンプルが正常に動作しなくなりました。そのため、マウスポインターの座標を取得するコードに修正を加えました。

clientX, clientYプロパティーに0ではない値がセットされている場合にこれらプロパティー値をマウスポインターの座標として適用しておりましたが、これだけでは、FireFox1.5の最新版においても、clientX, clientYプロパティーの間違った値が適用されてしまいます。そのため、これらプロパティー値を適用する条件に、e.wheelDeltaが存在することを加えることで、FireFox1.5の最新版がこれらプロパティー値を適用することを回避しております。