第10回 地図のように年代を移動できるMITのAjax歴史年表

株式会社ピーデー
川俣 晶
2006/7/26

マウスによるドラッグで、東西南北自由な方向に地図スクロールさせる代わりに、MITが作ったTimelineで過去と未来の時間軸を自由に移動してみよう（編集部）

今回のピックアップトピック Timeline｜日本で公開されているAPI一覧｜Paguna｜Zoho Show／Lightbox JS v2.0／True Javascript Sockets?／キャッシュ付$関数

ハイライト1・歴史年表と地図を効果的に関連付けるAjax

• 歴史年表と地図をAjaxが関連付ける

  Timeline
• Live Examples, Religion Timelines
• Live Examples, Dinosaurs

　筆者は地図が好きですが、歴史も好きです。そして、この2つは密接な関係があります。例えば、地図に見える不自然な道路や施設などが、なぜ不自然に見えるのかという理由が歴史に埋もれていることがあります。

　一例を挙げれば、JR中央線の東中野から立川まで真っすぐの路線が延びている理由は、現在の沿線を見ても分かりませんが、建設当時の状況を見れば一目瞭然です（その辺りはほとんど農地で、土地の既得権でもめることが少なかった）。逆に、歴史の不思議を読み解くために地図は有効な手段となります。

　羽村取水堰から四谷大木戸まで続く玉川上水は、大体、西から東に向かって進んでいます。ところが、京王新宿線笹塚駅の南側で、唐突に南の方に折れ曲がり、それから、元の方角に向きを変えています。その理由は複製古地図の等高線を見ることで分かりました。水は高い方から低い方にしか流れないので、より高い土地は避けて上水は引かねばなりません。つまり、より高い土地を避けて通すために、一見無駄な遠回りに見える経路が選ばれたというわけです。

　さて、地図はGoogle Mapsが火付け役となって、Ajaxで扱う主な対象の1つとなっています。地図と歴史は密接な関係があるとすれば、地図だけでなく、歴史をAjaxで扱うというアイデアはどうでしょうか？　マウスによるドラッグで、東西南北自由な方向にスクロールさせる代わりに、過去と未来に自由に移動するというアイデアはどうでしょうか？

　そのアイデアを実現させたものが、このMIT（マサチューセッツ工科大学）のジョイントプロジェクトの試み「Timeline」といえます。実際に、上に紹介した2つの生きている例を試すと、何がどうなっているのかがよく分かるでしょう。Religion Timelinesは、ユダヤ教とキリスト教の2000年の歴史年表を、スクロール可能な形で見るものです。Dinosaursの方は恐竜の歴史を見ることができます。恐竜の名前の横に、個々の恐竜の形を示したアイコンも表示されるので、英語が分からなくても楽しめると思います。

　さて、この2つの例は、あくまで例です。このライブラリを用いた歴史年表を、自由に自作することができます。歴史に関するデータをお持ちの方は、それを使ったページを作成してみてはいかがでしょうか？

ハイライト2・英語に煩わされずに使えるAPIずらり

• 日本で公開されているAPI一覧

ホテル探しから予約を行うWebサービスのシステム

　Ajaxアプリケーションや、それに限らずさまざまなアプリケーションを作成する際に利用できる公開APIにはさまざまな種類があります。GoogleやYahoo!、はてな等、最先端を行くメジャーなサービスはいずれも何らかのAPIを提供しているといえます。

　しかし、いま現在、どのようなAPIが公開されているのかというと、おそらく全体像を把握している人は多くないと思います。そこで、そのようなサービスをリストアップしようと試みる人たちが出てくるわけです。その中で、特に日本語圏のAPIの最新リストを目指して作成されたのがこれです。英語に煩わされずに使えるAPIだけ、これだけの数があります。このリストの長さをぜひ味わってみてください。長さとは可能性を意味します。

　さて、ここで1つ興味深い指摘がなされているのは「RSSも検索結果のようにパラメーターによって内容が変化するものはAPIとして入れていいかなぁ、と思ってます」という部分です。RSSといえば更新情報を提供するもの……というのが常識的な使い方ですが、リクエストによって内容が変わるならば、それは単なる更新情報ではあり得ません。それをAPIと呼ぶというのは、有益な試みでしょう。

ハイライト3・Ajaxが最終的に到達すべきはページでなく

• Paguna

ホテル探しから予約を行うWebサービスのシステム

　このサイトそのものは決して新しいものではありませんが、触れておく価値があると考えて取り上げます。このサイトは、ホテルを探し、予約を行うシステムです。それだけならよくある話ですが、このサイトが特徴的なのは、1つのページ上ですべての処理を行うということにあります。

　つまり、ホテルを検索して、そのホテルがどのようなものかを読み、予約を行うまでの試行錯誤を含むすべての作業を、この1つのページから行うことができます。これは、いい換えれば、ページという概念が持つ意味が決定的に変わってしまったことを意味します。従来のページは、単一の情報や機能だけを持つ存在であり、それに含まれないものは別ページへのリンクとして埋め込まれることが普通であったといえます。しかし、このサイトは、すべての機能を1つのページに詰め込んでしまったわけです。

　これはもう、ページというよりはアプリケーションソフトです。Ajaxが最終的に到達すべき1つの地平は、リッチなページではなく、アプリケーションソフトにあるという状況を、非常によく体現しているという意味で、このサイト＝ページには大きな意味があるような気がします。

そのほかのみどころ

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

ユーザー登録不要のプレゼンソフト

• Zoho Show

　Ajaxによるプレゼンテーションソフトです。すぐに試せ、そこそこ使えた……というのが紹介する主な理由です。

　テキストとイメージを追加して、日本語の文字を入れて、自分で撮影した写真を入れてみたところ、いともあっさりと入ってしまいました。この手軽さはAjaxに慣れ親しむための大きな武器といえます。

ユーザー登録なしで使えるｓAjaxによるプレゼンテーションソフト

　ちなみに、今回のネタの中には、「ユーザー登録せずに気軽にデモを実行できない」という理由で候補から落としたものがあります。すぐに使えるデモは、ぜひとも提供していただきたいと思います。それによって広がる価値はとても大きいと思います。

画像のオーバーレイ表示

• これがAjaxな写真の見せ方か？

  Lightbox JS v2.0

　画像をページ上にオーバーレイ表示するライブラリです。という説明を読むよりも、取りあえず上記のサイトに飛んで、EXAMPLEの画像をクリックしてみてください。ライブラリを使わない一般ユーザーの方も、ぜひ試してみてください。Ajaxで何が達成されるのか……という疑問への、直感的な分かりやすい答えになっていると思います。

　サイトの作成のとき、このようなライブラリを日常的に使うようになれば、ネットサーフィンの印象はまったく違ったものになるでしょう。ワクワクしますね。

SocketsにアクセスできるJavascript

• Ajax×Flash

  True Javascript Sockets?

　完全に技術面での話題です。通常、Webブラウザ上のJavaScriptはSocketにアクセスすることができません。そのため、任意のプロトコルの通信を行うことは困難であり、そのような役目は通常サーバ側に振られます。

　しかし、Flashを併用することでこの問題を乗り越えた事例です。“demo of the functionality”をクリックすると、動いているところを見ることができます。使える手段は何でも動員し、欲しい機能を実現する……というのは、まさにAjaxらしいと感じます。

iframeでマルチブラウザ

• IE 5.5以上、Firefox、Netscape 6/7以上, Opera 7.5以上の“ほぼすべて”のブラウザに対応するAjaxフレームワーク

  uniAjax, Ajax request framework

　驚くほど数を増やしつつあるAjaxのライブラリの1つですが、これにはWebブラウザの対応範囲が広いという特徴があります。その秘密は、通信にiframeを使うことにあります。

　Ajaxの基本的な通信手段はXMLHttpRequestオブジェクトですが、iframeにも価値があるとして見直すという動きはこれまでもありました。そのような流れの中で生まれてきた現実的なライブラリの1つだといえます。もちろん、Ajaxは何でもありですから、これも「あり」です。

キャッシュ付$関数で高速化

• 一度取得した$という名前の関数をキャッシュして高速化するという発想

  キャッシュ付ちょい$関数
• 要素をキャッシュして $ 関数をちょっと高速化

　Ajaxプログラミングで、getElementByIdメソッドを用いて指定IDの要素オブジェクトを得る処理は定番といえます。これを手軽に書くために、より短い$という名前の関数を作成して使うことは珍しくありません。

　多くのライブラリが、$関数を提供しています。そこで、1つのアイデアが出てきます。それほど繰り返し使われるものなら、一度取得したデータをキャッシュしてしまえば高速化するのではないか……。

　そして、その効能は大きかったようです。まだまだ、小さな工夫で大きな改善を得られる余地が残っているのがAjaxということですね。

　与えられたものを使うだけではなく、そこに新しい創意工夫を入れ込んでいく余地が残されているという意味で、まだまだAjaxは技術者が取り組んで面白い世界だと思います。このキャッシュの件は、その好例ですね。

---

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

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