東京アメッシュを使って研究室を雨から守る

東京の街を雨から守るサービス

東京都下水道局東京アメッシュというサービスを知っているでしょうか?

最新のレーダーシステム?によって、現在の東京周辺の降雨情報をみることができます🌂
東京アメッシュ・東京アメッシュのご紹介

研究室のslackbot (hubot)からアメッシュを確認できるようにして、研究室も雨から守ろうと思います

降雨情報

東京アメッシュでは、地図と透過の降雨(メッシュ)画像があり、これらを重ねて表示しています

記事は結構あるので割愛しますが、気になった事があればアクセスしてcmd + opt + iを押すと確認できます

つくってみる

以下をすれば実現できそうです

  • hubot からキーワードなど受け取る
  • 東京アメッシュから最新のメッシュ画像を取得する
  • メッシュ画像と地図画像を重ねて合成する
  • hubot から画像を送る

hubot でキーワードを受け取る

amesh という単語に無差別に反応🤖

module.exports = robot => {
    robot.hear(/amesh/, msg => {
        // アメッシュする
    };
);

メッシュ画像を取得する

地図はあらかじめ保持しておくとして、 メッシュは5分で更新され、http://tokyo-ame.jwa.or.jp/mesh/100/${YYYYMMDDHHmm}.gif から取得できます

const momentTz = require('moment-timezone');

const ameshFilename = () => {
    const now = momentTz().tz('Asia/Tokyo').format('YYYYMMDDHHmm');
    return now - (now % 5);
};

// http://tokyo-ame.jwa.or.jp/mesh/100/${ameshFilename()}.gif からメッシュ画像を取得

画像を重ね合わせる

sharpというライブラリを使用しました
Jimpgm といったライブラリもあるのですが、Jimpはパフォーマンスが気になったこと、gmはサーバーにImageMagickなどのインストールが必要なことなどから、sharpを選びました
GitHubのスター数も多いです⭐️

東京周辺の大きなアメッシュ画像ができあがるので、表示したい地域に合わせて切り出すと良い感じです

const sharp = require('sharp');

sharp('map').overlayWith('mesh').toFile('amesh'); 
sharp('amesh').extract({left: 0, top: 0, width: 800, height: 480});

github.com

slack bot からの画像アップロード

ファイルのアップロードなどのAPIは hubot-slack ではなく、別に切り出されていました🔪

github.com

ドキュメントのこのあたりにアップロード方法が書いてあります👀 slackapi.github.io

デプロイ

以上もろもろを組み合わせたコードを追加すると...

できた!😄 f:id:takorras:20181014201513p:plain

雨やばいじゃん...