第3回 どんなに無茶をやっても「それもありかな」な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の真実を見極める 「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう 最終更新 2005/8/2
|
|
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
