catch-img

雨レーダー|雨・雷の天気情報をJavaScriptで簡単実装できるマップサービス

目次[非表示]

  1. 1.自社システムに雨レーダーを利用する方法
  2. 2.Lifesocketが提供する気象情報JavaScriptマップサービスとは?
  3. 3.気象情報JavaScriptマップサービス(雨レーダー)の詳細①(気象情報)
  4. 4.気象情報JavaScriptマップサービスサービス(雨レーダー)の詳細②(その他)
  5. 5.雨レーダーの利用手順
  6. 6.雨レーダーの導入事例
  7. 7.雨レーダー利用料金
  8. 8.最後に・併せて読みたい記事

自社システムに雨レーダーを利用する方法

自社システム・サービスに雨レーダーの情報を表示させたい場合、どのような方法があるのか。実は、大きく分けて、3つ方法があります。

1つ目、気象庁やその他で気象情報を出しているサイトのリンクを貼って、ユーザーがリンクからページを遷移することで雨レーダーを確認する方法です。

2つ目、自社でデータ準備~描画まで開発を行う方法です。

3つ目、サービスに自由に雨レーダーを埋め込むことが出来るサービスを購入する方法です。

今回Lifesocketでご紹介させていただく雨レーダーは、三つ目の『サービスに自由に雨レーダーを埋め込むことが出来るサービスを購入する』方法です。次項以降で、画面イメージやメリットも併せてご紹介いたします。

Lifesocketが提供する気象情報JavaScriptマップサービスとは?

気象情報Javascriptマップサービスとは・・・
『デザイン、地図、気象情報がセットとなっているJavascriptサービス』です。

  • 雨・雷、その他気象情報をWebサービスに表示できます。
  • 雨・雷で表示できる雨情報は「高解像度雨レーダー」です。
  • 表示方法はWebサービスに数十行のJavascriptコードを埋め込むだけ。
  • レスポンシブ対応なので、PCやスマートフォンに最適なUIで表示することができます。
  • さらに、操作するために必要なパーツ付き。そのため、デザイン設計は不要で素早く気象情報をサービスに実装することが可能です。
  • 地図はOpenStreetMapを利用しています。

雨レーダーを実装するとこのようなデザインでサービスに埋め込むことが出来ます。


気象情報JavaScriptマップサービス(雨レーダー)の詳細①(気象情報)

雨レーダーのラインナップとして、下記種類がございます。

  • 高解像度雨レーダー(1時間予測)
    └1時間予測では1時間先までの5分毎の予報データを取得できます。

  • 高解像度雨レーダー(1時間過去)
    └1時間過去では現在から1時間前までの5分ごとの実況データを取得できます。

  • 雨レーダー(15時間予測)
    └1~6時間先までのデータと、7~15時間先までのデータが異なります。
     6時間先までは60分ごとの予報データを取得でき、データは30分ごとに更新されます。
     7時間~15時間先までは60分ごとの予報データを取得でき、データは60分ごとに更新されます。

  • 雨レーダー(39時間予測)
    └39時間先までの60分ごとの予報データを取得できます。
     初期時刻は00,03,06,09,12,15,18,21(8回/日)です。配信時刻は初期時間から約2時間30分後です。

それぞれAPIが異なりますので、利用シーンに合わせて情報選定を行う必要があります。
どの情報が良いか判断がつかない、イメージが湧かないなど情報で迷われている方は、お気軽にご相談ください。最適な情報をご提案いたします。



気象情報JavaScriptマップサービスサービス(雨レーダー)の詳細②(その他)

■パラメーター


パラメーラー名
必須
説明

accessKey

String
契約時に発行されたAPIキーを設定してください
mapOptions.showMarker
Boolean
×
trueの場合、デフォルトの表示の中心位置にマーカーを表示します
mapOptions.zoom
int
×
地図のデフォルトのズームレベル
設定しない場合、中心位置を指定すると「9」、中心位置を指定しないと「5」となります
mapOptions.center.lat

Decimal

×
デフォルトの中心位置(緯度)
mapOptions.center.lon

Decimal

×
デフォルトの中心位置(経度)
mapOptions.center.pinpoint
String
×
デフォルトの中心位置(ピンポイントコード)
緯度・経度と同時に設定された場合、緯度・経度が優先されます
mapOptions.minZoom
int
×
地図の最小ズームレベル
mapOptions.maxZoom
int
×
地図の最大ズームレベル
defaults
String
×
地図上に表示するデフォルトの気象情報
複数気象情報をご契約している場合、初期表示の気象情報を選択することができます
mapElement
HTML Element
マップサービスを表示するHTML要素



■ズームレベル
 地図の初期表示のズームレベル、最大最小の表示ズームレベルをオプションで設定することができます。

 ・ズームレベル(4~15)
 ・地図スケール(300m~500km)

■推奨環境・端末
 ・ブラウザ環境:Crome、Safari(スマートフォンのみ対応)、Edge、FireFox
 ・OS:IOS 13以上、Android 8以上

雨レーダーの利用手順

1.htmlを作成します。
  JavaScriptを読み込み地図を表示するベースとなるhtmlページを作成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>OSM</title><style>
  html, body {
   height: 100%;
   padding: 0;
   margin: 0;
   background: white;
   width: 100%;
  }
 </style>
</head>
<body>
</body>
html


2.地図を表示する。
  以下コードをhtmlのhead内に入れ、スクリプトを読み込みます。

<script src="https://prd-amateras-cdn.azureedge.net/rain-radar.js"></script>

  以下のコードをhtmlのbody内に入れ、パラメータを設定します。

<div id="rainMap"></div>
<script type="text/javascript">var rainRadar = radar.ui.Radar({
  accessKey: '<YOUR_API_KEY>',
  mapOptions: {
   minZoom: 4,
   maxZoom: 16
  },
  mapElement: document.getElementById("rainMap"),
 });
script

JavaScriptマップサービスを埋め込む手順は以上となります。
非常に少ない工数で、実装が可能です。

雨レーダーの導入事例

LifesocketのJavaScriptマップサービス(雨・雷レーダー)をご利用いただいている企業様をご紹介いたします。

井関農機株式会社様は、農業生産に必要な情報や、農業分野に関連した製品を開発する企業の製品情報・技術情報・イベント情報を発信するWEBサイト「Amoni(エーモニー)」を運営しております。サイト内で、農業生産者にとって必要不可欠な天気・雨雲の情報を手軽に確認できるサービスを提供するにあたり、取得情報、コスト面等からLifesocketを導入いただきました。


WEBサイト「Amoni(エーモニー)」はこちらから。

雨レーダー利用料金

本記事では雨レーダーをメインにJavascriptマップサービスの説明をさせて頂きましたが、実は他にもラインナップを取り揃えています。ご利用の種類・組み合わせによって金額が異なりますので、気になっている方は是非一度ご相談ください。無料でお見積りを作成させていただきます。

■ご用意させていただいているJavaScriptマップサービス一覧


情報
説明
雨・雷(1h予測)
1時間先までの5分ごとの予報データを取得できます。

雨・雷(1h予測)

雨(15h予測)

雨(最大37h予測)

実況から過去1時間分の5分ごとの予報データを取得できます。
雨(15h予測)
現在時刻から6時間先までの雨レーダー情報が30分毎に取得できます。
7~15時間先までの雨レーダー情報が1時間毎に取得できます。
雨(最大37h予測)
初期時刻から39時間先までの雨レーダー情報を1時間毎に取得できます。
アメダス
現在から過去7日間の降水量、気温、風向/風速、日照時間、積雪深を取得できます。
洪水危険度分布
洪水危険度が注意以上の河川流路情報を取得できます。
土砂災害危険度分布
土砂災害の危険度分布情報が取得できます
浸水害危険度分布
浸水害の危険度分布情報が取得できます。
地震
震度3以上を観測したときに発表される震度速報情報が取得できます。
過去1週間分の震度1以上を観測した地点の情報が取得できます。
台風
最大5日先の台風情報を取得することができます。



最後に・併せて読みたい記事

一見実装が難しそうな天気×地図情報も、JavaScriptマップサービスを使うことで非常に開発工数を減らして実装することが可能です。雨レーダー・他の気象情報についてさらに詳細を知りたい方、実際の画面を閲覧したい方は是非お問い合わせください。現在ラインナップにない情報でも、情報作成から承っておりますので、ご相談いただけますと幸いです。
また、30日間の無料トライアルも実施しております。興味がある方は是非一度お試しください。

  天気予報APIの失敗しない選び方|天気予報サービス「Lifesocket」も紹介 様々な分野で必要不可欠な天気情報は、天気APIを利用することで簡単にWEBサービスやアプリに天気情報を表示することが出来ます。本記事では天気APIを選ぶにあたってのポイントや、どのように天気APIが活用されているのかご紹介いたします。 ソケラボ
  天気API(Lifesocket)導入事例 | 井関農機株式会社様 天気情報・生活指数情報APIおよび気象情報Javascriptマップサービスを導入いただいた『井関農機株式会社様』についてご紹介いたします。 ソケラボ







Lifesocketメディア編集部
Lifesocketメディア編集部
当ブログは、天気予報や気象情報に関するブログメディアです。当社は予報業務許可(許可第206号)を取得、現役の気象予報士も在籍。また、航空気象システム「ARVI」、天気総合情報サイト「ライフレンジャー天気」など、多数の気象データの取り扱いがあります。これからも、天気・気象に関するお役立ち情報をお届けします。

サービス紹介資料(無料)

Lifesocketのサービス資料(全33ページ)です。APIラインナップや取得可能な情報、API実装イメージなどをご覧いただけます。フォームにご入力後、すぐにダウンロードができます。
Lifesocketサービス紹介資料

天気API:Lifesocket

Lifesocketでは天気予報や生活指数情報(花粉、紫外線など)をセットにしたAPIを提供しています。各APIは全国約2,000地点、緯度経度に対応、30日間無料で利用もできます。ぜひ、お試しください。

天気予報APIに関するお問い合わせ

サービスに関するご質問、導入や費用のご相談など、お気軽にご連絡ください。