第2回 Ajax、それはWeb2.0へと続く道

株式会社ピーデー
川俣 晶
2005/11/19

今回のピックアップトピックIndex Web2.0への道｜Yahoo!地図情報 - スクロール地図（ベータ版） ｜Windows Live｜Arax｜仮想ブラウザ／HTMLリアルタイム編集など

そのほかの見どころ

　さらに、Ajaxとそれに関連する話題を紹介します。

ブラウザ内で動作する仮想ブラウザ

• Ajaxでブラウザ内で動作する仮想ブラウザを作ってみました

　dragfloatWindow.htmlをダウンロードし、ローカルのハードディスク上から開きます（注）。すると、ブラウザのウィンドウ内に別のドラッグ可能なWebブラウザが出現します。見た目が面白いので、ぜひ試してみてください。Internet Explorer限定です。

　さて、このようなプログラムを紹介した理由は、見た目が面白いからというだけではありません。これは、ページの一部がWebブラウザとして機能し、ページに付加価値を付けるようなAjaxアプリケーションが成立する可能性を示しています。まだまだアッと驚くような面白いAjaxアプリケーションが生まれる可能性は大いにあります。

注：筆者が確認した時点では、以下の部分を訂正する必要がありました。

修正前： src="/js/prototype-1.3.1.js"

修正後： src="http://prototype.conio.net/dist/prototype-1.3.1.js"

HTMLリアルタイム編集

• [ajax]quickedit - HTMLリアルタイム編集（ブックマークレット）

　Ajax専用というわけではありませんが、非常に有用なツールなので紹介します。これは、Webブラウザのブックマーク（お気に入り）に登録して使用するブックマークレットです。あるページを閲覧中に、このブックマークレットを選ぶと、別ウィンドウが開き、そこに編集可能なページのソースコードが表示されます。そのソースコードを書き換えると、それに応じてページ内容が変化します。これは非常に便利です。開発中に、試行錯誤的にページを組み替えるにも便利だし、デバッグのために一時的に構造を変えるのも簡単。あまり良いことではありませんが、他人の作成したページの動作を解析するのにも使えます。

　しかし、ここで注目すべきことはそれだけではありません。Dynamic HTMLのおかげで、あらゆるWebページは外部から容易に書き換え可能だという事実をかみしめてください。フォームを書き換え、本来なら送信されることがない値をサーバに送信させることも容易にできるのです。Ajaxに対応するサーバ側のプログラムは、そのような不正な値が送信される可能性を意識し、万全の備えをしておく必要があります。

対話的なCSSデザイナ

• QrONE CSS Designer - CSS Style Editor

　Ajaxの開発では、CSSは避けて通れない重要な技術となります。ページの見た目のデザインを動的に変更するには、JavaScriptでCSSの指定を書き換えていくことになります。ところが、プログラムでCSSを書き換えるというのが意外と大変なのです。静的なページであれば、WYSIWYGの対話的なツールでメニューから色やスタイルを選んでいけば、意図するデザインのページが出来上がります。しかし、JavaScriptから書き換える場合、色やスタイルはCSSの文法に沿った文字列で書かねばなりません。例えば、枠線のスタイルをgrooveに切り替える場合は、grooveというつづりを覚えておかねばなりません。また、grooveがどのような見かけになるのかも知っていなければなりません。こういった暗記の面倒を取り払うには、このQrONE CSS Designer - CSS Style Editorが便利です。フォームを操作することで、対話的にCSSの設定を作り出し、即座にCSSの文法で結果を見ることができます。なお、Dynamic HTMLで使う場合は、若干の読み替え（例えば"border-width"を"borderWidth"に）が必要とされます。

Google ローカル（Maps）が世界測地系に変わる！

• Google-Maps-API-Japan・APIにおける世界測地系

　厳密にいえばAjaxの話題には当てはまりませんが、Ajax周辺での大きな話題ということで取り上げます。Google ローカル（Maps）は、緯度経度のパラメータで位置を指定して地図やサテライトを表示することができます。従来、この座標系は日本測地系であったものが、12月1日より世界測地系に変更されるといいます。これによって、同じ緯度経度を指定した場合でも、異なる場所が示される可能性があります。詳細や対策は、上記URLにあります。世界測地系への移行は、国境のないシームレスなサービスを実現するために行われるそうで、これはこれで好ましい改善ということができるでしょう。

　ちなみに、Google Maps APIとは自作ページ内からGoogle ローカル（Maps）の地図を利用するためのAPIです。

書籍 「入門 Ajax」

• 書籍 「入門 Ajax」

　おそらく日本初のAjaxに関する書籍が発売されました。これが高橋登史朗さんの「入門 Ajax」です。シンプルなタイトルに見えますが、あえて「Ajax入門」と書かずに語順が逆転しているところが、微妙に緊張感のある語感を生み出していて興味深いネーミングです。さて、インターネットを検索すれば何でも情報が出てくる状況で、印刷物を紹介する価値があるのでしょうか？ それは間違いなくYesです。なぜなら、書籍を読む方がずっと楽に効率よく精度の高い情報を得ることができるし、インターネット上に存在しない情報が書籍にあることも珍しくないからです。それは、2499円（税込）のお金を払うだけの価値があるメリットです。昔の人は、「書を捨てて街に出よう」といいましたがいまは違います。いまはこういいましょう。パソコンの画面ばかり見ていないで、「書を買いに街に出よう」。（しかし、筆者はインターネット通販でこの本を買い、街に出ていないのは内緒です）

　この書籍は、まったくの素人が最初に手にする本としては敷居が高い感があります。しかし、豊富なコード例によって、技術的な具体像が非常に分かりやすくまとまっています。Webブラウザ間の非互換性や、さまざまな機能の実装方法なども紹介されています。特に、上記のGoogle Maps APIについては1章を割いて詳しく説明しています。これからAjaxの世界に踏み込んでいこうという技術者の道しるべになる1冊でしょう。

---

前のページへ

2/2

INDEX
Ajax、それはWeb2.0へと続く道
	Page1＜Web2.0への道＞Googleの独走を許すな！ Yahoo!地図情報の逆襲!!／Windows Live／Ajax？ いえAraxです
	Page2＜仮想ブラウザ／HTMLリアルタイム編集など＞ 対話的なCSSデザイナ／Google ローカル（Maps）が世界測地系に変わる！／書籍 「入門 Ajax」

古くて新しいAjaxの真実を見極める 「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう 最終更新 2005/8/2

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