第3回 どんなに無茶をやっても「それもありかな」なAjax

株式会社ピーデー
川俣 晶

2005/12/28


そのほかのみどころ

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

自分のブログに地図を貼れるちず窓β

 また地図の話題です。このAjax うきうき Watchは地図関係の話題が多いですが、その理由の1つは間違いなく「私が地図好きだから」という点にあります。しかし、それだけでは、これほど多くの地図関係の話題は集まらないでしょう。やはり、Ajaxと地図は相性が良いのだと思います。また、Google Mapsが各方面の地図関係者の魂に火を付けて、もっとすごい地図を見せてやる! と乗り出してきた可能性もありそうですね。

 さて、スクロール地図の世界に乗り出してきたのはGoogleやYahooだけではありません。地図で有名な出版社の昭文社も乗り出してきました。しかし、ただ乗り出してきただけではありません。自分のブログに地図を貼れる、という機能を提供するという面白いチャレンジを試みてきました。

 しかし、自分のブログに地図を貼れると面白いのでしょうか? これはYesだと思います。「このあたり」と場所を指し示すのにも便利ですし、ページ内容も華やかになります。読者の方も、地図を見て「ああ、私が知っているあの場所の近くなのか」と納得できることもあるでしょう。

 もちろん、Google Maps(Local)の地図も、APIを用いて自分のページに貼り付けることができます。(詳しくは前回紹介した書籍 「入門 Ajax」などを参照)。しかし、あらかじめそれができるように作られたシステムで使う場合を除き、それを行うハードルはやや高いといえます。もし、もっと手軽に地図を貼り付けることができるサービスを提供するというのであれば、それは注目に値します。また地図を媒介にしたブログへのアクセスのような新しいサービスもあるようで、これは注目したいと思います。

街路の写真があるA9.com Maps

 すみません。また地図です。検索で有名なA9.comも、スクロール地図を手がけています。特徴的なのは、街路の写真があることです。例えば上記ページからNew York, NYを選ぶと、交差点から見た全周囲の写真が表示され、向きを変えて見ることができます。航空・衛星写真とは違った見せ方のアプローチですね。

Ajax+Ruby on Railsでリバーシゲーム

 やっと地図から離れられました。Ruby on Railsで作成された、いわゆるリバーシ(オセロとも呼ばれる)のゲームです。石を置ける場所にマウスポインタを持って行くと色が変わるなどのインタラクションもあります。肩肘張らず、Ajax(とRuby on Rails)の利用事例を体感するには良いサンプルだと思います。

 ちなみに、筆者はリバーシはからきし弱いのですが、弱い私でも勝てました。コンピュータの思考は、気楽に遊ぶには良いレベルだと思います(コンピュータの思考ルーチンは強ければ常に良いというものでもない)。

Google Maps APIを背景にしたゲーム

 ゲームの例が続きます。これは、必ずしも成功した事例とはいえないのですが、非常に興味深いので紹介しておきます。内容は、Google Maps(あれ、また地図の話題につながった!)を背景に使用したシューティングゲームの試作プログラムです。眼下にGoogle Mapsの衛星写真を見ながら戦闘機で飛び、弾を撃って敵を倒します。

 ここでもまた、Ajaxにタブーはないという言葉を再確認したいと思います。あくまで、地図情報として提供されたものを、このような形でゲームの背景に使うことも可能なのです。おそらく、ゲームではなく実用ソフトでも、あっと驚く組み合わせで使えることもあるでしょう。その組み合わせを見いだして、タブー無く何でも使ってみるのがAjax的な面白さでしょう。特に、このゲームのように高速性を要求さえしなければ、このような利用方法は技術的に何ら問題ないということに注意を払っておきましょう。

Mozilla専用、3DなGoogle Maps

 これはSVG(Scalable Vector Graphics)と連動させることで、Google Mapsを立体的に表示させることに挑戦した事例です。標準でSVGに対応するFirefox 1.5がリリースされた今だからこそ挑戦できる題材といえるでしょう。このプログラムは、Firefox 1.5を含むSVGが有効なMozilla専用となっています。

 というわけで、また地図の話題になってしまいましたが、もちろん地図そのものはGoogle Mapsの内容そのものです。ここで注目したいのは、地図ではなく、SVGを活用することで新しい可能性を開拓していく態度です。タブー無くすでにあるものを使うという態度がAjax的というのなら、SVGのような新しい技術であろうとも、それが一般で使用されるWebブラウザに組み込まれてきたのであれば活用するのがAjax的です。もちろん、このような技術を活用すれば、すべてのWebブラウザで閲覧可能にはなりません。しかし、それで良いのです。Ajaxは、すべてのWebブラウザで動作しなければならないという規範を強制するものではありません。実際には、特定のWebブラウザでのみ動作する事例もあります。また、マイナーなWebブラウザや、古い世代のWebブラウザには対応しないという事例を含めれば、大多数はそれに該当するとすらいえるでしょう。

全方位攻略 Ajaxにタブーはない!

 最後に、繰り返しましょう。Ajaxに、タブーはほとんどありません。JavaScript以外の言語で書いてJavaScriptで実行しても良いし、XMLHttpRequestオブジェクトを使わないのもOKです。Webブラウザの種類を限定してもOKです。例えばオブジェクト指向プログラミングなどでは、初心者が「これはオブジェクト指向的ではない」といって怒られるような状況が見られますが、Ajaxでは同じような光景を見たことがありません。どれほどの無茶をやっても「それもありかな」というリアクションが返ってくるように感じられます。ですから、恐れることなく、創意と工夫でレッツ・トライ!

 ……でもFlashだけですべて書いたら、さすがに「それはAjaxじゃないよ」といわれるかもしれませんが (笑)。


2/2  

 INDEX

どんなに無茶をやっても「それもありかな」なAjax
  Page1<全方位攻略 Ajaxにタブーはない!>Ajax開発用強力言語 & ツール Backbase/Webブラウザの違いを自動判定・BrowserHawk/すぐに反応が返ってくるチャット ConnectiveChat
  Page2<そのほかのみどころ> 自分のブログに地図を貼れるちず窓β/街路の写真があるA9.com Maps/RUby on Railsによるリバーシゲーム/Google Maps APIを背景にしたゲームMozilla専用、3DなGoogle Maps

Ajax うきうき Watch バックナンバー


AjaxとPHPでリッチクライアント

Ajaxを扱うためのサーバーサイドのPHPライブラリを紹介する。リリースされたライブラリ、AjaxACを活用して好みの検索窓に改造してみよう

最終更新 2006/4/29

AjaxでつくるインタラクティブWebアプリケーション

AjaxでWebフォトアルバムを、ゼロから開発する。ライブラリを用いて機能を作り上げていくステップを、具体的に解説する

最終更新 2006/3/17

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


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH