1. OpenWeatherMapのお天気アイコン
OpenWeatherMapには予め気象コードに合わせたアイコンが用意されています。
無料なのにとっても親切！
そんな初期設定のアイコンの一例がこちらです。
なんとも画質も微妙ですし、あまりイケてない気がしますね・・・
変えれるものなら変えたいと思っていじってみたら
とっても簡単にできたので、その方法を記録しておきます。
2. ドキュメントを確認してみると...
OpenWeatherMapのドキュメントを確認してみると、下記アイコンの一覧が確認できます。
実際に表示されるものとは少し違いますが、
ファイル名がわかるのでこちらをいじればどうにかなりそうということが分かります。
https://openweathermap.org/weather-conditions
3. 変更方法
weather.js
$.ajax({url:"https://api.openweathermap.org/data/2.5/weather",dataType:"jsonp",data:"q=Tokyo,jp&appid="+APIKEY+"&lang=ja&units=metric",//天気データ呼び出し成功時success:function(data){//〜中略〜$(".dayWeatherIcon").attr("src","img_tenki/"+data.weather[0].icon+".png ");他にやり方はあるかと思いますが、今回はこんな感じの手順で実装しました！
１、まず、上記アイコン一覧のファイル名を参考にお天気アイコンの画像を準備し、フォルダに格納
今回はimg_tenkiというフォルダに画像を保存
２、画像を表示させたいimgタグを予め用意しておき、そのsrcを"img_tenki/" + data.weather[0].icon + ".png "と指定する
4. 完成したのがこちら...
少し良い感じになりました！