デフォではJSON出力ですが、オプションつけてあげるとHTMLでの出力もいけます。
(他にはXMLがあるそうです)
実際のところ
やり方は単純で、オプションに"mode=html"をつけてやればよいです。
http://api.openweathermap.org/data/2.5/weather?id=1850147&mode=html&appid=2370a9749f38195f07d3bbefd145b74c
こんなページがでてきます。
moreを押すと、openweathermapの過去ページに飛ぶ仕様。
ソースはこんな感じ。
<!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;">Tokyo</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("http://openweathermap.org/img/w/04n.png") 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">4.74°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: 75%</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: 1013hpa</div> </div> <div style="display: block; clear: left; color: gray; font-size: x-small;"> <a href="http://openweathermap.org/city/1850147?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>