東京アメッシュを使って研究室を雨から守る
東京の街を雨から守るサービス
東京都下水道局の東京アメッシュというサービスを知っているでしょうか?
最新のレーダーシステム?によって、現在の東京周辺の降雨情報をみることができます🌂
東京アメッシュ・東京アメッシュのご紹介
研究室の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というライブラリを使用しました
Jimpやgm といったライブラリもあるのですが、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});
slack bot からの画像アップロード
ファイルのアップロードなどのAPIは hubot-slack ではなく、別に切り出されていました🔪
ドキュメントのこのあたりにアップロード方法が書いてあります👀 slackapi.github.io
デプロイ
以上もろもろを組み合わせたコードを追加すると...
できた!😄
雨やばいじゃん...