OpenWeatherMapをショートコードにして各地の天気を表示

この記事のURLとタイトルをコピーする

Image

OpenWeatherMapを利用して天気情報を取得してみる、でOpenWeatherMapというAPIを使って八王子の天気を表示出来るかどうか、実験してみました。大体はできたのですが、もちょっと汎用的にしたり、表示を分かりやすくしてみたのでそれについて書きます。

天気と天気詳細の日本語化をする

OpenWeatherMapで戻ってくるお天気情報は英語です。例えば 晴れ なら Clear とか、くもり なら Clouds とかが返ってきているようです。プログラムにする場合はこれらの英語に対する日本語を指定しておけばOKです。しかし、そういうときプログラムなので 全部の種類 が分かっていないとだめなのです。だめ、というのは4種類しかないと思って4種類分の日本語を用意していても、5種類目が実はあって、という場合に対応する日本語を用意していないために日本語で表示出来なくなってしまいます。

前回、そうおもって全種類を調べたのですがみつかりませんでした。かといって、やはり、お天気ウィジェットをもちょっとすすめたいし、、と思ったのでとりあえず分かっている種類だけの日本語を用意してそれ以外のお天気が来たらそのまま(英語のまま)表示、ということにしました。

今分かってる種類はこんな感じです

少なすぎる、、他にもありそうですが(^_^;、まぁ今のところこんなかんじでやっております。

お天気詳細の方は一覧がみつかりました!

Image

Weather condition codes

OpenWeatherMapのAPIで取得した値をjson_decodeして$weatherという値に入れた場合は、

Image [1]

にこの表で言う ID が入っています。そのIDで日本語を表示させることができそうです。

Image [2]

とてもたくさんあるのでchromeで自動翻訳してみました。

Image [3]

これをコピーして、Excelに貼り付けます。翻訳でところどころ意味の分からないところがあってので微調整します。Dの列に関数を入れて、PHPコードにして、、、D列をコピーして

PHPに貼り付けました。これで翻訳は完成です。

風向きの日本語化をする

風向きを表示したいと思いました。しかし、OpenWeatherMapから返ってくる風向きは

こんな感じで、deg(度)で返ってきます。この場合は、51.0011度、のようです。これを東西南北とかの方位に置き換えるにはどうしようか、、ググりました。

Wikipedia 方位

こちらに方位と角度の関係が載ってました

方位の表現
360°式
平面上では、北を基準とした角度で表現し、値を読み上げる方式が多く用いられる。この方式では、北を0° = 360°として時計回りに、東を90°、南を180°、西を270°とする、このように決められた水平面内での角度を方位角と呼ぶ。

なっ、なるほど。これを元に方位を計算すれば良さそうです。あまり細かくしたくなかったので8方位にして45度ずつ振り当てました。その部分のコードがこんな感じです。

範囲をfromとtoの間、みたいに判定したかったので北の時の角度を +360 してあります。
これでdeg(度)に対する東西南北の風向きがわかるようになります。

これで、51.0011度は 北東 ということになります。

お天気マークの修正

元々ちょっと気になっていたのはお天気マークです。太陽のマーク昼用夜用があります。

Image [5]

夜の太陽は茶色い、と。ちょっとわかりにくいけどまぁいいかなと思っていたのですが、天気を表示させてみて昼間なのに夜の太陽になっていることにきづきました。

OpenWeatherMapのページで天気を見るところで確認すると

Image [4]

このように、グラフの天気は昼の太陽なのに、左側に出ているのは夜の太陽です。APIで戻ってくるアイコン名もどうやらこの左側の方の値なのでは無いかと思いました。このOpenWeatherMapを提供しているところはイギリス(というかなんというか)のようなので、グリニッジ標準時日本は+9時間なので時差を考慮してグラフのお天気マークは表示されているようですが、左側の方はグリニッジ標準時からのマークになってるようです。

どちらにしても夜の太陽は茶色い、というのがわかりにくかったので

こういう感じでアイコンを全部昼用のものにしてしまいました。これで時差も関係ないです(^_^;。

ショートコードで便利に表示できるように修正する

前回は 八王子の天気 としていたのですが、今回ちゃんとしたショートコードにするために「都市名と国名」を指定して表示出来るようにしました。でも国名はたいがい日本なので何も指定しなければ日本に、また八王子優先コードとして(^^;、都市名を指定しなければ八王子の天気が表示されます(^^;。

ショートコードとして

だけを指定すれば八王子の天気。

とかにすれば沖縄の那覇の天気。

とすればアメリカ合衆国ニューヨークの天気となります。

都市名や国名は OpenWeatherMap のページでsearchをして検索出来た名前にします。
 

こんな感じのものができました

コードは使っている子テーマのfunctions.phpに以下を追加しました。

長いですね(^_^;。classとかだったらもちょっといい感じに書けたかもしれないんですが。。あと、ウィジェットに表示するため、バックカラーとかをCSSで指定しました

これを使っている子テーマの style.css に追加しました。

ということで、ウィジェットに

Image [6]

こんな感じで指定すると、

Image [7]

こんな感じで表示されるようになりました(^^)/。

ニューヨークって寒いんですねー

appidを指定しよう

コーディングしているのですがついつけるのを忘れてしまうのがappidです。このAPIを使うにはappidを指定する事、とあります。現在上記のようにappidが空欄でも取得はできているのですが、ちゃんとした使い方で無いためいつ利用ができなくなるかもしれません。

It is quite easy to work with Openweather API. Just sign up to get your API key and then call any weather API. And mind using API key in every API call whatever...

こちらで取得したappid

こんな感じで指定してお使いくださいm(_ _)m。

まとめ:OpenWeatherMapのいいところとこれがあったらいいなぁ

このOpenWeatherMapのいいところは都市名ぐらいの単位で天気を取得することができるというところです。他のAPIを見てみたのですがわりとおおざっぱなものしか見つかりませんでした。また、今回のように都市名、国名ではなく緯度、経度でも lat=緯度&lon=経度 で指定できます。

また、5日分は3時間単位、1日単位だと16日分の天気予報が取得できるようです。まだまだ色々な表示ができそうですね。

これがあったらいいなぁというのが 「降水確率」 です。これって日本独特なんでしょうか?湿度や気圧が返ってくるのでその辺から降水確率がわかるのかな?ちょっと今時点では不明です。

今時点ではこのOpenWeatherMapが情報も多くてよいなぁと思うのでまたもっと色々な表現をしてみたいなと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告

コメント

  1. 今OpenWeatherMapのlocalizationに「日本語」を足して欲しい、という話を投げていて、
    Excelで訳語を送って欲しいと言われています。
    この記事にある訳語を使わせていただいても良いですか?

  2. 小雨の訳とか色々修正が必要そうなので、参考資料として使用させていただきます。

    • 兎本美佳 兎本美佳 より:

      おはようございます、toowitterさん。なにかお役に立つようでしたらどうぞご自由にお使いください(^^)/

  3. ロト君 より:

    丁度、調べたい情報でした!もう少し勉強したいと、思います!!

    ありがとうございます!!

    • 兎本美佳 兎本美佳 より:

      ロト君さん、こんにちは!コメントありがとうございます。なにかお役に立てたようなら幸いです。最近はプラグインで、 https://usortblog.com/weather_in_japan/ こういうのもあるみたいです。コーディングがめんどうでしたらこちらでもいいかもですー

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。