商用でも無料の天気予報 API を使って Web ページに天気を表示

まったく天気を表示する必要はないのだけど、Web ページの少し空いたスペースに現在の天気でも表示したくなったので調べてみました。

検索して見つけた simpleWeather.js は見た目が良いですが、Yahoo! の API を使っていたため、非営利の個人利用でしか使えません。

OpenWeatherMap

使ったみたのが OpenWeatherMap。

• Free プランは 60 リクエスト/分 などの制限
• CC BY-SA 4.0

openweathermap.org

登録して API key を取得する必要があります。登録直後は API key を付けてもエラーレスポンスが返って来ましたが、少し待つと結果が得られました。

Dark Sky

今回は使いませんでしたが、もうひとつ Dark Sky というのもあります。

• 1000リクエスト/日 まで無料
• Powered by Dark Sky の表示とリンクが必要

darksky.net

昔は、Forecast.io というサイトだったようです。

Weather Icons

いい感じの天気アイコンは、Weather Icons フォントを使いました。

https://erikflowers.github.io/weather-icons/erikflowers.github.io

有名な天気 API は、レスポンス結果の天気を表すコードにもマッピングされていて、どのアイコンを使えばいいか迷う必要ありません。

実装

jQuery で API を呼び出し、レスポンスの JSON をもとに表示します。天気アイコンは昼と夜バージョンがあるのですが、sunrise と sunset の時刻を使い、日が沈んでいれば夜バージョンのアイコンを使いました。

<div class="jumbotron">
    <div id="today" class="text-primary text-center">@DateTime.UtcNow.AddHours(9).ToString("dddd, MMMM dd", new System.Globalization.CultureInfo("en-US"))</div>
    <div id="weather" class="text-center" style="display:none;">
        <div class="weather-info">
            <i class="wi" id="icon"></i>
            <span id="temp"></span><i class="wi wi-celsius"></i>
        </div>
        <ul class="list-inline">
            <li id="name"></li>
            <li id="desc"></li>
        </ul>
    </div>
</div>

$(function () {
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Osaka-shi,JP&APPID=xxx", function (data) {
        if (!data.cod || data.cod != 200) {
            return;
        }

        $("#desc").text(data.weather[0].description);
        $("#temp").text(Math.floor(data.main.temp - 273.15));
        $("#name").text(data.name);

        var id = data.weather[0].id;
        var unixTime = Math.floor((new Date()).getTime() / 1000);
        if (data.sys.sunrise <= unixTime && unixTime <= data.sys.sunset) {
            $("#icon").addClass("wi-owm-day-" + id);
        } else {
            $("#icon").addClass("wi-owm-night-" + id);
        }

        $("#weather").show();
    });
});

いい感じの JavaScript の実装を探していたのですが見つからず。JSON の中身を見て、自分で書いた方が早かったです。結果は、冒頭の画像です。