【WEBAPI】WeatherAPI使ってグラフィカルな気温表示アプリ作ってみようぜ

今年も暑苦しい季節が訪れようとしてます。
エルニーニョがうんたらで例年よりかは、かなり涼しめらしいですが
みなさんが暑さで倒れないように温度を中途半端に取得してくれるアプリ作ってみました。

Links

DEMO
GitHub

Program

• PHP
• JavaScript
• HTML
• CSS

WEBAPI

• Weather API

Library&Framework

• jQuery
• Chart.js

Tools

• Git
• GitHub
• Heroku

作業フロー

Weather API key取得

Weather APIと通信するためにはAPIkeyを取得しなければいけません。
下記記事参考にさせて頂きました。
【Rails/JS】無料API「OpenWeatherMap」で天気予報を表示する
取得したAPIkeyは後ほど使用しますので保存しておいて下さい。

Ajaxでリクエスト送ってみる

$(function(){
    let API_KEY = "********";
    let city = "Tokyo";
    let url = '//api.openweathermap.org/data/2.5/forecast?q=' + city + ',jp&units=metric&APPID=' + API_KEY;
    $.ajax({
        url: url,
        dataType: "json",
        type: 'GET',
    })
    .done(function(data) {  
        console.log(data);
    })
    .fail(function(data) {
        alert("OpenWeatherMapAPI Communication failure");
    });
});

上記のようなコードの変数API_KEYに先程入手したKEYの値を入れ正常にリクエストが送信されるとjsonが返ってくると思います。
※keyを取得した場合だと少しの間時間を空けないと認証されない事があるみたいです。

データを整形してHTMLで出力させる。

私の場合は
APIへリクエストを送りjson取得
↓
取得したjsonをAjaxでPHPへ渡して整形
↓
整形されたデータをChartjsへ渡してグラフ化
というフローを行いました。

公開

GitHubでバージョン管理をしていたのでリモートリポジトリへpushしてHerokuでデプロイして公開完了です。
GitHubからHerokuへのデプロイ方法は下記記事参考にさせて頂きました。
heroku 初級編 - GitHub から deploy してみよう -

最後に

最近は水に飽きてきてミネラルウォーターにポッカレモンを突っ込んで飲んでます。
みなさんも水分補給は怠らないように気をつけて下さい。