先日MozillaよりUbiquityというマッシュアップツールがリリースされました。 マッシュアップという言葉の意味を知らなかったのですが、使ってみたくなったのでインストールしました。 また、このUbiquityはJavaScriptで簡単に拡張することが出来ます。 (拡張が簡単に出来なければ、インストールすることはなかったでしょう)

そこでいきなりですが、Ubiquityで東京アメッシュ[1]を見るコマンドを作りました。 東京アメッシュとは、東京都の降雨量を細かく見ることができるサイトです。 10分ごとに更新されるので、突然のゲリラ豪雨にも対応することができる便利なサイトです。

[1] http://tokyo-ame.jwa.or.jp/

CmdUtils.CreateCommand({
  name: 'amesh',
  preview: function(preview) {
    var html = '<div style="width: ${width}px; height: ${height}px;">';
    html += '<img style="position: absolute;" src="${url}/map/map000.jpg" width="${width}" height="${height}">';
    html += '<img style="position: absolute;" src="${url}/mesh/000/${time}.gif" width="${width}" height="${height}">';
    html += '<img style="position: absolute;" src="${url}/map/msk000.png" width="${width}" height="${height}">';
    html += '</div>';

    preview.innerHTML = CmdUtils.renderTemplate(html, { 
      width: this.WIDTH, height: this.HEIGHT, time: this.getTime(), url: this.URL 
    });
  },
  execute: function() {
  },

  WIDTH: 510, // original width is 770px.
  HEIGHT: 318, // original height is 480px.
  URL: 'http://tokyo-ame.jwa.or.jp/',
  getTime: function() {
    var d = new Date();
    var hour = d.getHours();
    var minute = d.getMinutes();
    var month = d.getMonth() + 1;
    var day = d.getDay();

    minute = minute - minute % 10;
    minute = minute > 10 ? minute : '0' + minute;
    hour = hour > 10 ? hour : '0' + hour;
    month = month > 10 ? month : '0' + month;
    day = day > 10 ? day : '0' + day;
    return '' + d.getFullYear() + month + day + hour + minute;
  }
});

インストール方法は簡単です。 Ubiquityを起動し、 command-editor と入力するとコマンドエディタが新しいタブで表示されます。 そこにこのスクリプトを入力してください。 保存という動作は存在しないので、おもむろにUbiquityを起動し amesh と入力してください。 そうするとアメッシュの画像を見ることができます。

Ubiquityのウインドウは幅が固定されているようで、約520pxしかありません。 アメッシュの全域データは幅が770pxあるので、原寸では表示できません。 仕方ないので縮小しています。 少し小さすぎて見ずらいので、 amesh meguro と入力すると目黒区を中心に拡大表示するような機能をつけるかもしれません。