マッシュアップレシピ BLOGRANGER TG touch の Google ニュース和え

Google Maps と同じく BLOGRANGER TG も iPod touch で地図をスクロールできない不都合がありました。詳しくは キーボードを前提としない Wii でも使えるという BLOGRANGER TG は iPod touch でも使えるか？ のエントリを見てください。

そのエントリの中で Google Maps API を使って iPod touch のタップ操作で Google Maps を使えるようにした Google maps touch を紹介しました。そこで BLOGRANGER TG も API を公開しているので、BLOGRANGER TG も同じように iPod touch のタップ操作で使えるようにしてみました。

その名も BLOGRANGER TG touch です。ベタベタな名前ですみません。

BLOGRANGER TG の地図をタップすると、そのタップした位置が画面中央になるように移動します。画面端をタップしながら地図の上を歩いていくような感じです。



タグをタップすると、そのタグで最近のニュースを検索するようにしました。ニュースの検索は Google ニュースを使っています。BLOGRANGER TG の地図とタグは、ブログ界の様相を表している？ので、ブログ界とニュースの関係とそこから何かの発見があるかもしれない・・・。ない。ない。きっとない。(^^;



なお、PC のブラウザでも使えますが、ドラッグして地図をスクロールすると変な動きをしてしまいます。それはなぜ？かというと、次のような経緯があったためです。

Apple iPod touch 8GB MA623J/A by G-Tools

Google Maps API なら地図のクリックイベントを捕捉して、GMap2 クラスの setCenter メソッドや panTo メソッドを使って、そのクリック位置が画面中央になるように移動すればよいのですが、BLOGRANGER TG API リファレンス/TagMap を見ていると、そんなに簡単じゃないことに気が付きました。

BLOGRANGER TG の地図は TagMap クラスで操作するのですが、このクラスは緯度経度のような絶対的な座標ではなく、タグという論理的な座標を使うようになっています。

なので、クリックしたタグの位置には移動できますが、地図のクリックした位置に移動するという方法がありません。タグをクリックしたというイベントはありますが、地図をクリックしたというイベントは用意されていません。

う～ん。困りました。あきらめようと思いましたが、BLOGRANGER TG API の よくある質問 がヒントになり、ちょっと姑息？な方法かもしれませんがうまく？解消できました。

BLOGRANGER TG は、オープンソースのライブラリである script.aculo.us の dragdrop を使っているとあります。地図のスクロールに dragdrop を使っているのであれば、その dragdrop のイベントを横取りして、外側から操作してしまえばよいのでは？思い立ちました。

次のコードがその結果です。dragdrop の横取りは後半部分です。WEB ページ内のドラッグオブジェクトを取り出して繰り返し、その要素にクリックイベントを仕掛けています。これが地図のタップに該当します。

  var width = 320;
  var height = 356;
  var map = new TagMap($('map'), width, height);
  map.attachEventListener('tag_click', function(tag) {
    window.open('http://news.google.co.jp/news?' +
      $H({ q: tag, ie: 'UTF-8', scoring: 'n' })
        .toQueryString()
      );
  });

  Draggables.drags.each(function(drag) {
    Event.observe(drag.handle, 'click', function(e) {
      this.initDrag(e);
      this.updateDrag(e, [width / 2, height / 2]);
      this.endDrag(e);
    }.bindAsEventListener(drag));
  });

dragdrop のソースコードを見ると、onmousedown イベントで initDrag メソッド、onmousemove イベントで updateDrag メソッド、onmouseup イベントで endDrag メソッドを呼び出す仕組みになっています。

ですので、ドラッグ(ドロップ)する座標が常に画面中央となるように、クリックイベントの中で、その呼び出しの流れをシミュレートするようにしました。これが地図のスクロールに相当します。

これで地図のスクロールの不都合が解消できました。最後にもう1つ。

iPod touch の Safari は WEB ページのサイズに合わせて、自動的に拡大(縮小)する仕組みになっていて、初期の拡大率が 1.0 とはなっていません。このままだと BLOGRANGER TG の地図が iPod touch の画面一杯に表示されません。かなり小さく表示されます。

なので、次のように meta 要素を指定して、ページの横サイズと拡大(縮小)率を固定し、画面一杯に表示するようにしました。さらに、拡大(縮小)の操作も無効にしました。

<meta name="viewport" content="
  width=320;
  minimum-scale=1.0;
  maximum-scale=1.0;
  user-scalable=0;
" />

詳しくは Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む を見てください。

ひととおり試してみましたが、今のところ期待どおり動作しているように見えます。もしも不都合がありましたらごめんなさいです。

Wiiフィット(「バランスWiiボード」同梱) by G-Tools