やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

RapidApiで天気予報を取得する

 OpenWeatherMapを利用しているだけっぽい。

成果物

情報源

 どうもRapidApiの機能ではなくOpenWeatherMapを利用しているだけっぽい。

コード

show_weather.sh

api_key="`cat ${HOME}/root/work/record/pc/account/rapidapikey`"
curl --request GET \
 --url 'https://community-open-weather-map.p.rapidapi.com/weather?lang=ja&units=metric&mode=html&q=Sapporo%2Cjp' \
 --header 'x-rapidapi-host: community-open-weather-map.p.rapidapi.com' \
 --header "x-rapidapi-key: ${api_key}" > open_weather_map.html
zenity --text-info --html --filename=open_weather_map.html

f:id:ytyaru:20190916173047p:plain

解析

open_weather_map.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="weather, world, openweathermap, weather, layer" />
  <meta name="description" content="A layer with current weather conditions in cities for world wide" />
  <meta name="domain" content="openweathermap.org" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Expires" content="-1" />
</head>
<body>
  <div style="font-size: medium; font-weight: bold; margin-bottom: 0px;">Sapporo</div>
  <div style="float: left; width: 130px;">
    <div style="display: block; clear: left;">
      <div style="float: left;" title="Titel">
        <img height="45" width="45" style="border: medium none; width: 45px; height: 45px; background: url(&quot;http://openweathermap.org/img/w/09d.png&quot;) repeat scroll 0% 0% transparent;" alt="title" src="http://openweathermap.org/images/transparent.png"/>
      </div>
      <div style="float: left;">
        <div style="display: block; clear: left; font-size: medium; font-weight: bold; padding: 0pt 3pt;" title="Current Temperature">22.28°C</div>
        <div style="display: block; width: 85px; overflow: visible;"></div>
      </div>
    </div>
    <div style="display: block; clear: left; font-size: small;">Clouds: 75%</div>
    <div style="display: block; clear: left; color: gray; font-size: x-small;" >Humidity: 83%</div>
    <div style="display: block; clear: left; color: gray; font-size: x-small;" >Wind: 1.5 m/s</div>
    <div style="display: block; clear: left; color: gray; font-size: x-small;" >Pressure: 1005hpa</div>
  </div>
  <div style="display: block; clear: left; color: gray; font-size: x-small;">
    <a href="http://openweathermap.org/city/2130404?utm_source=openweathermap&utm_medium=widget&utm_campaign=html_old" target="_blank">More..</a>
  </div>
  <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-31601618-9', 'auto');ga('send', 'pageview');</script>
</body>
</html>

 画像ファイルはhttp://openweathermap.org/img/w/09d.png

 HTMLでなくJSONで取得し、そのときに得たテキスト情報からアイコン画像を得るには、どうすればいいか?

Replace the * with the value found in "icon". For example, given "icon":"10n", the icon can be found at http://api.openweathermap.org/img/w/10n.png .

 JSONiconキー値が10nだったら、http://api.openweathermap.org/img/w/10n.pngとすればいい。

iconから画像URLを取得する

api_key="`cat ${HOME}/root/work/record/pc/account/rapidapikey`"
curl --request GET \
 --url 'https://community-open-weather-map.p.rapidapi.com/weather?lang=ja&units=metric&q=Sapporo%2Cjp' \
 --header 'x-rapidapi-host: community-open-weather-map.p.rapidapi.com' \
 --header "x-rapidapi-key: ${api_key}" > open_weather_map.json
cat open_weather_map.json
{"coord":{"lon":141.34,"lat":43.04},"weather":[{"id":803,"main":"Clouds","description":"曇りがち","icon":"04d"}],"base":"stations","main":{"temp":21.54,"pressure":1005,"humidity":100,"temp_min":21,"temp_max":22},"visibility":10000,"wind":{"speed":2.6,"deg":20},"clouds":{"all":75},"dt":1568623376,"sys":{"type":1,"id":7980,"message":0.0075,"country":"JP","sunrise":1568578469,"sunset":1568623519},"timezone":32400,"id":2130404,"name":"Sapporo","cod":200}

download_icon_openweathermap.sh

# $1: icon
run() {
    get_icon_url() { echo "http://api.openweathermap.org/img/w/${1}.png"; }
    local icon=`sqlite3 :memory: "select json_extract(readfile('open_weather_map.json'), '$.weather[0].icon');"`
    local url="`get_icon_url "${icon}"`"
    wget "${url}"
}

 JSON解析はSQLite3でできることがわかっている。便利。

 実行権限を与える。

chmod 755 download_icon_openweathermap.sh

 実行する。

./download_icon_openweathermap.sh

 画像ファイルがダウンロードされた。

ls -1 | grep 04d.png
04d.png

 というかPNGか。小さすぎる。SVGが良かったな。

対象環境

$ uname -a
Linux raspberrypi 4.19.42-v7+ #1218 SMP Tue May 14 00:48:17 BST 2019 armv7l GNU/Linux