第4回 自動車業界のAjaxを活用したキャンペーンを目撃せよ

株式会社ピーデー
川俣 晶
2006/1/24

AjaxうきうきWatchではWebアプリのユーザビリティを改善しまくるAjax、Ajax、それはWeb2.0へと続く道、どんなに無茶をやっても「それもありかな」なAjaxとAjax界隈での動向をお伝えしている。 　今回はAjaxの応用が表現力の幅をぐんと拡げる例や、ダイナミックなデータ送信技術、AJAXデータのやりとりが分かるGIFインジケータ、FlashとJavaScriptを連携されるツールキットなど、今月の動向を紹介する。

ハイライト1・ブラウザを疾走するAjax駆動車

• TIIDA driving in はてな（期間限定）

　日産ティーダという自動車のプロモーションとして、「はてな」の一部のページ上で、ティーダの画像データがページ上を「走る」というサービスが提供されています。2006年1月23日までのキャンペーンでしたが、当記事公開日のいまは、TIIDA BLOG Type Hatena上に残っています。あえてこれを取り上げておきたいのは、日本の代表的な工業製品である自動車といえば、お金と手間をたっぷり掛けてプロモーションされるものであるからです。それに対して、ブログと並んで、Ajaxの技術を使って「ページ上を車が走る」というサービスを提供したという事実は、Ajaxが急速に社会に認知され、普及しつつある1つの証拠であると思います。オモチャのようなサービスではありますが、日本国内のAjax普及の1つのマイルストーンとして記憶にとどめておく価値があると思います。

　技術的には、おそらく個々の要素を地面に見立ててその上を走行するように作られている点が興味深いところです。矢印キーの下を押せば車は落下しますが、下の要素の上に乗って落下が止まります。これは、文書が構造を持ってレイアウトされていることを認識したうえで、それを本来の意図と異なる目的で利用している例です。この先、このようなタイプの応用事例で、ずっと有益な何かの機能を提供するサービスも出てくると思います。

今回のピックアップトピックIndex TIIDA driving in はてな｜地図日記 ｜Lightstreamer｜Qooqle ｜dPolls.com/AJAX Activity indicators/Flash JavaScript Integration Kit/Firefox用のJavaScriptデバッガ｜prototype.js 1.4.0を読む

ハイライト2・半透明ウィンドウで色気のあるビジュアル演出

• 地図日記

　また地図かよ！ （笑）

　はい、そのとおりです。これは、Googleの地図上に、ブログを張り付ける、あるいはブログ上に地図を張り付けるサービスです。これが面白いのは、地域から探してブログを読んでいくことができる点です。これは、ブログの弱点を克服する1つの手段となるかもしれません。

　さて、ブログの弱点とは何でしょう？ ここでいう弱点とは、あまりにも「読者の私」と関係のない話題が多過ぎるということです。既存のブログを引用してほとんど意味のない相づちを1行……、などというのは論外としても、「私」が行くことは生涯あり得ないような遠隔地のラーメン屋がおいしいかまずいかなどという話題は、あまりに「私」と関係がなさ過ぎます。それにもかかわらず、検索エンジンは情け容赦なく地域の隔たりに関係なくページを探してきます。

　しかし、この地図日記のような地図からブログを探して読んでいくシステムであれば、「私」の近所の話題だけを、容易に拾い上げることができます。近所のラーメン屋の話題であれば、それは自分も行く可能性があるわけで、興味を持つことができます。

　それだけではありません。近所で起こった予測もしていない出来事について知ることができる可能性もあるのです。検索エンジンで話題を探す場合は、あらかじめどのような情報があるか、ある程度予測して行うことになります。予測がなければ検索キーワードも思い浮かばないからです。つまり、まったく予測できない話題には到達できません。しかし、地図からブログを探すということになれば、話題は地域によって限定されることになるので、話題の内容は千差万別となります。例えば汚い川だと思って注目もしなかった近所の川で、「カモの親子が泳いでいました」というようなブログ記事を見ることで、新しい発見があるかもしれません。

　技術的には、Googleが提供する地図上に、ほかの情報を重ね合わせて利用している点に注目してみましょう。Dynamic HTMLとは、それを可能とする柔軟なシステムであると同時に、Google Maps APIそのものが、このような利用方法を想定して開発されているのも事実です。もう1つ、「地図日記とは？」をクリックすると、半透明ウィンドウがじわじわっと表示される凝ったギミックに注目してみましょう。こういう色気のあるビジュアル演出を容易に仕込めるところが、Ajaxの長所の1つです。今後は、こういったビジュアル効果を競い合う場面も多くなるでしょう。

ハイライト3・主導権を持ったサーバが、データをブラウザにプッシュし続ける

• Lightstreamer Real-Time Push Technology for Data Streaming

　データのプッシュ技術を提供する製品です。つまり、サーバが主導権を持って、データをクライアントに送信し続ける機能を提供する製品です。具体的にどのような方法でそれを実現しているのかは確認できませんでしたが、デモを見るとリアルタイムに次々と株価が書き換わっていくところが爽快です。

　おそらく、正直にXMLHttpRequestオブジェクトを使って1回ずつサーバにデータを要求するというスタイルとは別に、このようにダイナミックなデータ送信を行う技術も使われていくことになるでしょう。

　また、そのようなシステムをゼロから書き起こすのではなく、このような製品を活用して開発を行うことも多くなるのではないかと思います。自分でJavaScriptで書けばタダなのに、あるいは誰かが書いたソースをコピーすればタダなのに、金を出して買うのか？ という疑問を持つ人もいると思いますが、そのとおりです。Ajaxには、インターネットにまん延する「何でも無料で手に入れねば気が済まない無料病」を克服する1つのきっかけになってほしいと思っています。たとえ形がないソフトウェアであっても、それを開発したり、維持していくためには金が掛かるのです。タダのソフトウェアとは、そのコストを開発者に負担させたり、寄付に頼ることによって成立しているものであって、コストが存在しないわけではないのです。開発者本人が自発的にタダで良いと表明するのなら良いですが、決して開発者にタダで提供することを強要してはいけないと考えます。

ハイライト4・複数のWebサービスの複合技 Qooqle

• Qooqle

　YahooとAmazonの検索を同時に行います。同時にGoogle Suggestで入力補完が行われ、はてなブックマークに登録数によって検索結果の文字を大きく表示します。その様子は、まさに上記のサイトに“Ajax”と入力して検索してみると良く分かります。まず、“Aj”まで入力した時点で候補文字列に“ajax”が表示されます。検索を実行すると、Ajax関係の書籍がアマゾンの検索によって表示された下に、サイトの検索結果が表示されます。その際、はてなブックマークに登録されたサイトが大きな文字で表示されます。

　このような複数のWebサービスの複合技は、まさに「Ajaxは何でもあり」という主義を体現しているような存在といえます。とはいえ、「何でもあり」というのは技術的な意味での話であって、このようなサイトが実用システムとして運用可能かというのは別の問題です。例えば、Googleは検索結果のページに表示される広告のクリックから収益を得ているわけですが、このシステムを経由する場合にはその収益を得られません。しかし、このページを通してアマゾンには利益が与えられます。自社に利益がないところか他社に利益を与える用法に、自社のWebサービスの機能を提供することが許されるかはさまざまな判断があり得る世界でしょう。つまり、必ず可能とはいえないということです。永続的に運用されるかどうか分からないので、このページには早めにアクセスして面白さを堪能しておくことをおすすめします。

---

1/2

INDEX
自動車業界のAjaxを活用したキャンペーンを目撃せよ
	Page1＜ブラウザを疾走するAjax駆動車＞TIIDA driving in はてな（期間限定）／地図日記／Lightstreame／Qooqle
	Page2＜そのほかのみどころ＞ dPolls.com／AJAX Activity indicators／Flash JavaScript Integration Kit／Firefox用のJavaScriptデバッガ／prototype.js 1.4.0を読む

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

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