Googleパーソナライズドホームにお気に入りのBLOGRANGERパーツをどんどん追加する

「GoogleパーソナライズドホームにBLOGRANGERパーツを表示してみる」で作ったGoogle Gadgetは、あらかじめ指定したBLOGRANGERパーツしか表示できませんでした。が、ちょこっと改良して、みなさんがお気に入りのBLOGRANGERパーツを表示できるようにしました。

改良したGoogle Gadgetを使うと、Googleパーソナライズドホームにお気に入りのBLOGRANGERパーツをどんどんと追加できちゃいます。↓こんな感じです。BLOGRANGERパーツを3つほど追加してみた様子です。

 

↓次のボタンをクリックすると、改良したGoogle GadgetをGoogleパーソナライズドホームに追加できます。また、こちらのページではBLOGRANGERパーツが動く様子を確認してから追加できます。

Google Gadgetを追加すると、はじめは「naoyaのはてなダイアリー」についてというBLOGRANGERパーツを表示します。お気に入りのBLOGRANGERパーツを指定したいときは、Google Gadgetのタイトルの編集リンクをクリックします。すると↓次のような編集フォームが表示されます。

その編集フォームの「番」という入力ボックスにBLOGRANGERパーツの番？を指定します。そして保存ボタンをクリックすると、指定した「番」のBLOGRANGERパーツが表示されるようになります。

入力ボックスに指定する「番」は、あなたのBLOGRANGERパーツの下の部分を見れば確認できます。↓こんな感じです。例えば「BLOGRANGER 6号 (1301番)」でしたら、括弧の中の「1301」が「番」にあたります。

改良したGoogle GadgetのXMLファイルもこちらのページに公開しておきます。ご自由にお使いください。

東京近郊レジャースポット案内 POWERED BY Yahoo!地図情報

「Google Mapsの測地系をYahoo!地図情報の測地系に変換するYGLatLng」の続きです。

「レジャースポットの定義をファイルに移動してデータとページを分離する」で作成したGoogle MapsとBLOGRANGERパーツのマッシュアップアプリをYahoo!地図情報に入れ替えてみました。↓こんな感じです。

View example

↓trueを指定してスライドバーを有効にしました。地図の左上に表示されます。

  var map = new YahooMapsCtrl('map', new YGLatLng(35.67063830229653, 139.77479730935804), 5);
  map.setVisibleSliderbar(true);

↓trueを指定して、地図上のアイコンをクリックすると吹き出しを表示するようにしました。falseを指定すると、地図上のアイコンをポイントするだけで吹き出しが表示されます。ちなみにfalseが初期値です。

  map.setEnableClickPopup(true);

↓前作のGoogle Mapsと同じくレジャースポットのデータをXMLHttpRequestを使ってサーバから取得しています。

  var request = new Ajax.Request('spot.txt', {
    method: 'get', asynchronous : false
  }).transport;
  if (request.status!=200)
    return alert(request.status+' '+request.statusText);
  var spots = eval('('+request.responseText+')');

↓レジャースポットのデータを繰り返しながら、地図上にアイコンを追加しています。

  for (var i=0; i<spots.length; i++) {
    var spot = spots[i];
    if (spot.url.constructor != Array)
      spot.url = [spot.url];
    var popup = '';
    for (var j=0; j<spot.url.length; j++) {
      popup += '<iframe '
        + 'src="'+spot.url[j]+'" '
        + 'width="320" height="200" frameborder="0" '
        + 'marginwidth="2" marginheight="2" '
        + '></iframe>';
    }
    map.addIcon(i,
      new YGLatLng(spot.lat, spot.lng),
      popup,
      'L1'
    );
  }

Yahoo!地図情報はアイコンに識別子(ID)を付与し、そのIDを指定してアイコンを操作するインタフェースとなっています。Google MapsのGMarkerのようにオブジェクトで扱えるとよかったのに。

アイコンをクリック(またはポイント)すると吹き出しを表示するという想定があるみたい。アイコンを操作したとき吹き出しを表示する以外にも表現方法があると思うのだけれど。そういうときはどう実装すればいいのだろう。

吹き出しに表示する内容は事前に指定しておく必要があるみたい。アイコンのクリックなど、イベントが発生するそのときに吹き出しに表示する内容を変えたいときはどう実装すればいいのだろう。

どうしてもGoogle Mapsと比較してしまいますね。もう少し使ってみるとYahoo!地図情報のコンセプトを感じ取れるかもしれません。Yahoo!地図情報と実装が同じ？(であろう)アルプス社のサイトも参考にしてみます。それまではGoogle Mapsとの比較を中心にいろいろと試してみます。

links for 2007-01-28

• Free Website Template Downloads | Free CSS and XHTML Open Source Templates
  (tags: テンプレート css デザイン 無料)

ドコモポイントの使い道！プレミアクラブのグルメセレクション

携帯電話の機種変更のときなど、ショップの店員から「ドコモポイント使いますか？」と聞かれたりしますが、私は「いいえ」と答えています。毎月、着々と貯まっていくドコモポイント。そのポイントはドコモプレミアクラブのグルメセレクションに使っています。

グルメセレクションは3000ポイントからコースがあります。そのコースの申込み(ポイントとの引き換えは)は、iメニューからドコモプレミアクラブをたどればすぐにわかるでしょう。申込みから10日くらいすると、↓次のようなカタログが届きます。

そのカタログの中から好きなグルメ商品を選んで、「三越グルメセレクション」サイトから注文します。PCと携帯どちらのサイトもあります。

申込み日から10日以降で、届け日の指定ができます。土日や祝日も指定できます。カタログの有効期限は1年です。ですので、季節ものを注文しておいて、忘れた頃に届くってのも面白みがあるかもしれませんね。

Google Mapsの測地系をYahoo!地図情報の測地系に変換するYGLatLng

「Yahoo!地図情報(Webサービス)のサンプルを使ってみました。」の続きです。

今まで作ってきたGoogle MapsのAjaxアプリをYahoo!地図情報に移植しようとしましたが、Google MapsとYahoo!地図情報では測地系(緯度経度)が異なるため、Google Mapsの測地系をYahoo!地図情報の測地系に変換する必要がありました。

そこでGoogle Mapsの測地系をYahoo!地図情報の測地系に変換するYGLatLngクラスを用意してみました。その結果は↓こんな感じです。

View example

Google Mapsは世界測地系、Yahoo!地図情報は日本測地系(Tokyo 97?)を採用しています。そのため今回のケースでは、世界測地系を日本測地系に変換すればよいということ。

YGLatLagクラスのJavaScriptコードは次のとおりです。Google MapsのGLatLngクラスと同じように使えます。YGLatLagクラスを初期化すると、世界測地系を日本測地系に変換した後、YLLPointクラスを生成して返却します。

var YGLatLng = function(lat, lng) {
  return new YLLPoint(
    // http://blog.gpso.info/2006/08/post_2.html
    lat + lat * 0.00010696 - lng * 0.000017467 - 0.0046020,
    lng + lat * 0.000046047 + lng * 0.000083049 - 0.010041
  );
}

なお、世界測地系から日本測地系への変換は「Gpso.info 開発ブログ: 経度・緯度の表し方と変換」の計算式を使いました。ありがとうございます。その他にもいろいろな計算式が公開されていますので、とても役立ちます。

YGLatLngクラスの使い方は↓こんな感じです。Google Mapsをスクロールすると、Yahoo!地図情報のスクロールも追随するようにしてみましたので、YGLatLngクラスの妥当性を試すときにお使いください。

  var ymap = new YahooMapsCtrl("ymap", new YGLatLng(35.660347, 139.729121), 2);

  var gmap = new GMap2($('gmap'));
  gmap.addControl(new GSmallMapControl());
  gmap.addControl(new GMapTypeControl());
  gmap.setCenter(new GLatLng(35.660347, 139.729121), 17);
  GEvent.addListener(gmap, 'moveend', function() {
    var center = gmap.getCenter();
	ymap.moveTo(new YGLatLng(center.lat(), center.lng()));
  });

これで今まで作ってきたGoogle MapsのAjaxアプリをYahoo!地図情報に移植できそうです。

links for 2007-01-24

• 郵便番号データ 読み仮名データの促音・拗音を小書きで表記しないもの
• 読み仮名データの促音・拗音を小書きで表記したもの
• 事業所の個別郵便番号ダウンロード

Googleパーソナライズドホームがちょっと変わったみたい!?

いま(1/23 22:30)気がついたのですが、Googleパーソナライズドホームがちょっと変わったようです。知らなかったのは私だけ?

ニュースなどのFeedを表示するウィジェットに[+]といった展開ボタンが付いています。どうやらこのボタンをクリックすると、Feedのdescription相当が表示できるみたい。

description相当だけかと思いきや、Feedによってはリッチな感じで広告が表示されたりしています。Feedをどこまで解析して表示しているのだろう・・・。

Yahoo!地図情報(Webサービス)のサンプルを使ってみました。

2006年(昨年)の12月中ごろからYahoo! Japanでも「Yahoo!デベロッパーネットワーク - Yahoo!地図情報」のWebサービスが使えるようになりました。

手始めに「Yahoo!地図情報」のサイトにあるサンプルコードをWebページに埋め込んでみました。↓こんな感じです。「googleマップ」と違って、いくつかのコントロールは初期値として有効になっているみたい。右上にZOOM IN/OUT、左上にMAP/AEROの切り替えがあります。

View example

「Yahoo!地図情報(その他のWebサービスも含めて)」を使うには「Yahoo! ID」が必要でした。さらに「Yahoo! ID」を使ってログインし、「アプリケーションID」を登録する必要もありました。この「アプリケーションID」は、Webページに貼り付けるソースコードに埋め込みます。

今まで作ってきた「googleマップ」のサンプルを「Yahoo!地図情報」に移植しようとしましたが、どうやら座標系が異なるようですね。座標系を変換する式(簡易なものがいい)を探すところからはじめます。

Cloudmark Desktopは2台目のPCでも使えます。

「Cloudmark Desktopを購入しました。これは素晴らしい。」の補足です。

Cloudmark Desktopは1つの申込みで2台目のPCでも使えます。詳しい説明は「複数のコンピュータで 1 つの Cloudmark Desktop サブスクリプションを使用する」にあります。

↓Outlook 2002(Office XP)です。試用版の「Cloudmark」メニューから「My Cloudmark Account」「My Account」をクリックします。 

↓すると、ログインするよう促されますので、自分のアカウントでログインします。

↓ログインすると、その場ですぐ正規版になります。

 

links for 2007-01-20

• Gpso.info 開発ブログ: 経度・緯度の表し方と変換

Cloudmark Desktopを購入しました。これは素晴らしい。

「BIGLOBE　迷惑メールブロックサービス」を開始してからずっと使い続けてきましたが、このサービスのスパム判定の精度はかなり高くとても満足しています。このサービスのスパム判定のエンジンは「Cloudmark - Anti Spam and Spam Blocker Solutions」を使っています。特徴はCloudmarkのサイトで確認してください。

スパムの判定にコミュニティの力を使っているところが気に入っています。それとメール1通ごとにスパムの判定をするところも気に入っています。とても現実的な解決策を採用しているように思えます。もちろん機械的な手段も併用していると思いますが、その違いは歴然と感じています。

いくつかのメールを使い分けていますが、そのすべてのメールにもCloudmarkを導入することにしました。BIGLOBEのようにプロバイダがサービスを提供していなくともCloudmarkを使える「Cloudmark Desktop」も提供しています。Outlook/Outlook Expressのアドオンとして組み込まれる形式です。

残念ながら有料です。ソースネクストのウィルスセキュリティ(ZEROを除く)のように1年単位でサービスを購入するスタイルです。日本国内に代理店があると思いますが、わたしは本国のクレジットカード決済で申し込んでみました。申し込みの流れをスクリーンキャプチャしておきましたので公開しておきます。申し込むときの参考になればと思います。

はじめに試用版をダウンロードしてインストールします。試用版はCloudmarkサイトから入手できます。

↓Outlook 2002(Office XP)です。「Subscribe Now!」ボタンをクリックします。

 ↓申し込みの手続きを開始するときは「Yes, Subscribe」ボタンをクリックします。

↓名前、メールアドレス、パスワードを指定します。名前はどこで使うのか把握していませんが、本名じゃなくてもいいみたい。メールアドレスとパスワードは、Cloudmarkサイトにログインするときに使います。

↓クレジットカードの情報を指定します。有名どころのカードが使えますね。海外ですがJCBも使えますね。合わせて申込者(請求先)の情報も指定します。すべて英語の表記で指定しました。

↓指定した情報を確認すると、申込み手続きが完了します。

↓Outlook 2002(Office XP)です。試用版が正規版になりました。再インストールは必要ありません。

JavaScriptでは配列要素の末尾にカンマを付けるとエラーになる？

次のJavaScriptコードは、配列とオブジェクトを生成する単純なものですが、WEBブラウザによって振る舞いが変わってきます。

あるWEBブラウザでは期待どおり動作しますが、あるWEBブラウザではエラーになります。その原因は配列要素の末尾にあるカンマです。そのカンマの有無がWEBブラウザの振る舞いの違いになって現れます。

function run() { 
  var foo = [
    "bar",
  ];
  alert(foo[0]);

  var foo = {
    bar: "baz",
  };
  alert(foo.bar);
}

↓次のJavaScriptコードのように、配列要素の末尾にカンマを付けないようにすべし！です。

function run() { 
  var foo = [
    "bar"
  ];
  alert(foo[0]);

  var foo = {
    bar: "baz"
  };
  alert(foo.bar);
}

私は習慣として、PerlやPHPのスクリプトコードを書くとき、末尾にカンマを付けることにしているので、よくよく間違えます。そして、それに気がつかず悩まされます。

links for 2007-01-15

• Introducing JSON
  JSON形式のリファレンスです。
  (tags: Ajax json javascript)

Jcode.pmを使って文字列を「\uXXXX」形式に変換する

「Introducing JSON」の中で、JSONのstringは「uXXXX 4 hexadecimal digits」と表現できるとあります。この表現はJavaScript::UCSエンコードと呼んだりするようです。

このエンコードの意味を理解するため、Jcode.pmを使って、指定した文字列を「uXXXX」形式に変換するPerlスクリプトを書いてみました。↓こんな感じです。

View example

このPerlスクリプトは、Perl 5.6以前を対象としています。Perl 5.8以降ならEncode.pmを使って、より手軽に実現できるハズです。

1. 指定した文字列の文字コードをEUC-JPからUCS2に変換します。
2. unpack関数を使ってUCS2文字列を16bit(short)単位に分割します。
3. 16bit(short)から「uXXXX」形式の文字列を作ります。これを分割した分だけ繰り返しします。
4. 最後に「uXXXX」形式の文字列をすべて結合します。

#!/usr/bin/perl
use strict;
use CGI qw(:standard);
use CGI::Carp qw(fatalsToBrowser);

##
&main;
exit;

##
sub main {
  my $q = param('q');
  my $r = param('q');
  $r = &kanjicode($r, 'ucs2', 'euc');
  my @r = unpack('n*', $r);
  @r = map { sprintf("\u%04X", $_); } @r;
  $r = join('', @r);

  print CGI::header(
    -type => 'text/html', -charset => 'EUC-JP'
  );
  print &load_template('jsucs',
    q => $q, r => $r
  );
}

##
sub load_template {
  my ($name, %param) = @_;
use HTML::Template;
  my $template = new HTML::Template(
    filename => "./$name.tmpl", die_on_bad_params => 0
  );
  $template->param(
    %param,
  );
  return $template->output;
}

##
sub kanjicode {
  my ($textref, $kanjicode, $ikanjicode) = @_;
use Jcode;
  &Jcode::convert($textref, $kanjicode, $ikanjicode);
  return $$textref;
}

"True Value";

links for 2007-01-14

• XML.com: JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
  JSONPのリクエスト
• The XMLHttpRequest Object
  XMLHttpRequestオブジェクトのリファレンス
  (tags: XMLHttpRequest W3C)